Forem: ahmadullah

CREATE A CAT APP WITH HTML

ahmadullah — Sat, 31 Jul 2021 15:24:21 +0000

We've learnt HTML5 from scratch and now it's time to create some apps using HTML.
In this post I am going to create a cat app using HTML without any style, so it is so ugly don't be scared right now when you learn CSS language we will apply our CSS into our cat app.
First add h1 heading element into app.

<h1>Cat Photo App</h1>

We have HTML semantic elements, what does it mean.
Semantics elements are elements that they have special like: header, section, aside, main, article, footor.
Beside semantics elements we have non-semantic elements they don't have special meanings like: div and section.

Let me explain semantic elements

Header => From its name everyone knows it is used at the heading of a website.
Main => We wrap our web content inside main element.
Article => We put our content like: texts, images, videos , audios,...
Section => We can create multiple sections into our website which is so common.
Aside => Is used for sidebars, I fetch a photo of semantic elements on that time you will have a basic knowledge of semantic elements.

Footer => Is used at the bottom of our website which is sticked at the bottom.

Let's add the image of cat into our website then add a link to our cat photos after that create an unordered list what our cat eat, after that create a basic form which defines the type and some other attributes of our cat.
As I said we wrap our content inside main element.

<main>
<img src="..." alt="my cat photo">
<p>Click <a href="..." target="_blank">here</a> to view more photos of my cat</p>
<h2>Things my cat eat daily</h2>
<ul>
<li>Meat</li>
<li>Bread</li>
<li>Bean</h2>
</ul>
<form>
<p>Cat Type</p>
<input type="radio" name="type" id="outdoor" value="outdoor">
<label for="outdoor">Outdoor</label>
<input type="radio" name="type" id="indoor" value="indoor">
<label for="indoor">Indoor</label>
<p>My Cat Attributes</p>
<input type="checkbox" id="lovely" value="lovely">
<label for="lovely">Lovely</label>
<input type="checkbox" id="lazy" value="lazy">
<label for="lazy">Lazy</label>
<input type="checkbox" id="energetic" value="energetic">
<label for="energetic">Energetic</label>
<input type="submit" value="Submit">
</form>
</main>

This was all about my cat photos' app.
Hope you enjoy the story.
If you have any questions or suggestions let me know.
Don't forget to like and share.

LEARN SOFTWARE DEVELOPMENT FOR $0 UPFRONT IN MICROVERSE

ahmadullah — Fri, 30 Jul 2021 13:10:43 +0000

Have you heard about Microverse Software Development Organization?
Microverse Software Development Organization is not like other Software Development Organization or Bootcamp.
Let me explain to you why Microverse Software Development Organization is unique among other Bootcamps.
If you apply your name at any Bootcamps that teach Software Development first of all they ask you for upfront money.
Upfront means paying money before you do anything.
Bootcamps require big amount of money like $10000 or $20000 and up.
Because of this issue everyone can't learn Software Development.
Fortunately Microverse Software Development Organization offers you the best Services and the best method with $0 cost upfront until you get hired.
For more information refer to
https://www.microverse.org/?grsf=gmfoi5.
Hope you enjoy the story.
Please don't let your time be wasted.
Start your Software Development Career right now.
Long live Microverse.org

HTML TUTORIAL FOR BEGINNERS PART 9

ahmadullah — Thu, 29 Jul 2021 16:30:55 +0000

👉Audio🎶🔊

👉Video📽🎬

👉Embedding📎📌

Audio 🔊🎶

YouTube is one of the largest and famous video sharing platform.
Now you may wonder how to add video and audio in a website.
It's super easy like adding images into a website.
Look at the below Example:

<audio controls loop muted>
<source src="..." type="audio/mp3" type="audio/ogg">
</audio>

Audio has some attributes like👇

controls
loop
muted

Controls attribute displays play button and speaker icon and audio duration.
Loop attribute plays audio continuously.
Muted attribute mutes the audio by default.
Inside audio source element comes.
Source element has some attributes like👇

src
type
srcset

Video🎬📽

Video is like audio but video has two more attributes than video like👇

autoplay
poster

Autoplay attribute plays video when the web page is loaded.
Poster is an overlay at the beginning of video.
Look at the video Examples below 👇

<video controls muted loop autoplay poster="...">
<source src="..." type="video/mp4" type="video/ogg">
</video>

Nowadays there lots of video formats like

mp4
webm
mp
mp2
avi
mpeg
mov
qt

And many more.
Modern browsers support variety types of videos.
As well lots of audio formats available in today's world, modern browsers support them.

