<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

This is an official documentation on html by MDN Web Docs. It is detailed and have tons of examples.
https://developer.mozilla.org/en-US/docs/Web/HTML

✅ Steps to Follow When Coding with HTML

1️⃣ List the Common Sections First
Before opening your editor, think about what most pages usually have:

Header: Title, logo, menu

Navigation (Nav): Links to different parts

Main Content: Text, images, tables, forms

Footer: © 2025, contact info, terms and conditions


👉 Writing this down helps you organize your thoughts.


---

2️⃣ Make a Simple Structure Sketch

Take a paper or digital note

Draw rough boxes showing where things will go:
➤ Top = Header
➤ Middle = Main Content
➤ Bottom = Footer


💡 This helps you see the layout before coding.


---

3️⃣ Sort and Prepare Your Content
Decide what text, images, tables, forms, or links you'll include:

Which headings?

Which paragraphs?

Will there be a form or table?

Where will images go?


📌 This keeps things clear instead of just guessing while coding.


---

4️⃣ Start Writing Your HTML Code

Open VS Code, TrebEdit, or any text editor

Build your page using correct HTML structure:
➤ Write semantic tags like <header>, <main>, <footer>
➤ Add content step by step



---

5️⃣ Check and Debug

Open your .html file in a browser

Make sure everything shows up correctly

Fix missing tags, typos, or broken links/images


✅ Bonus Tip:

Keep saving your file as you work to avoid losing progress
#Html #experiences

🔥🔥 Project 1
📢 Final HTML Practice Challenges Before Wrapping Up!

🎯 Your Task:  Build the following challenges using all the HTML tags and methods we’ve learned so far.
You can even add extra things using any tag or method we might not have mentioned directly — creativity is welcome!

✅ Challenge 1: Restaurant Web Page 🍽️
What to Include:

➡️Restaurant name and logo (header)
➡️Menu table with:
➤ Food item, price, ingredients, availability
➡️Images of dishes (use alt text)
➡️Restaurant branches:
location, opening hours, contact numbers
➡️Upcoming events or offers:
special nights, discounts
➡️Contact form for booking or feedback
➡️Footer: Address, social links, copyright

💡 Don’t forget: Use lists for menus too (ul or ol), add navigation links, semantic tags like <section>, <nav>, <footer>!

✅ Challenge 2: Book Store Catalog 📚

What to Include:

➲Store name and logo
➲Divide content into clear sections using headings:
      ➤ Fiction
      ➤ Science
      ➤ Biographies
      ➤ Newspaper & Magazines
➲For each section:
       ➤ Book cover image
       ➤ Title, author, price (in table)
       ➤ Short description
➲Opening and closing times table
➲Contact form or order request form

💡 Bonus: Include a small “about us” section and use <div> and <span> where helpful!

✅ Challenge 3: Scholarship Application Page 🎓

What to Include:

➥University or organization name and logo
➥Section describing the university/organization (mission, vision, departments)
➥List of available scholarships:
       ➤ Types, benefits, duration
➥Requirements list:
        ➤ GPA, documents, deadlines
➥Application form:
       ➤ Name, birth date, education background
       ➤ Attach documents field (file input)
       ➤ Checkbox for agreement to terms
       ➤ Submit button

💡 Bonus: Add tables to show scholarship comparison or eligibility.

✅ Important Notes for All Challenges:
➤ Use:
     ➛<header>, <footer>, <nav>, <main>, <section>
     ➛<table>, <ul>, <ol>, <form>, <input>, <textarea>, <button>
     ➛Images <img>, videos <video>, audio <audio>
    ➛  if useful <div>, <span>, class and id attributes

➤ Use any other tags or elements we learned: even things like <abbr>, <hr>, <br>.

✅ When You’re Done:

Share your work (screenshot or code) in the group!
Invite your friends to join the channel and learn with us.
✌️Stay well and get ready for our next topic: CSS Styling!

#Week1 #Html #project #project1

Use this code for now for your image's size to decrease. Put it before <body>. You can change the width to your preferences.

<style>
    img {
    width: 50px;
    height: auto;
}
</style>