Assignment : refer the following you tube videos

✅✅Introduction to html and headings   .... https://youtu.be/-CNdRywgF7M?si=taqCkgDLlBAqM79f
✅✅Hyperlinks...... https://youtu.be/gOioxltfh48?si=1TkZo5iN7Lb4wtCg
✅✅Images...... https://youtu.be/Hh_se2Zqsdk?si=0flgH01_B1gJ0gM5
✅✅Lists..... https://youtu.be/-kXZvKxs9oA?si=7XfbrlKaRPBZxHJs

#Week1 #Day2 #Html #introduction #resources

Week 1 𝗗𝗮𝘆 𝟮 𝗖𝗵𝗮𝗹𝗹𝗲𝗻𝗴𝗲: 𝗗𝗲𝘀𝗶𝗴𝗻 𝗮 𝗖𝗼𝘃𝗲𝗿 𝗣𝗮𝗴𝗲 📝

Let’s get a little creative!
Your task is to build a simple and clean HTML cover page for a group assignment — just like the ones we submit at school or university.

✅ Your cover page should include:
➤ Your university/high school logo (use any placeholder image for now)
➤ Name of your school, university, or campus
➤ Official website (make up one if yours doesn’t have)
➤ Department name
➤ Section or class
➤ Group members (list 3 or more names)
➤ Submission date

You’ll use headings, paragraph tags, and an image — everything we’ve learned today!

📤 𝗪𝗵𝗲𝗻 𝘆𝗼𝘂’𝗿𝗲 𝗱𝗼𝗻𝗲, 𝗽𝗹𝗲𝗮𝘀𝗲 𝘀𝗵𝗮𝗿𝗲 𝗮 𝘀𝗰𝗿𝗲𝗲𝗻𝘀𝗵𝗼𝘁 𝗼𝗿 𝘆𝗼𝘂𝗿 𝗰𝗼𝗱𝗲 𝗶𝗻 𝘁𝗵𝗲 𝗴𝗿𝗼𝘂𝗽!
Let’s celebrate each other's work and learn together 🙌

👥 𝗜𝗻𝘃𝗶𝘁𝗲 𝗮 𝗳𝗿𝗶𝗲𝗻𝗱!
If you’re enjoying the challenge, bring your friends into the camp. The more minds, the better the journey!

👋 Stay kind, stay curious — and stay coding!

#Week1 #Day2 #Html #introductionToHtml #challenge

Senior Advices and Experiances

When many people start learning to code, they often feel like they need to know everything upfront every syntax, every trick, every framework. So they hop from one tutorial to the next, thinking they’re making progress, but still feeling stuck when trying to build something real.

Here’s what truly makes the difference

1. Don’t Avoid the Docs

Documentation may seem intimidating at first, but it’s the most accurate and reliable source of truth. Tutorials are great for getting started, but docs are what help you go deeper and become confident.

2. Use AI Wisely  Not Lazily

AI tools can boost your learning dramatically when used right. They help you understand code, debug smarter, and learn faster. But they can’t replace your thinking, reasoning, or problem-solving. Use AI to enhance your skills, not replace them.

3. Understand the “Why” Before the “How

Before jumping into any project, take a moment to understand the problem and the technology behind it frontend, backend, APIs, databases, and infrastructure. When you understand why things work the way they do, the how becomes clearer.

4. Software Architecture is a Must

Whether you're working on small apps or large systems, knowing how to design clean, scalable, and maintainable architecture is key. Good code isn't just code that works. it’s code that works well under pressure, in teams, and over time.

5. Start Building Early Even If It's Messy

Don’t wait until you "know everything" before starting. Start small, make mistakes, break things, fix them that’s where real learning happens. You grow by doing.

6.Consistency > Overload

It’s not about spending 10 hours a day in front of a screen. It’s about showing up every day with intention. A focused hour daily beats unfocused marathons. Momentum comes from habit, not hustle.

Currently, the resources are better, the tools are smarter, and the learning curve is smoother but the core principles remain the same: stay curious, build consistently, and keep improving.

You don’t have to know it all. You just have to start and keep going.

@edemy251

#experiences #seniors

Week 1 Day 3: HTML Forms 📝

Creating Forms to Collect Information

👋 Selam Campers! Welcome to Day 3 of Fullstack Summer Camp! You’ve already learned how to structure a page using
    ➾headings
    ➾paragraphs
    ➾images
    ➾links. Now it’s time to interact with your users — and for that, we use something powerful: **Forms**!
