ይሄ ከላይ ያለው የ app ተጠቃሚዎችን የሚመለከት ነው በ pc ሊሰራላችሁ ምትፈልጉ ከሆነ comment ላይ እንፈልጋለን ብላቹ ጻፉ



ከተመቻቹ የተለመደችዋን ❤❤

@AbWebDeveloper

ከጨረሳቹ comment lay screenshot አስከምጡልኝ ከዛ እንቀጥላለን




Good day🙌

@AbWebDeveloper

Day 1 ☝️☝️☝️

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Website</title>
</head>
<body>

<h1>Web Development Courses</h1>

  <h2>About Me</h2>
  <p>My name is Amare Sad,and I am learning html and css.</p>

  <h2>My Skills</h2>
  <h3>HTML</h3>
  <p>Now, I am learning this course.</p>
  <h3>CSS</h3>
  <p>For future,I will learn this course.</p>
</body>
</html>

የመጣላችሁን output comment ላይ አስቀምጡልኝ explanation ከታች ታገኛላችሁ ግር ካላችሁም comment ላይ ጠይቁን

@AbWebDeveloper

Example Explained

The <!DOCTYPE html> declaration defines that this document is an HTML5 document

The <html> element is the root element of an HTML page

The <head> element contains meta information about the HTML page

The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)

The meta view part tells the browser size of the page display correctly on different screen size💻 🤳 .

The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

The <h1> to <h6> element defines a heading from large to small

<h1> is the largest heading
<h6> is the smallest heading

The <p> element defines a paragraph

💻 Day 2: HTML Basics ✌️✌️


👋 Hello everyone! Welcome back to Day 2 of our HTML journey.

First let's define what HTML is?

HTML stands for Hyper Text Markup Language.

Hyper= means a link that used to connect one website to another website.

Text =means as u know it's any text that display on the screen.

Markup Language =means a language that tells to understand the browser this is title,img,heading and etc..

💡 Think about this: HTML is like the skeleton of a human body. It gives structure to a website.

#HTML Element

HTML Element is everything from opening tag(<) to closing tag(>), including the content between them.

Structure of an HTML Element is👇

<tagname>Content </tagname>

👉Most HTML Elements have opening and closing tag.

👉Some HTML Elements are Empty(void). ✌️They don't have content.
such as👇👇
<br>,<hr>,<img>,<input>,<meta>,<link> etc...

Nested Elements👉👉Elements can contain other html element.
Example:

<p> I like to learn🥰 <strong>HTML</strong></p>

Another Example

         <h1>Welcome </h1>
         <p>Hello Everyone🖐</p>
    </div>

Welcome
Hello Everyone🖐
💡 Remember: A website is built by putting HTML elements inside other elements.

Types of HTML Elements

➀ Block Elements

👉 starts on a new line and takes the full available width.
Examples 👇👇

<div>, <p>, <h1> to <h6>, <section>, <article>, <header>, <footer>, <nav>, <main>, <form>, etc...

📌For now just know the names only for future we'll see them one by one.

➁ Inline Elements

👉 stay on the same line.
👉Don't start on a new line.
Examples👇👇

<strong>, <span>, <a>, <img>, <label>, <input>, <em> etc..

➂ Semantic Elements

👉👉 describe the meaning of their content, making page easier to understand for developers, browsers, and search engines.
Examples👇👇

<header>, <nav>, <main>, <section>, <article>, <aside>, <footer> etc...

⓸ Non-Semantic Elements

👉👉 They don't describe what they contains.
👉They are useful for layout and styling, but do not tell u the purpose of the content.
Examples 👇👇

<div>, <span>


Important Note ⭐

HTML Elements are not case sensitive.

<H1> Content </H1> and <h1> content </h1> are the same, but Most professional developers 👩‍💻👨‍💻 always use lowercase.
Why?

Because lowercase makes code cleaner and follows professional coding standards.

🎯 Day 2 Practice
Before moving to Day 3, answer these questions :
1️⃣ What is an HTML Element?
2️⃣ What is the difference between Block and Inline elements?
3️⃣ Give 3 examples of Semantic Elements.
4️⃣ Is <br> a void element or not?
Write your answers in the comments ❤️

Next day we'll see HTML Attributes 🚀

If you like it, give this a reaction. ❤️

@AbWebDeveloper

💻 Day 3: HTML Basics — HTML Attributes 🚀🔥
👋 Hello everyone! Welcome back to Day 3 of our HTML journey. 🙌
Today we will learn one of the most important concepts in HTML:
🏷️ HTML Attributes
🤔 What are HTML Attributes?
HTML Attributes give extra information about an HTML element.
Think of an HTML element as a person 🧑 and attributes as the details about that person:
👤 Person → HTML Element

📌 Details (name, age, address, etc.) → HTML Attributes
Example:
A person:

Name: Amare
Age: 19
Country: Ethiopia

An HTML element:

<img>

Attributes give more details:

<img src="profile.jpg" alt="Amare's photo">

Here:
src → tells which image to display
alt → describes the image

📝 General Syntax of Attributes
The basic structure is:

<tagname attribute="value">
    Content
</tagname>

Example:

<p title="My paragraph">
    Hello World
</p>

Here:
<p> → element
title → attribute
"My paragraph" → attribute value

🖼️ Example 1: Image Attributes

<img src="profile.jpg" alt="Ben's photo">

Let's understand:
① src Attribute
src means source.
It tells the browser:
➡️ "Which image should I display?"
Example:

src="profile.jpg"

The browser searches for the image named profile.jpg.

② alt Attribute
alt means alternative text.
It describes the image if the image cannot be displayed.
Example:

