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

💻 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