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

Please Share this channel 🙏🙏👇👇


@AbWebDeveloper 🙌🙌 @AbWebDeveloper

💻 Day 13: HTML Basics 🚀🔥

👋 Hello everyone! Welcome back to Day 13 of our HTML journey. 🙌
In the previous lesson, we learned about:
✅ <form>, <label>,<input> type,placeholder

Today, we'll continue learning about one of the most important parts of HTML Forms.

⌨️ HTML Input Types – Part 2

Have you ever noticed that some input boxes are different?
🔒 Password fields hide your password.
📧 Email fields expect an email address.
📅 Birthday fields show a calendar.
📁 Some websites let you upload files.
All of these are possible because of different Input Types.
Today, we'll learn the most commonly used input types.

🤔 What is an Input Type?
The type attribute tells the browser what kind of information the user should enter.
Changing the type changes how the input field behaves.

🌍 Best Analogy 😍👇👇
Imagine you're filling out a job application form.
Different boxes ask for different information:
👤 Name
📧 Email
🔒 Password
🎂 Date of Birth
📞 Phone Number
Each box is designed for a specific purpose.
The HTML type attribute works exactly the same way.

① ✍️ type="text"

🤔 What is it?
Used to enter normal text.
Example:

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

✅ Used for:
Full Name
Username
City
School Name

② 🔒 type="password"

🤔 What is it?
Used to enter passwords.
The browser hides the characters for security.
Example:

<input type="password" placeholder="Enter your password">

👀 Output:
Instead of showing:
mypassword123
It shows:
••••••••••

③ 📧 type="email"

🤔 What is it?
Used to enter an email address.
Example:

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

④ 🔢 type="number"

🤔 What is it?
Used to enter numbers only.
Example:

<input type="number" placeholder="Enter your age">

⑤ 📅 type="date"

🤔 What is it?
Allows users to select a date.
Example:

<input type="date">

On most browsers, a calendar appears automatically.
Perfect for:
🎂 Birthday
📅 Appointment Date etc...

⑥ 🔘 type="radio"

🤔 What is it?
Allows users to choose only one option from a group.
Example:

<input type="radio" name="gender"> Male

<input type="radio" name="gender"> Female

The name attribute groups the radio buttons together.

🌍 Best Analogy 😍👇👇
Imagine a multiple-choice exam.
Only one answer can be correct.
That's how radio buttons work.

⑦ ☑️ type="checkbox"

🤔 What is it?
Allows users to select multiple options.
Example:

<input type="checkbox"> HTML

<input type="checkbox"> CSS

<input type="checkbox"> JavaScript

Unlike radio buttons, users can select more than one option.

⑧ 📁 type="file"

🤔 What is it?
Allows users to upload files.
Example:

<input type="file">

Used for uploading:
📷 Photos📄 Documents🎵 Audio🎥 Videos

⑨ 📤 type="submit"

🤔 What is it?
Creates a button that submits the form.
Example:

<input type="submit" value="Register">

🌍 Complete Example

<form>

<label>Full Name</label><br>
<input type="text" placeholder="Enter your full name"><br><br>

<label>Password</label><br>
<input type="password" placeholder="Enter your password"><br><br>

<label>Email</label><br>
<input type="email" placeholder="Enter your email"><br><br>

<label>Age</label><br>
<input type="number" placeholder="Enter your age"><br><br>

<label>Date of Birth</label><br>
<input type="date"><br><br>

<label>Gender</label><br>
<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female<br><br>

<label>Skills</label><br>
<input type="checkbox"> HTML
<input type="checkbox"> CSS
<input type="checkbox"> JavaScript<br><br>

<label>Upload Your CV</label><br>
<input type="file"><br><br>

<input type="submit" value="Register">

</form>

💻 Mini Coding Exercise

Create a Student Registration Form that contains:
✅ Full Name
✅ Password
✅ Email
✅ Age
✅ Date of Birth
✅ Gender (Radio Buttons)
✅ Skills (Checkboxes)
✅ Upload Profile Picture (File Input)
✅ Register Button (Submit)
Try building it yourself before checking the answer, and don't forget to share your work in the comments! 👍👍

Have a wonderful day! 😍❤️


@AbWebDeveloper 🙌🙌 @AbWebDeveloper

💻 ከነገ ጀምሮ ከላይ ያጋራኋቸውን Coding Challenges አንድ በአንድ በጋራ እንሰራለን! 🔥
ማንኛውም ጥያቄ ቢከብዳችሁ አትጨነቁ። 💪
እያንዳንዱን ችግር ደረጃ በደረጃ እየፈታን፣ ከኮዱ ጀርባ ያለውን ሀሳብ (Logic) በግልጽ ሁኔታ እንማራለን።

🎯 ስለዚህ የCoding Challenge ጉዞአችን ከነገ ይጀምራል! 🚀

ዝግጁ ሁኑ፣ አንዳችሁም እንዳያመልጣችሁ!
❤️ ዝግጁ ከሆናችሁ በ❤️ Reaction አሳውቁኝ!
📢 ቻናሉን ለጓደኞቻችሁ Share አድርጉ እና አብረን እንማር! 🙌

👇 Join Now

@AbWebDeveloper💚💛❤️@AbWebDeveloper

We'll start from here እና እስከዛ comment መስጫው ላይ የመጣላችሁን output አስቀምጡልኝ እኔ በኋላ መልሱን እሰጣችኋለሁ 👌👌

ከቻላችሁ ጻፉ copy ማድረግ አይቻልም🙅‍♀️🙅‍♂️ እናንተም የየራሳችሁን ስም አስገብታቹ ላኩልኝ

በስልክ app ለምትጠቀሙ ይሄንን procedure ተከተሉ ካልገባችሁ መጠየቅ ይቻላል 💯💯

ከላይ ላለው code የሚመጣላችሁ output ይህንን ይመስላል 👆👆👆

@AbWebDeveloper 💚💛❤️ @AbWebDeveloper

📹 NEW FORMAT ALERT!

We're trying something new today: 👇

😞 for the quality

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