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