alt="Ben's photo"

If the image fails to load, the browser displays:

Ben's photo

✅ It also helps screen readers for accessibility.

🔗 Example 2: Link Attribute

<a href="https://www.google.com">
    Go to Google
</a>

Here:
href Attribute
href tells the browser where the link goes.
Example:

href="https://www.google.com"

Meaning:
➡️ "When the user clicks this link, open Google."

⚠️ Important Note
Attributes are always written inside the opening tag.
✅ Correct:

<img src="photo.jpg">

❌ Wrong:

<img>
src="photo.jpg"
</img>

🔥 Multiple Attributes
One HTML element can have many attributes.
Example:

<img src="profile.jpg" alt="My_photo" width="300" height="200">

This image has four attributes:
src
alt
width
height
Remember:
✅ Attributes are separated by spaces.

🔡 Attribute Naming Rules
Attributes are not case sensitive.
Example:

<img SRC="photo.jpg">

and

<img src="photo.jpg">

Both work.
But professional developers usually write attributes in lowercase:
✅ Recommended:

<img src="photo.jpg">

☑️ Boolean Attributes
Some attributes do not need a value.
They only need to exist.
Example:

<input type="text" required>

Here:
required is a Boolean attribute.
It means:
➡️ "This field must be filled before submitting the form."
Example:

<form>
<label>Name:</label>
<input type="text" required>

<button>Submit</button>
</form>

The user cannot submit the form without entering a name.

⭐ Other Boolean Attributes
Some common Boolean attributes are:
✅ disabled → disables an element
Example:

<input type="text" disabled>

✅ checked → selects a checkbox/radio automatically
Example:

<input type="checkbox" checked>

✅ readonly → user can see but cannot edit
Example:

<input type="text" readonly>

✅ selected → selects an option automatically
Example:

<option selected>Ethiopia</option>

✅ autofocus → automatically focuses an input
Example:

<input type="text" autofocus>

✅ multiple → allows multiple selections
Example:

<input type="file" multiple>

✅ hidden → hides an element
Example:

<p hidden>This is hidden</p>

🌍 Global Attributes
Global attributes are attributes that can be used on almost every HTML element.