━━━━━━━━━━━━━━━━━

━━━━ 🧠 What is a Form in HTML?

A **form** is how we collect data from users on a website. It’s like a digital paper form — just like the ones you fill at school, clinics, or offices.

📋Real-life examples of forms:
    - Login & registration pages
    - Survey or feedback forms
    - Online order checkout forms
    - Assignment submissions
━━━━━━━━━━━━━━━━━
━
🏗️ <form> Tag – The Form Container

All form elements go inside a <form> tag.

<form>
        <!-- form elements go here -->
</form>

This tells the browser, “Everything inside here is part of a single form.”
━━━━━━━━━━━━━━━━━━

🔠 Common Input Types (with Examples)

Text Input – For short answers like name

<label for="name">Name:</label>
<input type="text" id="name" name="name">

Email Input – For collecting emails

<label for="email">Email:</label>
<input type="email"
              id="email"
             name="email"    
           placeholder="you@example.com"
          required>

Password Input – Hides the characters

<label for="password">Password:</label>
<input type="password" id="password" name="password">

Textarea – For long messages or comments

<label for="message">Your Message:</label><br>
<textarea id="message" name="message" rows="4" cols="30"></textarea>

Radio Buttons – Pick one option only

<p>Gender:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>

Checkboxes – Choose multiple options

<p>Skills:</p>
<input type="checkbox" id="html" name="skills" value="HTML">
<label for="html">HTML</label>
<input type="checkbox" id="css" name="skills" value="CSS">
<label for="css">CSS</label>

Dropdown (Select)

<label for="department">Department:</label>
<select id="department" name="department">
     <option value="cs">Computer Science</option>
     <option value="se">Software Engineering</option>
     <option value="it">Information Technology</option>
</select>



Date Picker

<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">

File Upload

<label for="photo">Upload your photo:</label>
<input type="file" id="photo" name="photo">

Submit Button – To send the form

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

Reset Button – To clear all fields

<input type="reset" value="Clear">

━━━━━━━━━━━━━━━━━━━

📦 Useful Attributes

↪️ placeholder – Shows hint inside input

<input placeholder="Enter your name">

↪️ required – Prevents empty submission

<input required>

↪️ value – Sets a default value

<input value="Addis Ababa">

━━━━━━━━━━━━━━━━━━

📚 Optional: Grouping

Use <fieldset> to group related inputs and give the group a title using <legend>.

<fieldset>
      <legend>Personal Info</legend>
      <label for="fullName">Full Name:</label>
       <input type="text" id="fullName">
</fieldset>

━━━━━━━━━━━━━━━━━━━

🌍  Example – Group Assignment Form

<h2>Group Assignment Submission</h2>
<form>
      <label for="university">University Name:</label>
      <input type="text" id="university" name="university"><br><br>
     <label for="department">Department:</label>
      <input type="text" id="department" name="department"><br><br>
      <label for="group">Group Members:</label><br>
      <textarea id="group" name="group" rows="3" cols="40"></textarea><br><br>
      <label for="date">Submission Date:</label>
      <input type="date" id="date" name="date"><br><br>
     <input type="submit" value="Submit">
</form>

💡 Try it in your editor
━━━━━━━━━━━━━━━━━━━
#Week1 #Day3 #Html #Forms #lesson

✅ Quick Recap:
➡ <form> wraps the form

➡Use inputs like <input>, <textarea>, <select>

➡Use <label> for better accessibility

➡placeholder, required, value make forms more useful

➡Forms don’t do anything until you connect them with JavaScript or backend (coming soon!)

━━━━━━━━━━━━━━━━━

📢 Coming up next (Day 4):
We’ll explore HTML Tables (to organize data) and <div> elements (for layouts) — super important for building real websites!