Embedding

Embedding means displaying external content or posts into our website.
In HTML we use iframe and embed elements.

An example from YouTube

<iframe width="344" height="194" src="https://www.youtube.com/embed/R_dwUR2HbZM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Beside YouTube Tiktok, Twitter, Instagram allow us to embed their posts and contents.

Hope you enjoy the story.
Please don't forget to like and share.

HTML TUTORIAL FOR BEGINNERS PART 8

ahmadullah — Wed, 28 Jul 2021 07:21:00 +0000

If you have a Facebook account you have to submit your first name, lastname,email address or phone, password, date of birth, country, gender and more to Facebook to record your information in its servers or databases.
Today you learn how to create those kinda textfields you've experienced on Facebook.
As I mentioned earlier Facebook wants your firstname, lastname, email or phone,password, date of birth, gender, country.
All of these are input fields that we're going to learn them.

Like the below image which is from Facebook signup form👇

To create this of forms in HTML we use form element.
Every other content is wrapped inside form element like: first name input field. Last name input field...
Look at the below code 👇

<form>
<!--Your input fields come here-->
</form>

In HTML when we create form, it has some attributes like other elements for example:

method
action

Method attribute takes two parameters:

POST
GET

These parameters are very crucial and important when submitting form to a server.
Differences between POST and GET parameters is as follow:
GET is for getting data from form.
POST is for sending data through a form like comment,story...
These are some useful form attributes👇

action
autocomplete
method
novalidate
target

Now let's learn how to create a basic form in HTML:

<form method="POST">
<label for="firstname">First Name</label>
<input type="text" id="firstname" placeholder="First Name">
<br>
<label for="lastname">Lastname</label>
<input type="text" id="lastname" placeholder="Lastname">
<br>
<input type="submit" value="submit">
</form>

We can create email input field just by changing the type value to email and to create password field change into password and so on so.

Some are the useful form input fields 👇

text
email
password
file
submit
image
date
local-date
week
color
number
tel
reset
url
search
radio
checkbox As well these input fields like email, password, number, url, search, tel have some attributes like below👇
placeholder
type
name
id
value
autocomplete
spellcheck Forms are very useful in a website and a web app. ### Look at the below Examples👇

  <form>
            <label for="username">Username</label>
            <input type="text" id="username" placeholder="Username">
            <br>
            <label for="email">Email</label>
            <input type="email" id="email" placeholder="Email">
            <br>
            <label for="password">Password</label>
            <input type="password" id="password">
            <br>
            <h1>Choose your favourite subjects?</h1>
            <input type="checkbox" id="math">
            <label for="math">Math</label>
            <br>
            <input type="checkbox" id="biology" checked>
            <label for="biology">Biology</label>
            <br>
            <h1>Choose your gender?</h1>
            <input type="radio" name="gender" id="male">
            <label for="male">Male</label>
            <br>
            <input type="radio" name="gender" id="female">
            <label for="female">Femalr</label>
            <br>,
            <input type="color">
            <input type="date">
            <input type="week">
            <input type="number">
            <input type="file">
            <input type="tel">
            <label for="languages">Choose your language</label>
            <select id="languages" multiple>
                <option value="English" selected>English</option>
                <option>Arabic</option>
            </select>
            </form>

I hope you enjoy the video and also share and like it

HTML TUTORIAL FOR BEGINNERS PART 7

ahmadullah — Tue, 27 Jul 2021 09:44:26 +0000

Sometimes you wanna create list with bullet but sometimes with number, this kinda of stuff are called list elements in HTML.
List elements are divided into two type:
1- Ordered list
2- Unordered list

Ordered list

Is a list which its list items are numbered at the beginning of the item.
For example you wanna list your school's subjects as the total of your subjects be clear like below👇
1- Math
2- Physics
3- Geometry
4- Computer science
5- Probability
6- Chemistry
As you see the list items are numbered at the beginning of the item.
I hope you, am clear and explained it professionally hope you understand my point.

Unordered list

Is a list which its items are not numbered but they are started with bullets •, the number of items are not cleared and displayed.
Unordered list is like below👇
• Math
• Physics
• Chemistry
• Probability
How to create these types of lists in HTML.
Don't be scared, it's super easy just look below👇

<!--Ordered list-->
<ol>
<li>ordered list item 1</li>
</ol>
<!--Unordered list-->
<ul>
<li>unordered list item 1</li>
</ul>