① ID Attribute (#️⃣)
The id attribute gives an element a unique name.
Example:

<h1 id="home">
    Welcome
</h1>

Rules:
✅ Every element should have a unique id.
❌ Two elements should not share the same id.
Wrong:

<p id="text">Hello</p>
<p id="text">World</p>

Correct:

<p id="first">Hello</p>
<p id="second">World</p>

② Class Attribute (📦)
The class attribute groups elements together.
Example:

<p class="text">
    Paragraph 1
</p>

<p class="text">
    Paragraph 2
</p>

Here both paragraphs belong to the same group.
Unlike id:
✅ Many elements can have the same class.

③ Title Attribute (💬)
The title attribute shows extra information when you hover your mouse.
Example:

<p title="This is a paragraph">
    Move your mouse here.
</p>

When you hover:
A small message appears.

④ Style Attribute 🎨
The style attribute adds CSS directly to an element.
Example:

<p style="color:blue;">
    This is blue text
</p>

It changes the paragraph color.
⚠️ We will study CSS deeply later.

⑤ Lang Attribute 🌐
The lang attribute tells the browser the language of the webpage.
Example:

<html lang="en">

Meaning:
The webpage language is English.
Other examples:

<html lang="am">

Amharic language.


🎯 Summary of Day 3

Today we learned:

✅ What HTML Attributes are

✅ Attribute syntax

✅ src and alt attributes

✅ href attribute

✅ Multiple attributes

✅ Boolean attributes

✅ Global attributes

✅ id, class, title, style, lang

Next lesson 🚀:

📚 HTML Headings (h1 → h6)

Have a great day! 😍🔥

@AbWebDeveloper

የ2026 አለም ዋንጫ 🏆🏆🏆🏆🏆 ዛሬ ይጠናቀቃል....የማን ደጋፊ ናቹ?


Argentina 🇦🇷❤ or Spain 🇪🇸 👍


በዛውም ግምታችሁን comment ላይ አስቀምጡ በትክክል ያገኘ ሰው ሽልማት አለው🙌🙌

@AbWebDeveloper

💻 Day 4( part 1): HTML Basics — HTML Headings 🚀🔥
👋 Hello everyone! Welcome back to Day 4 of our HTML journey. 🙌

Today we'll learn one of the most commonly used HTML elements:

📝 HTML Headings

🏷️ HTML Headings

🤔 What are HTML Headings?
HTML headings are used to create titles and subtitles on a webpage.

Think of a book 📚.
Every book has:

📖 Book Title

📑 Chapter Title

📄 Section Title



A webpage works the same way.

HTML provides 6 heading levels.

📚 HTML Heading Tags

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

There are 6 heading tags, from h1 to h6.

📏 Heading Size

The browser displays headings in different sizes.

<h1> ➜ Largest
<h2>
<h3>
<h4>
<h5>
<h6> ➜ Smallest

Remember:

👉 The number gets bigger...
👇
The text size gets smaller.

✨ Example

<h1>My Website</h1>

<h2>About Me</h2>

<h3>My Hobbies</h3>

<h4>Football</h4>

<h5>My Favorite Team</h5>

<h6>Contact</h6>

The browser displays:

My Website
About Me
My Hobbies
Football
My Favorite Team
Contact

💡 Best Analogy

Imagine a school. 🏫
👨‍🏫 Principal → <h1>
👩‍🏫 Vice Principal → <h2>
👨‍💼 Department Head → <h3>
👨‍🏫 Teacher → <h4>
👨‍🎓 Student Leader → <h5>
👦 Student → <h6>
Just like school has different levels,
HTML headings also have different levels.

⭐ Important Rule

👉 There should normally be only one <h1> on a webpage.
Why?
Because <h1> is the main title of the page.

@AbWebDeveloper

💻 Day 4 (Part 2): HTML Basics — HTML Paragraph 📄🔥

📄 HTML Paragraph

Almost every website contains paragraphs because they are used to display normal text such as descriptions, articles, blog posts, and information.

🤔 What is an HTML Paragraph?

An HTML paragraph is used to write normal text on a webpage.
The paragraph element is represented by the <p> tag.

😍 Best Analogy 👇👇

Imagine you're reading a newspaper. 📰
It contains:
📰 Headline → Like an HTML Heading (<h1>)
📄 Story or Information → Like an HTML Paragraph (<p>)
Or think about a book. 📖

📘 Chapter Title → Heading

📄 Explanation under the title → Paragraph

HTML works exactly the same way.

📝 General Syntax

<p>
    Your text goes here.
</p>

👨‍💻 Example 1

<p>Welcome to my first website.</p>

Output 👇
Welcome to my first website.
The browser displays the text as a paragraph.

👨‍💻 Example 2

<p>
Hello everyone!
My name is Amare.
I am learning HTML.
</p>

The browser displays all of this inside one paragraph.

📚 Multiple Paragraphs
You can create as many paragraphs as you want.
Example 👇👇

<p>I love HTML.</p>

<p>I practice coding every day.</p>

<p>My dream is to become a Web Developer.</p>

Each paragraph appears on a new line with some space between them.

⚠️ Important Note
The <p> element automatically leaves space (margin) above and below each paragraph.
Example:

<p>Paragraph One</p>

<p>Paragraph Two</p>

The browser automatically separates them.
You don't need to add empty lines in your HTML code.

❗ Extra Important Note
Even if you write many spaces inside a paragraph like this:

<p>Hello        World!</p>

The browser displays:

Hello World!

👉 HTML ignores extra spaces.

🔄 What About Enter (New Line)?
Look at this code:

<p>
Hello
World
</p>

Output:

Hello World

The browser ignores the Enter key inside a paragraph.

👉 If you want a new line, you'll learn the <br> tag in the next lessons.





💻 Practice Challenge 🔥

Create a webpage that contains:

✅ One paragraph introducing yourself.

Example:
Your name
Your country
Your dream job
Your favorite hobby

Try writing it by yourself and share on comment 🙌

@AbWebDeveloper

💻 Day 5: HTML Basics 🚀

👋🙌 Hello everyone! Welcome back to Day 5 of our HTML journey.
Today we're going to learn:

✨ HTML Text Formatting

🤔 What is HTML Text Formatting?

HTML Text Formatting is used to change the appearance or importance of text.

🎯 Best Analogy 😍👇
Imagine you're writing notes for an exam. 📚
Important words ➜ Bold
New vocabulary ➜ Italic
Very important sentence ➜ Highlighted
Wrong answer ➜ Crossed out
HTML lets us do exactly that on a webpage.

📝 General Syntax

<tagname>Your Text</tagname>

Example:

<b>Hello World</b>

Types of HTML Text-Formatting

① Bold Text (<b>)
The <b> element makes text bold.
Example👇👇

<b>Welcome to HTML</b>

Output:
Welcome to HTML
📌 Use it when you simply want text to look bold.

② Strong Text (<strong>)
The <strong> element also makes text bold.
Example👇👇

<strong>Important Notice</strong>

Output:
Important Notice

🤔 What's the difference between <b> and <strong>?
<b> → Only changes the appearance.
<strong> → Tells the browser the text is important.
Professional developers usually use <strong> when the text is important.

③ Italic Text (<i>)
The <i> element makes text italic.
Example👇👇

<i>Hello Students</i>

Output:
Hello Students

④ Emphasized Text (<em>)
The <em> element also makes text italic.
Example👇👇

<em>Please read carefully.</em>

Output:
Please read carefully.
Difference
<i> → Just italic.
<em> → Italic + emphasizes the importance of the text.

⑤ Marked Text (<mark>)
The <mark> element highlights text.
Example👇👇

<p>HTML is <mark>very easy</mark> to learn.</p>

Output:
HTML is very easy to learn.
It looks like using a yellow highlighter in your notebook.

⑥ Small Text (<small>)
The <small> element displays smaller text.
Example👇👇

<small>Terms and Conditions Apply.</small>

Output:
Terms and Conditions Apply.

⑦ Deleted Text (<del>)
The <del> element shows deleted text with a line through it.
Example👇👇

<p>Price: <del>$100</del> $80</p>

Output:
Price: $100 $80
It is commonly used for discounts.

⑧ Inserted Text (<ins>)
The <ins> element underlines inserted text.
Example👇👇

<ins>New Chapter Added</ins>

Output:
New Chapter Added

⑨ Subscript Text (<sub>)
The <sub> element displays text slightly below the normal line.
Example👇👇

H<sub>2</sub>O

Output:
H₂O
Mostly used in Chemistry formulas.

⑩ Superscript Text (<sup>)
The <sup> element displays text above the normal line.
Example👇👇

x<sup>2</sup>

Output:
x²
Mostly used in Mathematics.

⚠️ Important Notes

✅ HTML formatting elements help make webpages easier to read.
✅ Some elements only change appearance (<b>, <i>).
✅ Some elements also add meaning (<strong>, <em>).



Coding Challenge 💻

Create a webpage that includes:
✅ A bold title
✅ An important warning using <strong>
✅ One italic sentence
✅ One highlighted word
✅ A discounted price using <del>
✅ The chemical formula H₂O
✅ The mathematical expression x²


Try writing the code yourself and share on comment. 💪

@AbWebDeveloper

💻 Day 6: HTML Basics 🚀🔥
👋 Hello everyone! Welcome back to Day 6 of our HTML journey. 🙌
Today we're going to learn one of the most useful HTML elements:

🔗 HTML Links (<a>)

Have you ever clicked on a text like "Go to Google" or "Watch on YouTube" and it took you to another webpage?
That's exactly what HTML Links do!

🤔 What is an HTML Link?

An HTML Link is used to connect one webpage to another.
When users click a link, the browser opens another webpage, website, file, email, or even another section of the same page.

🌍 Best Analogy 😍👇👇

Imagine you're in a big city. 🏙️
There are many places:
🏠 Home
🏫 School
🏥 Hospital
🛒 Supermarket
How do you travel from one place to another?
👉 By using roads.
An HTML Link is like a road.
It connects one webpage to another.
Without links, websites would be like cities with no roads! 🚫🛣️

📝 HTML Link Syntax

<a href="URL">Link Text</a>

Let's break it down.

🧐 Understanding Each Part

① <a> Tag

The <a> tag stands for Anchor.
It is used to create hyperlinks.
Example:

<a>Google</a>

Without an href attribute, it is only text and doesn't take you anywhere.

② href Attribute

href stands for Hypertext Reference.
It tells the browser where the link should go.
Example:

href="https://www.google.com"

Meaning:
➡️ "Open Google's website when clicked."

③ Link Text

The text between the opening and closing tags is called the Link Text.
Example:

Go to Google

This is what users see and click.

✅ Complete Example

<a href="https://www.google.com">
Go to Google
</a>

👀 Output

Go to Google

When you click it, the browser opens Google's website.

🌍 Another Example

<a href="https://www.youtube.com">
Visit YouTube
</a>

Output:

Visit YouTube


🆕 Opening a Link in a New Tab
Sometimes we don't want users to leave our website.
Instead, we open the link in a new browser tab.
We use the target attribute.
Example:

<a href="https://www.google.com" target="_blank">
Go to Google
</a>

🤔 What does target="_blank" mean?
It tells the browser:
➡️ "Open this link in a new browser tab."
Without it:
The current page is replaced.
With it:
A new tab opens.

🌍 Example

<a href="https://www.youtube.com" target="_blank">
Open YouTube
</a>

📧 Creating an Email Link

You can even create a link that opens the user's email app.
Example:

<a href="Email:example@gmail.com">
Send Email
</a>

When clicked, the default email application opens.

📞 Creating a Phone Link

On smartphones, you can make a phone number clickable.
Example:

<a href="tel:+251900000000">
Call Us
</a>

When clicked on a phone, it opens the dialer.

⚠️ Important Notes

✅ Links are created using the <a> tag.
✅ The href attribute tells the browser where to go.
✅ The text between <a> and </a> is what users click.
✅ target="_blank" opens the link in a new tab.



🌍 Real Website Example

<h1>My Favorite Websites</h1>

<p>Click any website below.</p>

<a href="https://www.google.com">Google</a>

<br><br>

<a href="https://www.youtube.com">YouTube</a>

<br><br>

<a href="https://www.wikipedia.org">Wikipedia</a>

This webpage contains:
✅ One heading
✅ One paragraph
✅ Three clickable links



💻 Mini Coding Exercise
Create a webpage that contains:
✅ A heading saying "My Favorite Websites"
✅ A paragraph saying "Click the links below."
✅ A link to Google
✅ A link to YouTube that opens in a new tab
Try it yourself before looking at the answer and share on comment.



⏭️ Next Lesson

🚀 HTML Images (<img>)

We'll learn how to display images, use the src and alt attributes, resize images, and understand image best practices.



Have a wonderful day! 😍❤️

@AbWebDeveloper

💻 Day 7: HTML Basics 🚀🔥

👋 Hello everyone! Welcome back to Day 7 of our HTML journey. 🙌
Today we're going to learn one of the most exciting HTML elements:

🖼️ HTML Images (<img>)

Have you ever visited a website without pictures?
It looks plain and boring. 😴
Images make a website beautiful, attractive, and easier to understand.
Today, you'll learn how to display images on a webpage.

🤔 What is an HTML Image?

The <img> tag is used to display images on a webpage.
Images can be:
📸 Photos
🎨 Logos
🖼️ Icons
🌄 Background pictures
📊 Charts and diagrams

🌍 Best Analogy 😍👇👇

Imagine your bedroom. 🏠

A room with empty walls looks simple.
Now hang your favorite photos and posters on the wall.
Suddenly, the room becomes more beautiful.
An HTML Image works the same way.
It adds beauty and meaning to your webpage.

📝 HTML Image Syntax

<img src="image.jpg" alt="Description">

Unlike most HTML elements, the <img> tag does not have a closing tag.
It is called a void (self-closing) element because it only needs an opening tag.

🧐 Understanding Each Part

① <img> Tag

The <img> tag tells the browser:
➡️ "Display an image here."
Example:

<img>

By itself, it doesn't know which image to display.
That's why we use attributes.

② src Attribute

src stands for Source.
It tells the browser where the image is located.
Example:

<img src="cat.jpg">

Meaning:
➡️ "Find the image named cat.jpg and display it."
Without the src attribute, the browser doesn't know which image to show.

③ alt Attribute

alt stands for Alternative Text.
It describes the image if it cannot be displayed.
Example:

<img src="cat.jpg" alt="A cute cat">

If the image fails to load, the browser displays:
A cute cat
The alt attribute also helps people who use screen readers, making websites more accessible.

✅ Complete Example

<img src="cat.jpg" alt="A cute cat">

📏 Image Width and Height

You can control the size of an image using the width and height attributes.
Example:

<img src="cat.jpg" alt="A cute cat" width="300" height="200">

Here:
width="300" → Image width is 300 pixels.
height="200" → Image height is 200 pixels.

🖼️ Another Example

<img src="logo.png" alt="Company Logo" width="150">

Here, only the width is specified.
The browser automatically adjusts the height to keep the image proportional.

⚠️ Important Notes

✅ Always include the alt attribute.
✅ The <img> tag does not have a closing tag.
✅ The browser must be able to find the image specified in src.

🌍 Where Can Images Come From?

1️⃣ Local Image

An image saved in your project folder.
Example:

<img src="profile.jpg" alt="My Profile">

2️⃣ Image from the Internet

You can also use an image URL.
Example:

<img src="https://example.com/image.jpg" alt="Nature">

The browser downloads the image from the internet.



🌍 Real Website Example

<h1>My Pet</h1>

<p>This is my favorite cat.</p>

<img src="cat.jpg" alt="A cute cat" width="300">

This webpage contains:
✅ One heading
✅ One paragraph
✅ One image



💻 Mini Coding Exercise

Create a webpage that contains:
✅ A heading saying "My Favorite Animal"
✅ A paragraph describing your favorite animal
✅ An image of that animal
Set the image width to 300 pixels.
Try it yourself before looking at the answer and share on comment👇👇



⏭️ Next Lesson

🚀 HTML Lists (<ul>, <ol>, and <li>)

You'll learn how to create bullet lists, numbered lists, and organize information like menus, recipes, and to-do lists.


Have a wonderful day! 😍❤️


@AbWebDeveloper

💻 Day 8: HTML Basics 🚀🔥


👋 Hello everyone! Welcome back to Day 8 of our HTML journey. 🙌
Today we're going to learn how to organize information using:

📋 HTML Lists

Have you ever seen:
🛒 A shopping list?
🍕 A restaurant menu?
📚 A table of contents?
📖 Steps in a recipe?
All of these are examples of lists.
HTML provides special tags to create them.

🤔 What are HTML Lists?

HTML Lists are used to display a group of related items in an organized way.
For example:
Apple
Banana
Orange
Instead of writing everything in one sentence, lists make the information neat and easy to read.

🌍 Best Analogy 😍👇👇

Imagine your teacher asks you to write your school supplies.
❌ Without a list:
Pen Pencil Book Eraser Bag Ruler
It looks unattractive.

✅ With a list:
Pen
Pencil
Book
Eraser
Bag
Ruler
Now it's easy to read.
That's exactly why HTML Lists are important.

📚 Types of HTML Lists

HTML has 3 types of lists:
1️⃣ Unordered List (<ul>)
2️⃣ Ordered List (<ol>)
3️⃣ Description List (<dl>)
Today we'll learn the first two because they are the most commonly used.

🔹 Unordered List (<ul>)

🤔 What is an Unordered List?
An Unordered List displays items using bullet points (•).
Use it when the order of the items is not important.

📝 Syntax

<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

🧐 Understanding Each Part

① <ul>

<ul> stands for Unordered List.
It tells the browser to create a bullet list.

② <li>

<li> stands for List Item.
Every item inside a list must be written inside an <li> tag.

✅ Example

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Orange</li>
</ul>

👀 Output
• Apple
• Banana
• Orange

🔢 Ordered List (<ol>)

🤔 What is an Ordered List?
An Ordered List displays items using numbers.
Use it when the order is important.

🌍 Best Analogy 😍👇👇

Think about making a cup of tea.
You can't pour the tea before boiling the water.
The steps must follow the correct order.
That's why we use an Ordered List.

📝 Syntax

<ol>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ol>

✅ Example

<ol>
    <li>Wake up</li>
    <li>Brush your teeth</li>
    <li>Go to school</li>
</ol>

👀 Output
1.Wake up
2.Brush your teeth
3.Go to school

🔄 Difference Between <ul> and <ol>


🌍 Real Website Example

<h1>My Favourite Foods</h1>

<ul>
    <li>Injera</li>
    <li>Pizza</li>
    <li>Burger</li>
</ul>

<h2>Morning Routine</h2>

<ol>
    <li>Wake up</li>
    <li>Exercise</li>
    <li>Take a shower</li>
    <li>Eat breakfast</li>
</ol>

⚠️ Important Notes
✅ <ul> creates a bullet list.
✅ <ol> creates a numbered list.
✅ Every list item must be inside an <li> tag.




💻 Mini Coding Exercise

Create a webpage that contains:
✅ A heading saying "My Hobbies"
✅ An unordered list with three hobbies.
✅ Another heading saying "How I Prepare for School"
✅ An ordered list with four steps.
Try it yourself before looking at the answer!



⏭️ Next Lesson

🚀 HTML Description Lists (<dl>, <dt>, and <dd>) and Nested Lists.

Have a wonderful day! 😍❤️



@AbWebDeveloper

💻 Day 9: HTML Basics 🚀🔥
👋 Hello everyone! Welcome back to Day 9 of our HTML journey. 🙌
In the previous lesson, we learned about:
✅ Unordered Lists (<ul>)
✅ Ordered Lists (<ol>)

Today, we'll learn two more important list concepts:

📚 HTML Description Lists (<dl>, <dt>, and <dd>)

🌳 Nested Lists

These are commonly used on dictionaries, FAQs, glossaries, menus, and documentation websites.

📚 HTML Description Lists

🤔 What is a Description List?

A Description List is used to display a term (name) and its description (meaning).
Unlike ordered and unordered lists, a description list doesn't use numbers or bullet points.


📝 Syntax

<dl>
    <dt>Term</dt>
    <dd>Description</dd>
</dl>

🧐 Understanding Each Tag

① <dl>

<dl> stands for Description List.
It contains the entire list.

② <dt>

<dt> stands for Description Term.
It represents the name or title.
Example:

<dt>HTML</dt>

③ <dd>

<dd> stands for Description Details.
It explains the term.
Example:

<dd>HTML is used to create webpages.</dd>

✅ Complete Example

<dl>
    <dt>HTML</dt>
    <dd>Used to create webpages.</dd>

    <dt>CSS</dt>
    <dd>Used to style webpages.</dd>

    <dt>JavaScript</dt>
    <dd>Used to make webpages interactive.</dd>
</dl>

👀 Output
HTML
→ Used to create webpages.
CSS
→ Used to style webpages.
JavaScript
→ Used to make webpages interactive.

🌍 Real Website Example

<h1>Programming Languages</h1>

<dl>
    <dt>HTML</dt>
    <dd>Creates webpage structure.</dd>

    <dt>CSS</dt>
    <dd>Designs the webpage.</dd>

    <dt>JavaScript</dt>
    <dd>Adds interaction.</dd>
</dl>

🌳 Nested Lists

🤔 What is a Nested List?
A Nested List is a list inside another list.

🌍 Best Analogy 😍👇👇
Imagine a school bag. 🎒
Inside the bag you have:
📚 Books
✏️ Stationery
Pencil
Pen
Eraser
💧 Water Bottle
The stationery items are a list inside another list.
That's a nested list.

📝 Syntax

<ul>
    <li>Main Item
        <ul>
            <li>Sub Item</li>
        </ul>
    </li>
</ul>

✅ Example

<ul>
    <li>Fruits
        <ul>
            <li>Apple</li>
            <li>Banana</li>
            <li>Orange</li>
        </ul>
    </li>

    <li>Vegetables
        <ul>
            <li>Carrot</li>
            <li>Potato</li>
        </ul>
    </li>
</ul>

👀 Output
• Fruits
  • Apple
  • Banana
  • Orange
• Vegetables
  • Carrot
  • Potato

🌍 Another Example

<ol>
    <li>Frontend
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>

    <li>Backend
        <ul>
            <li>Node.js</li>
            <li>PHP</li>
        </ul>
    </li>
</ol>

⚠️ Important Notes
✅ <dl> creates a description list.
✅ <dt> represents the term.
✅ <dd> represents the description.
✅ A nested list must be placed inside an <li> element.


💻 Mini Coding Exercise

Create a webpage that contains:
✅ A heading saying "Web Technologies"
✅ A description list explaining HTML, CSS, and JavaScript
✅ Another heading saying "My Study Plan"
✅ A nested list with:
Frontend
HTML
CSS
JavaScript

Try building it yourself before checking your answer and share it on comment



⏭️ Next Lesson

🚀 HTML Tables

Have a wonderful day! 😍❤️

@AbWebDeveloper

💻 Day 10: HTML Basics 🚀🔥
👋 Hello everyone! Welcome back to Day 10 of our HTML journey. 🙌
In the previous lesson, we learned about:
✅ Description Lists (<dl>, <dt>, and <dd>)
✅ Nested Lists
Today, we're going to learn one of the most important HTML elements used in real websites:

📊 HTML Tables (<table>)

Have you ever seen:
📋 A student grade sheet?
📅 A class timetable?
📊 A product price list?
🏆 A football league table?
All of these are examples of tables.
Today, you'll learn how to create them using HTML.

🤔 What is an HTML Table?

An HTML Table is used to organize data into rows and columns.
Tables make information easy to read and compare.

🌍 Best Analogy 😍👇👇
Imagine your teacher gives you an exam result sheet.

Instead of writing all the information in one sentence, the table organizes everything neatly.
That's exactly what an HTML Table does.

📝 Basic Syntax

<table>

</table>

The <table> tag creates a table.
But a table is empty until we add rows and columns.

🧩 The Four Main Table Tags

① <table>

The <table> tag creates the entire table.
Think of it as the container that holds everything.
Example:

<table>

</table>

② <tr>

<tr> stands for Table Row.
It creates a new row.
Example:

<tr>

</tr>

Every new row needs another <tr>.

③ <th>

<th> stands for Table Header.
It creates the heading of each column.
Example:

<th>Name</th>

<th>Age</th>

By default, browsers display <th> text in bold and centered.

④ <td>

<td> stands for Table Data.
It contains the actual data inside the table.
Example:

<td>Amare</td>

<td>20</td>

✅ Complete Example

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>

    <tr>
        <td>Amare</td>
        <td>20</td>
    </tr>

    <tr>
        <td>Abel</td>
        <td>22</td>
    </tr>
</table>

👀 Output
Name Age
Amare 20
Abel 22


🧐 Understanding the Code

<table>

Creates the table.
↓

<tr>

Creates the first row.
↓

<th>Name</th>
<th>Age</th>

Creates the column headings.
↓

<tr>

Creates another row.
↓

<td>Amare</td>
<td>20</td>

Adds the data.

🌍 Real Website Example
Student Results

<table>
    <tr>
        <th>Name</th>
        <th>Maths</th>
        <th>English</th>
    </tr>

    <tr>
        <td>Abel</td>
        <td>90</td>
        <td>85</td>
    </tr>

    <tr>
        <td>Hana</td>
        <td>95</td>
        <td>91</td>
    </tr>
</table>

⚠️ Important Notes
✅ <table> creates the table.
✅ <tr> creates rows.
✅ <th> creates table headings.
✅ <td> contains the table data.
✅ Every <td> must be inside a <tr>.

❌ Common Mistakes
Wrong ❌

<table>
<td>Amare</td>
</table>

<td> cannot be used without a <tr>.

Correct ✅

<table>
<tr>
<td>Amare</td>
</tr>
</table>

Wrong ❌

<table>
<tr>
<th>Name</th>
</tr>

<td>Amare</td>
</table>

The <td> is outside the table row.

Correct ✅

<table>
<tr>
<th>Name</th>
</tr>

<tr>
<td>Amare</td>
</tr>
</table>

💻 Mini Coding Exercise
Create a table with:
✅ A heading: Student Information
Columns:
Name
Age
Department
Rows:
Sara | 20 | Engineering
Abel | 21 | Computer Science
Hana | 19 | Medicine
Try building it yourself before looking at the answer and share it on comment!!


⏭️ Next Lesson
🚀 Advanced HTML Tables
You'll learn:
✅ border
✅ colspan
✅ rowspan
✅ caption
✅ thead
✅ tbody
✅ tfoot
These features help you build professional tables used in real-world websites.


Have a wonderful day! 😍❤️

@AbWebDeveloper

💻 Day 11: HTML Basics 🚀🔥
👋 Hello everyone! Welcome back to Day 11 of our HTML journey. 🙌
In the previous lesson, we learned the basics of:
✅ HTML Tables (<table>)

✅ Table Rows (<tr>)

✅ Table Headers (<th>)

✅ Table Data (<td>)
Today, we will make our tables more professional by learning:

📊 Advanced HTML Tables

We will learn:
1️⃣ Table Borders (border)

2️⃣ Table Caption (<caption>)

3️⃣ Column Spanning (colspan)

4️⃣ Row Spanning (rowspan)

5️⃣ Table Sections (<thead>, <tbody>, <tfoot>)

1️⃣ Table Border (border)

🤔 What is a Border?
A border creates visible lines around the table and its cells.
Without a border, a table may look like normal text.

🌍 Best Analogy 😍👇👇
Imagine a classroom seating arrangement.
Without lines:
Student A Student B Student C
It is difficult to understand.
With lines:
| Student A | Student B | Student C |
Everything becomes clear.
A table border works the same way.

📝 Example

<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>

    <tr>
        <td>Amare</td>
        <td>20</td>
    </tr>
</table>

⚠️ Note:
The border attribute works, but professional developers usually use CSS to style tables.
We will learn the professional way in CSS.

2️⃣ Table Caption (<caption>)

🤔 What is Caption?
A caption gives a title or name to your table.
It explains what the table is about.

📝 Syntax

<table>

<caption>Student Information</caption>

</table>

✅ Example

<table border="1">

<caption>Student Results</caption>

<tr>
    <th>Name</th>
    <th>Score</th>
</tr>

<tr>
    <td>Abel</td>
    <td>90</td>
</tr>

</table>

3️⃣ Column Spanning (colspan)

🤔 What is Colspan?
colspan allows one cell to cover multiple columns.

🌍 Best Analogy 😍👇👇
Imagine a school timetable.
Sometimes one subject title covers several days.
Example:

The word "Mathematics" covers three columns.
That is colspan.

📝 Syntax

<td colspan="number">

Example:

<table border="1">

<tr>
    <th colspan="3">
        Student Information
    </th>
</tr>

<tr>
    <td>Name</td>
    <td>Age</td>
    <td>Grade</td>
</tr>

</table>

The first cell covers three columns.

4️⃣ Row Spanning (rowspan)

🤔 What is Rowspan?
rowspan allows one cell to cover multiple rows.

🌍 Best Analogy 😍👇👇
Imagine a teacher's name written beside several classes.
The teacher's name covers multiple rows.
That is rowspan.

📝 Syntax

<td rowspan="number">

Example

<table border="1">

<tr>
    <th>Name</th>
    <th>Subject</th>
</tr>

<tr>
    <td rowspan="2">
        Amare
    </td>
    <td>HTML</td>
</tr>

<tr>
    <td>CSS</td>
</tr>

</table>

The name "Amare" covers two rows.

5️⃣ Table Sections

Professional tables are divided into three parts:

① <thead>

Table Header section.
Contains headings.
Example:

<thead>

<tr>
<th>Name</th>
<th>Age</th>
</tr>

</thead>

② <tbody>

Table Body section.
Contains the main data.
Example:

<tbody>

<tr>
<td>Amare</td>
<td>20</td>
</tr>

</tbody>

③ <tfoot>

Table Footer section.
Contains summary information.
Example:

<tfoot>

<tr>
<td>Total</td>
<td>50</td>
</tr>

</tfoot>

🌍 Complete Professional Example

<table border="1">

<caption>Student Scores</caption>

<thead>

<tr>
<th>Name</th>
<th>Score</th>
</tr>

</thead>


<tbody>

<tr>
<td>Abel</td>
<td>90</td>
</tr>

<tr>
<td>Hana</td>
<td>95</td>
</tr>

</tbody>


<tfoot>

<tr>
<td>Total Students</td>
<td>2</td>
</tr>

</tfoot>

</table>

⚠️ Important Notes
✅ Use <caption> to describe your table.
✅ Use colspan for multiple columns.
✅ Use rowspan for multiple rows.
✅ Use <thead>, <tbody>, and <tfoot> to organize large tables.
✅ CSS is the professional way to style tables.

💻 Mini Coding Exercise
Create a professional student table with:
✅ A caption: "University Students"
✅ Header section
Name
Department
Year
✅ Body section with 3 students
✅ Footer showing total students
Try it yourself! 🚀


⏭️ Next Lesson

🚀 HTML Forms

You'll learn how websites collect information from users❤❤

Have a wonderful day! 😍❤️

@AbWebDeveloper 🙌🙌 @AbWebDeveloper

Please ግር ያላችሁ ነገር ካለ comment ላይ መጠየቅ ትችላላችሁ ደግሞ እንደዚ አይነት skill ለመጀመሪያ ጊዜ ሲሆን ግር ይላል ግን ጊዜ እና ቦታ ሰጥታችሁት ከተከታተላችሁ በጣም ቀላል ነው። አንድ ምነግራችሁ ነገር ቢኖር practice,practice and practice the code 🤝🤝 መደጋገም ግድ ነው so,you have to be strong 💪💪💪 okay



If you have any questions or are confused about anything, please feel free to ask in the comments. This is your first time using this skill, so it might seem a bit overwhelming, but with time and practice, it will become much easier. One thing I can tell you is that practice, practice, and practice the code are must. Repetition is essential, so you need to be persistent and strong.✌️✌️✌️✌️


Let's go ❤❤ this reaction

Please share this channel 🙏🙏@AbWebDeveloper

💻 Day 12: HTML Basics 🚀🔥

👋 Hello everyone! Welcome back to Day 12 of our HTML journey. 🙌
In the previous lesson, we learned about Advanced HTML Tables.
Today, we're starting one of the most important topics in HTML.

📝 HTML Forms – Part 1

Have you ever:
✅ Created a Facebook account?
✅ Logged into Gmail?
✅ Searched something on Google?
✅ Filled out a school registration form?
All of these use HTML Forms.
Today, we'll learn the basics of HTML Forms.

🤔 What is an HTML Form?
An HTML Form is used to collect information (data) from users.
The data can then be sent to a server for processing.
Examples of forms:
👤 Login Form
📝 Registration Form
📩 Contact Form
🔍 Search Form
💳 Payment Form

🌍 Best Analogy 😍👇👇
Imagine you are applying to a university.
The university gives you a registration form.
You fill in:
👤 Name
🎂 Age
📧 Email
📞 Phone Number
After filling it out, you submit it.
An HTML Form works exactly the same way.
It collects information from users.

📝 HTML Form Syntax

<form>

</form>

The <form> tag is the container for all form elements.
Everything inside the form belongs to that form.

🧐 Understanding the <form> Tag
Example:

<form>

<input type="text">

</form>

The input field belongs to the form because it is inside the <form> tag.

🏷️ HTML Label (<label>)

🤔 What is a Label?
A label tells users what information they should enter into an input field.

🌍 Best Analogy 😍👇👇
Imagine a classroom.
Every student has a name tag.
Without name tags, it would be difficult to know who is who.
Similarly, a label tells users what each input field is for.

📝 Syntax

<label>Name</label>

✅ Example

<label>Full Name</label>

<input type="text">

Output:
Full Name
[__]

⌨️ HTML Input (<input>)

🤔 What is an Input?
The <input> tag allows users to enter information.
It is one of the most commonly used HTML elements.

🌍 Best Analogy 😍👇👇
Think of a paper form.
Each empty box is a place where you write your information.
The HTML <input> tag is that empty box.

📝 Syntax

<input>

However, an input usually needs a type.

🎯 The type Attribute

The type attribute tells the browser what kind of input the user should enter.

📝 Example

<input type="text">

Here,
type="text"
means:
➡️ The user can type normal text.

🌟 Complete Example

<form>

<label>Full Name</label>

<input type="text">

</form>

📝 Placeholder Attribute

🤔 What is a Placeholder?
A placeholder is a short hint displayed inside an input field.
It tells users what they should type.

🌍 Example

<input
type="text"
placeholder="Enter your full name">

Before typing, the user sees:
Enter your full name
As soon as they start typing, the placeholder disappears.

🌍 Real Website Example

<form>

<label>Full Name</label>

<input
type="text"
placeholder="Enter your full name">

<br><br>

<label>Email</label>

<input
type="text"
placeholder="Enter your email">

</form>

⚠️ Important Notes
✅ <form> is the container.
✅ <label> describes an input field.
✅ <input> collects user information.
✅ type tells the browser what kind of data to accept.
✅ placeholder provides a hint inside the input field.

❌ Common Mistakes
Wrong ❌

<input>

Although it works, it's better to specify the input type.

Correct ✅

<input type="text">

Wrong ❌

<input type="text">

<label>Name</label>

The label should come before the input.

Better ✅

<label>Name</label>

<input type="text">

💻 Mini Coding Exercise
Create a simple registration form that contains:
✅ Full Name
✅ Email
✅ Each field should have a label.
✅ Each input should have a placeholder.
Try building it yourself before checking the answer and share it on comment👍👍


⏭️ Next Lesson
🚀 HTML Input Types – Part 2
We'll learn different input types, including:
✅ text

✅ password

✅ Email

✅ number

✅ date

✅ radio

✅ checkbox

✅ file

✅ submit

These are the input types used in real login pages, registration forms, and contact forms.


Have a wonderful day! 😍❤️

@AbWebDeveloper 🙌🙌 @AbWebDeveloper

"Never let failure stop you. Every failure is another chance to improve and become awesome." 🚀💻

Please Share this channel 🙏🙏👇👇


@AbWebDeveloper 🙌🙌 @AbWebDeveloper