<h3>Alpha Computer School</h3>
    <h4>welcome to Alpha Computer School official website</h4>
    <p>if you are interested in registering to our coding class, please fill out the following form</p>
    <form>
       
            <label id="name">full name:</label>
            <input type="text" id="name" placeholder="eg Haregu Kebede Ayalew" required >
            <br>
            <p>Gender:</p>
            <input type="radio" id="male" name="gender" value="male">
            <label for="male">Male</label>
          <input type="radio" id="female" name="gender" value="female">
         <label for="female">Female</label>
       
        <br><br>
        
            <label id="age">Age:</label>
            <input type="number" id="age" min="10" max="90">
       
        <br><br>
        
            <label id="email">email:</label>
            <input type="email" id="email" placeholder=" example@gmail.com" required>
        
        <br><br>
                   
          <label id="phone">Phone number:</label>
          <select required>
              <option>+221</option>
              <option>+231</option>
              <option>+241</option>
              <option>+251</option>
              <option>+261</option>
              <option>+271</option>
              <option>+281</option>
              <option>+229</option>
          </select>
          <input type="number" id="phone" required>
         
          <br> <br>
          <label id="bd">Birth of date</label>
          <input type="date" id="bd">
          <br> <br>
       
            <label id="experiance">experience level</label>
            <select>
                <option>beginner</option>
                <option>intermediate </option>
                <option>advanced</option>
            </select>
       
        <br>
          <br>
       
            <label id="language">which language do you want to learn</label>
            <select>
                <option>Html</option>
                <option>Css </option>
                <option>JavaScript</option>
                <option>Python</option>
            </select>
        <br><br>
        <label id="cv">CV:</label>
        <input type="file" id="cv">
        <br> <br>
        <label id="essay">Your essay:</label><br>
       
       <textarea id="essay"  rows="10" cols="30"></textarea>
       <br> <br>
        <input type="submit">
        <br>

Assignment : watch this video on html.forms by bro codes.
https://youtu.be/2O8pkybH6po?si=LpdZ5EV8lEFoyECj

#Week1 #Day3 #Html #Forms #resources

💪Week 1 Day 3  Challenges: New Account

🎯 Your Mission: Build a “Create New Account” Form 

Now that you’ve learned how forms work, it’s time to put your skills to the test! 
Your task today is to create a simple but complete Account Creation Form like the ones we fill on social media or email signup pages.

📌 What to include in your form:

➤ First Name 
➤ Last Name
➤gender
➤ Phone Number 
➤ Date of Birth 
➤country
➤ Username 
➤ Email Address 
➤ Recovery Email 
➤ New Password  with hint or strength note
➤ Confirm Password
➤profile picture
➤  Terms and Conditions agreement
➤ A submit button labeled as "Create Account"

✨ Bonus Tips:
- Use placeholder to guide the user (e.g. placeholder="Enter your name") 
- Use type="password" for password fields 
- Make the required fields use required 
- You can group related inputs using <fieldset> and <legend> if you want 


📸 When you’re done:
🔹 Share a screenshot or the code in our group 
🔹 Give feedback to others’ work if you can 
🔹 And hey — invite a friend to join the Fullstack Summer Camp today!

Keep going — you're learning real-world skills here. Stay focused, stay kind, and stay curious 🚀

#Week1 #Day3 #Html #Forms #challenge

📚Week 1 Day 4: HTML Deep Dive – Tables, Divs & Media

💻 Organizing Data, Structuring Layouts & Embedding Content

👋 Selam Fullstack Campers! Today we bring together three powerful HTML techniques:
1️⃣ Tables – to display structured data
2️⃣ Divs – to group and organize sections
3️⃣ Media – to embed images, audio & video

#Week1 #Day4 #Html #TablesDivs #lesson

Lets start with Tables

Tables help us organize information like:
✅ School results
✅ Class schedules
✅ Market prices
✅ Contact lists ━━━━━━━━━━━━━━━━━━━━━━━
🪑 1️⃣ What Is a Table in HTML? A table in HTML is made of rows and columns, similar to Excel or paper tables.
🔤 Basic Structure:

<table>
    <tr>
          <th>Item</th>
          <th>Price</th>
     </tr>
     <tr>
          <td>Injera</td>
         <td>25 birr</td>
     </tr>
</table>

✅ Explanation:
<table> → Wraps the whole table
<tr> (Table Row) → Creates a new row
<th> (Table Header) → Bold, centered by default
<td> (Table Data) → Regular cell
━━━━━━━━━━━━━━━━━━━━━━━

🛠️ 2️⃣ Adding Borders
Tables look invisible by default. To make it visible, add:

<table border="1">

✅ Pro Tip: You can also style it later with CSS. For now, border="1" is simple.
━━━━━━━━━━━━━━━━━━━━━━━

📐 3️⃣ Multiple Rows & Columns
🔤 Example:

<table border="1">
       <tr>
              <th>Name</th>
              <th>Age</th>
             <th>Department</th>
      </tr>
      <tr>
           <td>Betelhem</td>
           <td>22</td>
           <td>Computer Science</td>
     </tr>
     <tr>
          <td>Abebe</td>
          <td>21</td>
          <td>Accounting</td>
      </tr>
      <tr>
           <td>Meron</td>
           <td>20</td>
          <td>Law</td>
      </tr>
