Good Morning Guys 🌞🌞

Here's an exercise for you

🎉 300 Subscribers! 🎉
Thank you so much for your amazing support! We've reached 300 subscribers together. ❤️
This is just the beginning! More exciting web development lessons, coding challenges, and projects are coming soon.

በጣም እናመሰግናለን🙏🙏 ብቻ እናንተ ይሄንን 👇👇channel share አድርጉት

@AbWebDeveloper 💚💛❤️ @AbWebDeveloper

In this session, I break down a practical HTML layout that incorporates several essential semantic and structural elements:

• <strike> – for indicating outdated or removed content
• <q> and <blockquote> – for inline and block-level quotations
• <select> with <option> – for building dropdown menus
• <legend> – used within field sets for grouping form controls
• <br> and <hr> – for line breaks and horizontal rule separators

A full video walkthrough is available, showing the entire creation process from start to finish — including the visual output you see here.

Ideal for beginners and intermediate developers looking to strengthen their foundational HTML skills.

📺 Watch, practice, and refine your markup.


@AbWebDeveloper

🚀 HTML lesson 🔥 | Images & Links 🌐
👋 Welcome back  💻✨
Ever wondered how websites show pictures and connect to other pages? 🤔

Today, we’ll learn In this video 📽️ how to:
🖼️ Add images to your webpage

🔗 Create clickable links and

⚙️ Understand src,href, and alt attributes

🎯 Mini Challenge:

Create your own webpage with:
✅ Your profile image

✅ A link to your favorite website
Try it yourself and share your work in the comment!!👍

💡 Learn → Practice → Build → Become a Developer 🚀

@AbWebDeveloper

🔥 HTML Lesson is Here! 💻🚀
In this video, you'll learn:

