ይሄ ከላይ ያለው የ 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