</table>

━━━━━━━━━━━━━━━━━━━━━━━

🔄 4️⃣ Rowspan & Colspan — Merging Cells
Sometimes we need to combine cells.
➤ Rowspan = Join cells vertically
➤ Colspan = Join cells horizontally
🔤 Example:

<table border="1">
        <tr>
              <th rowspan="2">Name</th>
             <th colspan="2">Contact</th>
       </tr>
       <tr>
              <th>Email</th> 
              <th>Phone</th>
     </tr>
      <tr>
            <td>Megersa</td>    
            <td>megersa@gmail.com</td>
           <td>0912xxxxxx</td>
        </tr>
</table>

━━━━━━━━━━━━━━━━━━━━━━

🎯 Summary:
✅ <table> → Creates a table
✅ <tr> → Row
✅ <th> → Heading cell
✅ <td> → Normal cell
✅ rowspan, colspan → Merge cells
━━━━━━━━━━━━━━━━━━━━━━━

HTML Layout with div, span, class & id

Now let's focus on how developers **organize content** using special HTML tools:
✅ <div> → Block containers
✅ <span> → Inline containers
✅ class & id → For styling and controlling specific elements ━━━━━━━━━━━━━━━━━━━━━━━
📦 1️⃣ What Is <div>?
<div> stands for “division.” It’s like a big invisible box that holds content inside it.
✅ Purpose: - Group related content - Make layout blocks (header, sidebar, footer)
➤ Simple Example:

<div>
        <h1>My Profile</h1>
        <p>I love fullstack development!</p>
       <img src="myphoto.jpg" alt="My photo">
</div>

✅ Without CSS, it
won’t show borders or color — it just structures things.
━━━━━━━━━━━━━━━━━━━━━━━
🔤 2️⃣ What Is <span>?
It is like <div>
, but smaller. It’s used for inline content, like a single word.

✅ Purpose:
Highlight a word or phrase
Apply styles to part of a sentence
➤ Example:
<p>My favorite color is <span>blue</span>.</p>
━━━━━━━━━━━━━━━━━━━━━━━

🎯 3️⃣ class and id → Adding Labels to HTML Elements
✅ class:
Reusable name for many elements
You can style all elements with the same class
✅ id:
Unique name for one specific element only
Used for targeting that one thing
━━━━━━━━━━━━━━━━━━━━━━━

📂 4️⃣ Real-Life Examples

➤ Using class with div:

<div class="profile-box">
        <h2>Betelhem</h2>
        <p>Fullstack Developer</p>
</div>
<div class="profile-box">
        <h2>Abebe</h2>
       <p>UI Designer</p>
</div>

Both divs share the same class "profile-box." Later in CSS, you can give all profile-box divs the same color or size.
➤ Using id with span:

<p>Welcome, <span id="user-name">Kebedech</span>!</p>


Later with CSS or JavaScript, you can target only "Kebedech" by using its id.
━━━━━━━━━━━━━━━━━━━━━━━

🛠️ 5️⃣ Combining div, span, class, and id Together

✅ Example Layout:

<div class="card">
        <h1 class="title">Haregu's Coffee</h1>
       <p>Open: <span class="highlight">8 AM – 10 PM</span></p>
       <p id="special-message">Today’s special: Macchiato!</p>
</div>

➤ Explanation:
card → applies to the whole block
title → applies to all titles
highlight → styles just the time
special-message → styles only today’s special
━━━━━━━━━━━━━━━━━━━━━━━

💡 6️⃣ Why Does This Matter?
✅ Layout:
Div and span help you organize pages cleanly
✅ Styling:
class and id let CSS and JavaScript target specific parts
✅ Real Websites:
Every modern website uses this method!
━━━━━━━━━━━━━━━━━━━━━━━

HTML Media – Images, Audio, and Video

And now we learn how to add **media content** to websites:
✅ Images (photos, logos, icons)
✅ Audio (music, podcasts)
✅ Video (lessons, intros) ━━━━━━━━━━━━━━━━━━━━━━━
🌄 1️⃣ Adding Images with <img>
✅ Basic Syntax:

<img src="image-url" alt="Alternative Text">
src → Path or link to the image file
alt → Text description if image doesn't load
✅ Example:

<img src="https://placekitten.com/300/200" alt="Cute kitten image">