✅ Unordered Lists (<ul>)
✅ Ordered Lists (<ol>)
✅ Description Lists (<dl>
✅ Lists with Clickable Links 🔗
🎯 Easy to understand, beginner-friendly, and packed with practical examples.
💬 After watching, comment "Done" and tell us which list type you liked the most!

📚 Follow @AbWebDeveloper
for daily web development lessons, coding challenges, and tips. Invite your friends and let's grow together! 🚀🔥

💡 HTML Lists Tip & Trick of the Day
🚀 Use the right list for the right purpose!
Many beginners use the same type of list everywhere, but professional developers choose the correct list based on the content.
✅ <ul> (Unordered List) – Use when the order doesn't matter.
Navigation menus
Features
Shopping lists
✅ <ol> (Ordered List) – Use when the order is important.
Step-by-step tutorials
Recipes
Instructions
Rankings
✅ <dl> (Description List) – Use when explaining terms.
Glossaries
FAQs
Definitions
Technical documentation
🎯 Pro Tip: A well-structured webpage is easier to read, maintain, and helps browsers and assistive technologies understand your content better.
💬 Remember: Don't choose a list because of how it looks—choose it because of what it means. You can always change the appearance later with CSS. 💙

📚 HTML Tables Explained! 💻
In this lesson, you'll learn how to create and organize tables in HTML from scratch.
✅ <table> ✅ <tr> ✅ <th> ✅ <td> ✅ <caption> ✅ colspan ✅ rowspan ✅ <thead>, <tbody>, <tfoot>
🎯 By the end of this lesson, you'll be able to build professional HTML tables with confidence.
💻 Practice the code, build your own table, and share your result in the comments!

🚀 Follow @AbWebDeveloper for more beginner-friendly web development lessons.
#WebDevelopment
#Coding
#LearnHTML

🔥 This HTML Forms Lesson Could Change Your Coding Journey! 🚀💻
Have you ever wondered how Login Pages, Sign-Up Forms, Contact Forms, and Registration Forms are created? 🤔
🎉 In this lesson, you'll learn everything you need to build HTML Forms from scratch: ✅ <form> ✅ <label> ✅ <input> ✅ Text, Email & Password Fields ✅ Radio Buttons & Checkboxes ✅ Dropdown Lists ✅ Textarea ✅ File Upload ✅ Submit & Reset Buttons

🎯 Today's Challenge: Build your own Student Registration Form after watching the video and share a screenshot in the comments.
❤️ If this lesson helped you, react, share it with your friends, and invite them to join 👇👇

@AbWebDeveloper 💚💛❤️ @AbWebDeveloper

Let's grow together and become professional web developers—one lesson at a time! 🚀🔥

#HTMLForms
#WebDevelopment
#Programming

ለዛሬ lesson አይኖረንም sorry የሆነ ችግር ስለገጠመን ነው  ግን ነጌ እንቀጥላለን እስከዛ comment ላይ አስተያየት ጻፉልን ምን ምን ማስተካከል እንዳለብን🙏🙏


We won't have a lesson today, I'm sorry. We encountered a problem, but we'll continue tomorrow. In the meantime, please leave comments on what needs to be improved.🙏🙏

💻 Day 14: HTML Basics 🚀🔥
👋 Hello everyone! Welcome back to Day 14 of our HTML journey! 🙌
In the previous lessons, we learned about:
📝 HTML Forms
🔐 Form Validation
📌 Form Attributes
Today, we're going to learn something very important for building professional websites:

🏗️ HTML Semantic Elements

We'll learn:
🧭 <header>,🧭 <nav>,📄 <main>,📑 <section>,📰 <article>,📌 <aside>,🦶 <footer>

🤔 What is Semantic HTML?
Semantic HTML means using HTML elements that clearly describe the meaning and purpose of the content.

① 🏠 <header>
The <header> element represents introductory content for a page or section.
It commonly contains:
🏷️ Logo
📌 Website title
🧭 Navigation

📝 Introductory content
Example:

<header>
    <h1>My Website</h1>
    <p>Welcome to my website!</p>
</header>

② 🧭 <nav>
<nav> represents a section containing navigation links.
Example:

<nav>
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
</nav>

③ 📄 <main>
The <main> element contains the main content of the webpage.
Example:

<main>

    <h1>Welcome</h1>

    <p>This is the main content of my website.</p>

</main>

⚠️ Important
A page should normally have one main <main> element.

④ 📑 <section>
A <section> represents a thematic section of content.
Example:

<section>

    <h2>About Me</h2>

    <p>I am learning web development.</p>

</section>

You can use sections for:
👤 About
💼 Services
📚 Course
📞 Contact

⑤ 📰 <article>
An <article> represents self-contained content that could potentially stand on its own.
Examples:
📰 News article
📝 Blog post
📢 Announcement
Example:

<article>

    <h2>HTML Basics</h2>

    <p>
        HTML is used to structure webpages.
    </p>

</article>

⑥ 📌 <aside>
<aside> contains content that is related to the main content but not part of its primary flow.
Examples:
📢 Advertisements
👤 Author information
💡 Tips
Example:

<aside>

    <h3>Related Topics</h3>

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

</aside>

⑦ 🦶 <footer>
The <footer> represents the footer of a page or section.
It commonly contains:
© Copyright information
📧 Contact information
📱 Social media links
Example:

<footer>

    <p>© 2026 My Website</p>

</footer>

🧩 How They Work Together
A typical webpage can look like this:

┌─────────────────────────────┐
│          HEADER             │
│       Logo + Title          │
├─────────────────────────────┤
│            NAV              │
│ Home | About | Contact      │
├─────────────────────────────┤
│                             │
│           MAIN              │
│                             │
│   ┌─────────────────────┐   │
│   │      SECTION        │   │
│   │                     │   │
│   │      ARTICLE        │   │
│   │                     │   │
│   └─────────────────────┘   │
│                             │
│         ASIDE               │
│     Related Content         │
│                             │
├─────────────────────────────┤
│          FOOTER             │
│       © 2026 Website        │
└─────────────────────────────┘

⚠️ However, don't put semantic elements inside one another randomly. Each element should be used according to its purpose.


💻 Mini Coding Challenge 🚀
Create your own Personal Portfolio Structure using:
✅ <header>
✅ <nav>
✅ <main>
✅ <section>
✅ <article>
✅ <aside>
✅ <footer>
Your webpage should contain:
👤 Your name
🏠 Home
🙋 About Me
💻 Your projects
📚 Your skills
📞 Contact information
🔥 Try it by yourself and share on comment.👇👇

⏭️ Next Lesson
🚀 HTML <div> and <span>
We'll learn:
📦 What <div> is
✏️ What <span> is
🔄 The difference between <div> and <span>
🎯 Block-level vs inline elements




Have a wonderful day! 😍❤️

@AbWebDeveloper

💻 Day 15: HTML Basics 🚀🔥
👋 Hello everyone! Welcome back to Day 15 of our HTML journey! 🙌
Today, we're going to learn two very important HTML elements:
📦 <div> and <span>
① 📦 What is <div>?
<div> stands for division.
It is a general-purpose container used to group HTML elements together.


📝 Basic Syntax

<div>
    <h1>My Website</h1>
    <p>Welcome to my website!</p>
</div>

The <div> groups the heading and paragraph together.

🌍 Real Website Example
Imagine a website has a student card:

<div>
    <h2>Amare</h2>
    <p>Web Developer</p>
    <p>Learning HTML and CSS</p>
</div>

The <div> groups all the information belonging to the card.
Later, CSS can be used to make this group look like a beautiful card. 🎨

② ✏️ What is <span>?
<span> is also a general-purpose container, but it is normally used to group or style a small piece of text or other inline content.
🌍 Best Analogy 😍👇👇
Imagine you're reading a sentence:

I love web development. ❤️

You don't want to put the entire sentence in a separate box.
You only want to highlight "web development".
That's where <span> is useful.

📝 Example

<p>
    I love <span>web development</span>.
</p>

The <span> surrounds only the words:
web development

🎨 Using <span> with CSS
Later, CSS can be used to style the text.

<p>
    I love
    <span style="color: blue;">
        web development
    </span>.
</p>

The words web development will appear blue.
⚠️ We're only using inline CSS here as a simple demonstration. You'll learn proper CSS styling later.

🧱 What is a Block-Level Element?
A block-level element normally starts on a new line and takes up the available width.
Example:

<div>First Box</div>
<div>Second Box</div>

The browser displays them approximately like:

First Box
Second Box

Each <div> starts on a new line.

➡️ What is an Inline Element?
An inline element normally stays within the same line as surrounding content.
Example:

<p>
    Hello <span>Amare</span>!
</p>

It appears approximately as:

Hello Amare!

The <span> doesn't automatically create a new line.



🌍 Real Website Example
Imagine a simple profile card:

<div>

    <h2>Amare</h2>

    <p>
        I am learning
        <span>Web Development</span>.
    </p>

    <p>
        My goal is to become a
        <span>Full Stack Developer</span>.
    </p>

</div>

Here:
📦 <div> → Groups the whole profile information.
✏️ <span> → Targets specific words inside the paragraphs.


Each <div> groups a different part of the webpage.



💻 Mini Coding Challenge 🚀
Create a simple Profile Card using HTML.
Your code should contain:
✅ One <div> for the whole profile
✅ Your name inside <h2>
✅ A paragraph about yourself
✅ A <span> around your favorite skill
✅ Another <span> around your career goal
🔥 Try to build it yourself and share on comment!!

⏭️ Next Lesson
🚀 HTML Multimedia
We'll learn how to add:
🎵 Audio
🎬 Video
▶️ Controls
📂 Multiple media sources
And we'll build a webpage containing audio and video players! 🎧🎬🔥

Have a wonderful day! 😍❤️



share this channel to everyone👉👉@AbWebDeveloper

💻 Day 16: HTML Multimedia 🎵🎥
👋 Hello everyone! Welcome back to Day 16 of our HTML journey. 🙌
Today we're going to make our webpages more powerful by adding:
🎵 HTML Audio & 🎥 HTML Video
Have you ever watched a video or listened to music directly on a webpage?
You can do that with HTML! 🚀

🎵 Part 1: HTML Audio
🤔 What is HTML Audio?
The <audio> element is used to add sound or music to a webpage.
🌍 Best Analogy 😍👇👇
Think of a music player 🎧.
You choose a song and press:
▶️ Play
⏸️ Pause
🔊 Volume
HTML can create a similar audio player on your webpage.

📝 Basic Syntax

<audio controls>
    <source src="song.mp3" type="audio/mpeg">
</audio>

🧐 Understanding the Code
① <audio>
Creates an audio player.

<audio>
</audio>

② controls
This attribute displays controls such as:
▶️ Play
⏸️ Pause
🔊 Volume

<audio controls>

③ <source>
Specifies the audio file.

<source src="song.mp3" type="audio/mpeg">

Here:
src → location of the audio file
type → tells the browser the file type

🎵 Complete Example

<h2>My Favorite Song</h2>

<audio controls>
    <source src="song.mp3" type="audio/mpeg">
</audio>

🎥 Part 2: HTML Video
🤔 What is HTML Video?
The <video> element is used to display video content directly on a webpage.

🌍 Best Analogy 😍👇👇
Think about YouTube. ▶️
You click a video and see controls for:
▶️ Play
⏸️ Pause
🔊 Volume
⛶ Full screen
HTML's <video> element can provide similar basic video controls.

📝 Basic Syntax

<video controls>
    <source src="video.mp4" type="video/mp4">
</video>

🧐 Understanding the Code
① <video>
Creates a video player.

<video>
</video>

② controls
Displays the video controls.

<video controls>

③ <source>
Specifies the video file.

<source src="video.mp4" type="video/mp4">

📏 Setting Video Size
You can set the width of the video:

<video controls width="500">
    <source src="video.mp4" type="video/mp4">
</video>

🎥 Complete Example

<h2>My Introduction Video</h2>

<video controls width="500">
    <source src="intro.mp4" type="video/mp4">
</video>

💻 Mini Coding Challenge 🚀
Create a webpage containing:
🎵 A heading: "My Favorite Audio"
🎵 An audio player with controls
🎥 A heading: "My Favorite Video"
🎥 A video player with controls and a width of 500px
Try writing the code yourself and share on comment!! 💪🔥



Have a wonderful day! 😍❤️


@AbWebDeveloper

🎉 HTML BASIC COMPLETED! ✅
We’ve successfully finished the HTML Basics! 🥳💻
Now it’s time for the next step… 🚀
🎨 NEXT: CSS
Learn how to make your websites beautiful, colorful, responsive, and professional! ✨
🔥 Are you ready to start our CSS journey?
👉 Let’s go this reaction ❤❤

🌐 What is CSS? 🎨

CSS stands for Cascading Style Sheets. While HTML is used to define the structure and content of a webpage (like headings, paragraphs, and images), CSS is used to style and lay out that content.

Think of it like building a house: 🏗️

· HTML is the skeleton, the walls, and the roof. 🦴
· CSS is the paint, the wallpaper, the furniture, and the overall interior design. 🖌️🛋️

---

🌊 Why is it called ‘Cascading’?

The word ‘Cascading’ means that styles can fall from one style sheet to another. If different rules apply to the same element, CSS has a system to decide which one ‘wins’. This hierarchy is fundamental to how CSS works. ⚖️

---

❓ Why do we need CSS?

1. Separation of Concerns 🧩: Keep your content (HTML) separate from your design (CSS). This makes your code much easier to manage and update.
2. Consistency 🔄: You can style all the headings on a 100-page website by changing just one line of code in a single CSS file.
3. Device Compatibility 📱💻🖥️: CSS allows you to make your website look great on phones, tablets, and desktops by using responsive design techniques.
4. Faster Loading 🚀: Since one CSS file can style many pages, the browser only needs to download the design once.

🌐 CSS ምንድነው? 🎨
CSS ማለት ሲተነተን Cascading Style Sheets ማለት ነው።
HTML የድረ-ገጽን መዋቅርና ይዘት ለመገንባት ይጠቅማል። ለምሳሌ፦ ርዕሶች፣ አንቀጾች፣ ምስሎች እና ሌሎች።
CSS ደግሞ የድረ-ገጹን ገጽታ (style) እና አቀማመጥ (layout) ለማስዋብ ይጠቅማል። 🎨
🏠 ለምሳሌ አንድ ቤትን እንውሰድ፦
· 🦴 HTML = የቤቱ ቋሚ ፣ግድግዳ እና ጣሪያ  assume አድርጉት

· 🖌️ CSS = ቀለም፣ የግድግዳ ማስዋቢያ፣ የቤት ዕቃዎች እና አጠቃላይ የውስጥ ዲዛይን  ይወክላል🛋️

🌊 ለምን “Cascading” ተባለ?
Cascading ማለት በቀላሉ “በተከታታይ መውረድ/መተላለፍ” ማለት ነው።
በCSS ውስጥ ለአንድ element የተለያዩ የstyle ህጎች (rules) ሊኖሩ ይችላሉ። እነዚህ ህጎች ሲጋጩ CSS የትኛው ህግ ቅድሚያ እንደሚያገኝ የሚወስን ስርዓት አለው። ⚖️
ይህም CSS Cascade በሚለው የCSS አሰራር ውስጥ መሠረታዊ ነገር ነው።

❓ CSS ለምን እንፈልጋለን?
1. 🧩  ይዘትንና ዲዛይንን መለየት
የድረ-ገጹን ይዘት HTML ውስጥ፣ ዲዛይኑን ደግሞ CSS ውስጥ በመለየት ኮዳችንን ለማስተዳደርና ለማዘመን ቀላል እናደርገዋለን።
2. 🔄 ተመሳሳይ ዲዛይን
100 ገጽ ያለው ድረ-ገጽ ቢኖራችሁ፣ ሁሉንም headings በአንድ ዓይነት style ለማስዋብ በአንድ CSS file ውስጥ ያለውን ኮድ ብቻ መቀየር ትችላላችሁ ።
3. 📱💻🖥️  ለተለያዩ device የተመቻቸ ያደርጋል
CSS በመጠቀም ድረ-ገጽን በስልክ 📱፣ ታብሌት 💻 እና ኮምፒውተር 🖥️ ላይ በጥሩ ሁኔታ እንዲታይ ማድረግ ትችላላችሁ ።

እናም አንድ CSS file ብዙ የድረ-ገጽ ገጾችን ማስዋብ ስለሚችል፣ ብራውዘሩ የዲዛይን ፋይሉን አንድ ጊዜ አውርዶ ለብዙ ገጾች መጠቀም ይችላል።
🎯 በአጭሩ፦
HTML 🏗️ = መዋቅር

CSS 🎨 = ውበትና ዲዛይን

👉 HTML ድረ-ገጹን ይገነባል፤ CSS ደግሞ ያስውበዋል! 🚀

Have a nice day ❤❤

@AbWebDeveloper💚💛❤️@AbWebDeveloper