As you see <ol> means ordered list.
<ul> implies unordered list.
Inside ordered or unordered list we put list item which is <li>.
As much as item you can add into your list.
We can customize unordered and ordered list using list-type property.
If you want to learn more about lists refer to mdn.org.
Hope you enjoy the story please share and like it.

HTML TUTORIAL FOR BEGINNERS PART 6

ahmadullah — Mon, 26 Jul 2021 10:46:25 +0000

Sometimes you want to add a element to your website but still don't know where it will link.
This is also handy when you're changing the behavior of a link using JavaScript, which we'll learn later.
For example the current value of href attribute is https://www.freecodecamp.orgnow replace href value with # symbol to create a dead link.
This is the most common usage of # that every developer use it.

<a href="#">Contact us</a>

If you have any questions and suggestions or any problem let me know in the comments section below 👇
Make sure you share ↗️ and like my story❤👍.

HTML TUTORIAL FOR BEGINNERS PART 5

ahmadullah — Mon, 26 Jul 2021 04:37:24 +0000

We learned how to add heading elements, paragraph element, image and anchor element, today it's time to learn how to nest them within themselves.

Like example below:

<>...<>...</>...</>

If you notice we encapsulated one element within other element, let's break it down a little bit for better understanding 👇
For example if we want to nest paragraph element inside heading elements we could do this👇

<h1>I am heading element<p>,but I am paragraph element encapsulated within heading elements</p></h1>

The above code is the general formula or method of nesting HTML elements within each other.
For if we want to convert an image into a link we could do this 👇

<a href="https://www.unsplash.com" target="_blank"><img src="https://www.unsplash.com/logo.png" alt="unsplash logo"></a>

If you have any questions or suggestions let me know in the comment section below 🗨👇👍.
Please like ❤ and share ↗️🏹

HTML TUTORIAL FOR BEGINNERS PART 4

ahmadullah — Sat, 24 Jul 2021 07:50:40 +0000

a (anchor) elements can also be used to create internal links to jump to different sections within a webpage.

To create an internal link, you assign a link's href attribute to a hash symbol # plus the value of the id attribute for the element that you want to internally link to, usually further down the page. You then need to add the same id attribute to the element you are linking to. An id is an attribute that uniquely describes an element.

Below is an example of an internal anchor link and its target element:

<a href="#contacts-header">Contacts</a>
...
<h2 id="contacts-header">Contacts</h2>

When users click the Contacts link, they'll be taken to the section of the webpage with the Contacts header element.

Demo

https://codepen.io/ahmadullah1919/pen/QWvOmVE

HTML TUTORIAL FOR BEGINNERS PART 3

ahmadullah — Fri, 23 Jul 2021 07:29:22 +0000

You can use a(anchor) elements to link to content outside of your web page.
aelements need a destination web address called an hrefattribute. They also need anchor text. Here's an example:

<a href="https://www.freecodecamp.org">this links to freecodecamp.org</a>

Then your browser will display the text this links to freecodecamp.org as a link you can click and that link will take you to the web address https://www.freecodecamp.org

Task

Create an a element that links https://www.freecatphotoapp.com and has cat photos as its anchor text.

Solution

<a href="https://www.freecatphotoapp.com">cat photos</a>

HTML TUTORIAL FOR BEGINNERS PART 2

ahmadullah — Thu, 22 Jul 2021 14:52:26 +0000

In HTML img element is used to display every types of images like:jpg, png, jpeg...
It can also display svg.
img has many attributes but the most common ones are:loading, src, srcset, height, width and alt.
When we wanna to put image into website we have target the path or address of that image we interested in it.

It's implementation looks like below:

<img src='yourimagepath/yourimagename.png'/>

Inside src attribute we can put local images path or online path.
The second important attribute is alt attribute, you have to always include this attribute into your img element because sometimes your image path isn't correct so the text is written inside alt attribute instead displays.
Your text should be meaningful that conveys the purpose or aim of your image to users.
When your user has slow internet connections your images won't load properly in that case alt attribute plays crucial role.
For example

<img src="https://www.freecatphotoapp.com/yourcatphoto.jpg" alt="my cat photo eating food"/>

One thing keep in mind that HTML is not case sensitive language you can write it's elements into capital case or camel case it doesn't shows any error message.
Google chrome developers recommend us to use loading attribute to speed image loading process.

Looks like this

<img src="https://www.freecatphotoapp.com/yourcatphoto" loading="lazy-loading"/>

We can control the width and height of images using width and height attributes.

Look at this:

<img src="https://www.freecatphotoapp.com/yourcatphoto" width=200 height=150/>

I hope you enjoy the tutorial.
If you have any suggestions or criticism please let me know.
Please share let others to know