✅ Notes:
Always use alt for accessibility (for blind users or if image is missing).
Supported formats: .jpg, .png, .gif, .webp
━━━━━━━━━━━━━━━━━━━━━━━

📐 2️⃣ Controlling Image Size
You can control width and height using attributes:

<img src="photo.jpg" alt="My photo" width="300" height="200">

✅ Or better: use CSS for full control (coming next week).
━━━━━━━━━━━━━━━━━━━━━━━

🎧 3️⃣ Embedding Audio

✅ Basic Syntax:

<audio controls> <source src="audio-file.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>

✅ Important:
Always include controls so users can play, pause, and control volume.
Supported formats: .mp3, .ogg, .wav
✅ Example:

<audio controls> <source src="buna-music.mp3" type="audio/mpeg"> </audio>

━━━━━━━━━━━━━━━━━━━━━━━

🎥 4️⃣ Embedding Video

✅ Basic Syntax:

<video
width="320"
height="240"
controls>
<source src="video-file.mp4"
type="video/mp4">
Your browser does not support the video tag. </video>

✅ Example:

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

✅ Notes:
Use width and height to control size.
formats: .mp4 (most common), .webm, .ogg
━━━━━━━━━━━━━━━━━━━━━━━

🌐 5️⃣ Embedding External Media (YouTube, SoundCloud)
Sometimes you want to embed a YouTube video directly:

✅ Example:

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>


━━━━━━━━━━━━━━━━━━━━━━━
📂 6️⃣ Real-World Example:
Music Café Website

<!DOCTYPE html>
<html>
<head>
       <title>Music Café</title>
</head>
<body>
      <h1>Welcome to Music Café</h1>
     <img src="coffee.jpg" alt="Cup of coffee" width="300">
    <h2>Now Playing</h2>
     <audio controls> <source src="ethiopian-jazz.mp3" type="audio/mpeg"> </audio>
      <h2>Watch Our Story</h2>
      <video width="500" controls> <source src="cafe-tour.mp4" type="video/mp4"> </video>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━
💡 Why Media Matters in Websites:
✅ Makes pages more attractive
✅ Engages visitors
✅ Shares information in visual/audio form
━━━━━━━━━━━━━━━━━━━━━━━

Assignment
Div....
https://youtu.be/WbnCll6vvw4?si=P4jd-VYqA3E6EysY
Tables...
https://youtu.be/aNC6LY34yVM?si=InjX1lOFE-Q0QVDH
Videos.....
https://youtu.be/Ki_0iES2cGI?si=dofFKUTrgPs7Ntcd
Audio....
https://youtu.be/UHjTXLAS4tU?si=2MCT0mkXgACRC8CY

#Week1 #Day4 #Html #TablesDivs #resources

💪Week 1 Day 4 Challenges: Choose Your Challenge! 

🎯 Today’s Focus: Tables, Divs & Media Combined 

✅ You can choose ONE of the two challenges below. Both will help you practice working with tables, divs, images, audio, and video in real-world scenarios.

━━━━━━━━━━━━━━━━━━━━━━━ 
🔥 Challenge Option 1: Event Schedule Webpage 

➤ Build a full event schedule page for a concert, conference, festival, or sports event. 

📌 What to include: 
- A <div class="header"> with: 
  ➤ Event name 
  ➤ Event logo or banner image (<img>) 
  ➤ Welcome paragraph 

- A <table> showing the schedule: 
  Columns: 
  ➤ Time 
  ➤ Activity/Program Name 
  ➤ Speaker/Performer Name 

- A <div> for Media Section: 
  ➤ <audio> for the event’s anthem, intro speech, or background music 
  ➤ <video> (upload or YouTube embed) for event highlight trailer 

- A <footer> with contact info or social media links 

✅ Example Sections: 
- <div class="schedule"> 
- <div class="media-gallery"> 
- <div class="footer"> 

━━━━━━━━━━━━━━━━━━━━━━━ 
🔥 Challenge Option 2: Historical Timeline Webpage 

➤ Design a web page showing a historical timeline (any topic: Ethiopia’s history, technology history, personal life milestones, etc.). 

📌 What to include: 
- A <div class="header"> with: 
  ➤ Topic title 
  ➤ Topic logo/image (<img>) 
  ➤ Brief description 

- A <table> showing the timeline: 
  Columns: 
  ➤ Year 
  ➤ Event Title 
  ➤ Description 