HTML TUTORIAL FOR BEGINNERS PART 1

ahmadullah — Thu, 22 Jul 2021 05:26:46 +0000

HTML is a markup language that uses a special syntax or notation to describe the structure of a web page to the browser. HTML elements usually have opening and closing tags that surround and give meaning to content but some HTML elements don't have closings tags like

<img src='image path'/>

This is opening tag

<>

This is closing tag

</>

And self-closing tag is

</>

HTML is the building block of a website like skeleton in our body and brick or stone in a house.
Someone says that HTML is a programming language but it's a misconception.
The meaning of programming language is to add logic into your program or software how it to work.
HTML has 6 types of heading elements from h1 to h6.
The web browser displays h1 as the biggest heading and h6 as the smallest heading.
Every HTML has special meaning as I described above.

Examples

<h1>hello world heading 1</h1>
<h2>hello world heading 2</h2>
<h3>hello world heading 3</h3>
<h4>hello world heading 4</h4>
<h5>hello world heading 5</h5>
<h6>hello world heading 6</h6>

HTML has paragraph element as well looks like this one

<p>hello paragraph</p>

Beside these elements HTML many more elements but not useful like these ones:

<b></b>
<pre></pre>
<code></code>
<abbr></abbr>
...

Some of the screenshots I've taken from #freecodecamp website wanna to include here.

How to create digital clock in Vanilla JS

ahmadullah — Sat, 13 Feb 2021 11:27:47 +0000

I can create a digital clock in two ways the first one is using setInterval method.

And the second way is using setTimeout function but a little bit confusing and challenging.

Creating digital clock using setInterval

HTML Part

<h1 class='time'></h1>

CSS Part

body {
display:flex;
align-items:center;
justify-content:center;
height:100vh;
background-color:#333;
}
h1 {
font-size:2rem;
color:#fff;
}

JavaScript Part

setInterval(showTime,1000);
function showTime(){
let date=new Date();
let time=date.toLocaleTimeString();
document.querySelector('.time').innerHTML=time;
}

1000ms=1second

Creating a digital clock using setTimeout

HTML Part

<h1 class='clock'></h1>

CSS Part

body {
font-family:'Poppins',sans-serif;
height:100vh;
background-color:#333;
display:flex;
justify-content:center;
align-items:center;
}
h1 {
font-size:2rem;
color:#fff;
}

JavaScript Part

let clock=document.querySelector('.clock');
function showTime(){
let date=new Date();
let h=date.getHours();
let m=date.getMiuntes();
let s=date.getSeconds();
let session='AM';
if(h===0){
h=12;
}
if(h>12){
h=h-12;
session='PM';
}
h=(h>10)?'0'+h:h;
m=(m>10)?'0'+m:m;
s=(s>10)?'0'+s:s;
let time=`${h} : ${m} : ${s} ${session}`;
clock.textContent=time;
setTimeout(showTime,1000);
}
showTime();
clock.addEventListener('load',showTime);
![chrome-capture](https://dev-to-uploads.s3.amazonaws.com/i/6lgcraigdjbmtdcen349.gif)

Forem: ahmadullah

CREATE A CAT APP WITH HTML

Let me explain semantic elements

LEARN SOFTWARE DEVELOPMENT FOR $0 UPFRONT IN MICROVERSE

HTML TUTORIAL FOR BEGINNERS PART 9

Table of contents

👉Audio🎶🔊

👉Video📽🎬

👉Embedding📎📌

Audio 🔊🎶

Video🎬📽

Embedding

An example from YouTube

HTML TUTORIAL FOR BEGINNERS PART 8

Like the below image which is from Facebook signup form👇

Method attribute takes two parameters:

Now let's learn how to create a basic form in HTML:

Some are the useful form input fields 👇

HTML TUTORIAL FOR BEGINNERS PART 7

Ordered list

Unordered list

HTML TUTORIAL FOR BEGINNERS PART 6

HTML TUTORIAL FOR BEGINNERS PART 5

Like example below:

HTML TUTORIAL FOR BEGINNERS PART 4

Demo

HTML TUTORIAL FOR BEGINNERS PART 3

Task

Solution

HTML TUTORIAL FOR BEGINNERS PART 2

It's implementation looks like below:

Looks like this

Look at this:

HTML TUTORIAL FOR BEGINNERS PART 1

Examples

How to create digital clock in Vanilla JS

Creating digital clock using setInterval

HTML Part

CSS Part

JavaScript Part

Creating a digital clock using setTimeout

HTML Part

CSS Part

JavaScript Part