- Media Content: 
  ➤ <img> for key moments (photos, drawings, flags, etc.) 
  ➤ <video> or <audio> related to that history (a speech, a documentary clip, or a YouTube iframe embed) 

- Optional Footer: Closing notes or links to learn more 

━━━━━━━━━━━━━━━━━━━━━━━ 
✅ What To Do After: 
- Choose ONE challenge and complete it using only HTML. 
- Save as: 
  ➤ event-schedule.html OR historical-timeline.html 
- Share your file or screenshots in our Telegram group. 
- Don’t forget to invite your coding friends! 

✌️ Stay well, practice consistently, and keep building!

#Week1 #Day4 #Html #TablesDivs #challenge

📚 Week 1 Day 5: Final HTML Lesson
Semantic HTML, Meta Tags, Accessibility, Best Practices
━━━━━━━━━━━━━━━━━━
🌟 Why This Lesson?
By now, you know how to structure pages with:
➤ Headings
➤ Paragraphs
➤ Forms, Tables, Divs, Media Now, let’s focus on writing cleaner, more organized, and more professional HTML code using:
- Semantic HTML
- Meta tags
- Accessibility (A11y) basics
- Best practices
━━━━━━━━━━━━━━━━━━━━
✅ 1️⃣ What Is Semantic HTML?
Semantic = Meaningful.
Semantic HTML uses tags that describe their purpose. Instead of just using <div> everywhere, we now use:
- <header> → Top of the page: logo, menu
- <nav> → Navigation links
- <main> → Main content
- <section> → A specific group of content
- <article> → Independent content like blog posts
- <aside> → Sidebar content
- <footer> → Bottom section: contact, copyright
🎯 Why Use It?
- Improves SEO (Google loves it!)
- Improves accessibility for screen readers
- Makes your code easier to read
━━━━━━━━━━━━━━━━━━━
✅ 2️⃣ Real-World Example Layout

<html>
<head>
       <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Betelhem's Blog</title>
</head>
<body>
        <header>
                <h1>Betelhem’s Blog</h1>
                <nav>
                     <a href="#">Home</a>
                     <a href="#">About</a>
                     <a href="#">Contact</a>
                 </nav>
        </header>
       <main>
               <article>
                      <h2>My First Blog Post</h2>
                     <p>Today, I learned Semantic HTML!</p>
              </article>
              <aside>
                   <h3>Quick Links</h3>
                   <ul>
                         <li><a href="#">HTML Tips</a></li>
                         <li><a href="#">CSS Basics</a></li> 
                  </ul>
           </aside>
      </main>
      <footer>
               <p>&copy; 2025 Betelhem. All rights reserved.</p>
      </footer>
</body>
</html>

━━━━━━━━━━━━━━━━━━━
✅ 3️⃣ What Are Meta Tags?
Meta tags go inside the <head> to give the browser information about your page.
Essential meta tags:
- <meta charset="UTF-8"> → Supports Amharic, Tigrinya, all languages
- <meta name="viewport" content="width=device-width, initial-scale=1.0"> → Makes page responsive
- <meta name="description" content="Learn web development step by step.">
━━━━━━━━━━━━━━━━━━━
✅ 4️⃣ Accessibility Basics (A11y)
➤ alt attribute on images: <img src="injera.jpg" alt="Traditional Ethiopian Injera Plate">
➤ Use <label> for form inputs: <label for="email">Email:</label> <input type="email" id="email">
➤ Don’t rely only on color for important information
━━━━━━━━━━━━━━━━━━━
✅ 5️⃣ HTML Entities Special symbols written as codes:
- &lt; = <
- &gt; = >
- &copy; = ©
- &amp; = &
━━━━━━━━━━━━━━━━━━
✅ 6️⃣ HTML Comments
Write notes for yourself or other developers:
<!-- This is a comment. It doesn’t show on the page. -->
━━━━━━━━━━━━━━━━━━
✅ 7️⃣ Best Practices Review
➺Use semantic tags instead of too many <div>s
➺Indent your code properly
➺ Always write alt text for images
➺ Keep your file names clear: ➤ about.html, contact.html 
━━━━━━━━━━━━━━━━━━
#Week1 #Day5 #Html #SemanticHtml #lesson

Assignment
Meta tags
https://youtu.be/bi5bfH_gVWE?si=n6Nq2Ss3urG8Cwzf
Buttons
https://youtu.be/_2wARy-oevQ?si=bGS_brnY7O1A9d4o

#Week1 #Day5 #Html #SemanticHtml #resources