Bring your Friends to Fullstack Summer Camp!

Hey camper! 🌞
Imagine how awesome it would be if your coding buddy joined too! 👯‍♀️👨‍💻👩‍💻

Whether it's:

>>>that friend who’s always saying “I wanna learn to code someday”
>>>or your classmate who already thinks they’re the next Zuckerberg 😅
— this is your sign to tag them in.
🧠 Why Should They Join?

🚀 Beginner to Fullstack Dev in 3 months
🔥 Projects, challenges, community
🧩 Daily micro-lessons (with memes sometimes)

🎉 This isn’t just a channel — it’s a summer movement.
Bring your crew, build together, and let’s ship something awesome by the end of the summer! 💻🌴

👉 Invite Link: https://t.me/fullstacksummercamp

Week 1 Day 1 
💡 What Is Coding? How It Works, Why It Matters, and How You Can Start

🌞 Welcome welcome welcome to Fullstack Summer Camp! 
ሰላምምምም 👋 Today is Day 1 of our fullstack development journey.

Whether you're here because you're curious, bored, or secretly want to build the next big tech startup — you're in the right place. 👨‍💻👩‍💻

---

### 🤔 Why You Should Learn Coding

Remember: 
> 🧠 Mark Zuckerberg built Facebook at 19 
> 🌍 Ethiopia's tech scene is booming (10x growth since 2020!)  "Ethiopia needs 50,000+ developers by 2027" (Ethio ICT Report)
> 💭 You already solve problems daily — coding is just a new tool!

---

### 🧠 What is Coding?

Let’s keep it simple: 
Coding (also called programming) is the process of writing instructions that a computer can understand and follow.

These instructions tell a computer: 
🛠️ What to do 
⏰ When to do it 
🧠 How to respond if something happens 

Imagine coding like managing a smart coffee shop: 

1. "When customer says *'Buna'* → Prepare coffee" 
2. "If customer asks *'with sugar?'* → Add 1 tsp" 
3. "After serving → Clean cup immediately" 

The amazing part? Coding is how all software works:
📱 Instagram, YouTube, Facebook , Telebirr
🎮 Games, calculators, weather apps 
🖥️ Websites, chat apps, music players — all run on code!

---

### 💬 Wait… But Computers Don’t Understand English?

Exactly. 
Computers are like really smart robots — but only if you speak their language. 

They don’t understand natural languages like Amharic, Tigrinya, or English. 
They understand programming languages like:

> አማርኛ ➡️ English ➡️ Binary (01110100 01100101 01100001...) 

That’s where code and compilers come in — to translate human logic into computer logic.

---

### 📦 Real World Example – The Café Analogy

Let’s say you're building an online coffee ordering app:

🏗️ HTML creates the layout: “Menu,” “Order,” “Checkout” 
🎨 CSS makes it look good: fonts, colors, sizes 
🤖 JavaScript makes it interactive: "click to order", "add to cart" 
🔁 React helps you build reusable components: buttons, lists, pop-ups 
🧠 Node.js handles the back-end: receiving orders, sending confirmation 
📚 MongoDB stores your data: your name, order history 

Boom — you just coded a coffee ordering system ☕🚀

---

### 🛠️ But... How Do You *Actually* Code?

You write code in a text editor (like VS Code) 
Then you run it or open it in a browser to see what happens.

Think of it like:
✍️ Writing a recipe → 🍳 Cooking the dish → 👀 Tasting it 
If it’s too salty? Tweak the code and try again.

Coding is trial and error, and that’s totally okay. 
Every pro developer started with:
😐 A confused face 
🔍 Google searches 
😂 Copying and pasting random code until it worked

We’re all on the same path — but here, you’ve got a community to support you.

---

### 🌐 Where Does Code Run?

We’ll write code in:

🧑‍💻 Text Editors like: 
➡️ VS Code (PC) 
➡️ TrebEdit or Acode (for mobile phones – limited but useful) 

🌍 Browsers like Chrome to run and test it

Code runs in two main places:

🖼️ In the Browser (Front-end) 
🔐 On a Server (Back-end)

As a Fullstack Developer, you'll learn both sides:

🎨 *Frontend* — What the user sees 
🧠 *Backend* — What makes it all work

---

### 🧰 What Learning Methods Will We Use?

We’ll be learning through:
✏️ Text lessons like this 
▶️ Bro Code’s YouTube videos 
📽️ Sometimes live voice/video sessions 
👥 Group discussions 
🏆 Weekly challenges

This camp is all about accessible learning — even from your phone!

---

### 🧪 Day 1 Mini Task (Optional but Fun)

Try this:

1. Open any website (like google.com) 
2. Right-click → “View Page Source” 
3. You’ll see a wall of code — That’s HTML! 
4. Screenshot it and post in the group


### 🔄 Quick Recap
✅ Coding = Giving instructions to a computer 
✅ HTML, CSS, JavaScript = The languages of the web 
✅ You’ll use tools like VS Code and Chrome 
✅ You don’t need to be a genius — just consistent

---
#Week1 #Day1 #Html #introduction #lesson

### 📅 What’s Coming Up Tomorrow?
🌟 Day 2 – What is HTML? 
- How websites are made 
- You’ll write your very first webpage 
- You’ll understand how the internet sees code

---

### 💬 Your Turn!

What’s a website or app you wish *you* could build one day? 
Drop it in the group!

---

#Day1#CodingIntro #Beginners #HTMLCSSJS #LearnToCode #SummerCampDev
#https://t.me/fullstacksummercamp

Week 1 Day 2 : Introduction to HTML

🌍 Topic: “What is HTML?” – Explained with Local Examples

🎯 Goal: Understand what HTML is, why it matters, and how it works.

🥁 welcome to Day 2 of your coding journey in Fullstack Summer Camp!

🎉 You made it through Day 1! Now let’s get our hands into the first real tool of a fullstack developer: HTML.

Let’s break it down like we’re chatting at a market or in  a library — simple, real, relatable.

🌐 1. What Is HTML?
HTML = HyperText Markup Language
HTML is like the skeleton or structure of every website. It's the language used to structure content on the web.
It’s NOT a programming language. It doesn’t do calculations or logic.
It simply tells the browser how to display content like:
📰 Headings
📄 Paragraphs
🖼️ Images
🔗 Links
📋 Forms

💬 Think of HTML as the initial design of a house — walls, doors, and windows — before painting or electricity

🏘️ 2. Ethiopian Analogy – The Injera Plate
Let’s say you’re serving injera be wot at a restaurant.
➾➾The injera (the plate) = HTML — it holds everything.
➾➾The wot, salad, shiro, doro = content (text, images, links).
➾➾The plate’s shape and arrangement = structure, defined by HTML.
Then, later, you’ll add:
➾➾CSS = for making it look nice
➾➾JavaScript = to make it interactive (like delivering it hot and fresh, or adjusting spice level on request)

🧠 3. What Does “HyperText” Mean?
HyperText just means

Text with links that take you somewhere else

Like a news site with headlines that click into full articles.
When you click “Go to full article” → You’re using HyperText.

🏗️ 4. HTML Structure

Before we build a website, let’s understand how the pieces fit together. Just like a traditional gojo (hut) has a roof, walls, and a door — every webpage has its own basic structure.”
A basic webpage is made of:

🧾 A declaration (like saying: ‘I’m writing in HTML!’)
📦 A box that wraps everything (<html>)
🧠 A hidden brain (<head>) — title, settings
👀 A visible body (<body>) — all your content

Let’s build a traditional hut with HTML

<!DOCTYPE html>
<html>
<head>
   <title>My First Page</title>
</head>
<body>
   <h1>Welcome to My Gojo!</h1>
   <p>This is a simple webpage built with HTML.</p>
</body>
</html>

  relax 😁, we will see them each by each.

🔤 5. Most Common HTML Tags
Here's a list of the most common HTML tags along with what they’re used for:
<!DOCTYPE html>
Telling it that you are writing Html5
<html>
The root of every HTML document. It wraps all the code on your web page.

<html>
   <!-- Everything goes inside here -->
</html>

<head>
Contains metadata (information about the page) like the title, fonts, or linked files. This part doesn't show on the actual page.

<head>
    <title>My Page</title></head>

<title>
Sets the text shown in the browser tab.

<title>Welcome to My Website</title>

<body>
Everything inside this tag is visible on the web page. This is where your content goes — headings, paragraphs, images, etc.

<body>
     <h1>Hello!</h1>
</bimages

<h1> to <h6>
Headings. <h1> is the biggest and most important, while <h6> is the smallest.

<h1>Main Title</h1>
<h2>Section Title</h2>

<p>
Used for paragraphs of text.

<p>This is a paragraph of text.</p>

<a>
Creates a hyperlink. You can link to websites,pages, or files.

<a href="https://example.com">Visit Example</a>

<img>
Displays an image. You must include the src (image URL or path) and alt (alternative text for screen readers).

<img src="cat.jpg" alt="A cute cat">

<ul>, <ol>, <li>
Create lists.
<ul>..... is an unordered (bulleted) list
<ol>...... is an ordered (numbered) list
<li>....... is a list item (used inside both)

<ul>
    <li>Injera</li>
    <li>Shiro</li>
</ul>

<br>
Adds a line break — moves text to the next line without starting a new paragraph.

<p>Hello<br>World</p>

<hr>
Adds a horizontal line across the page. Good for separating content.

<hr>

<strong> and <em>
Used for emphasizing text.
<strong> = bold and important
<em> = italic and emotional emphasis

<p>This is <strong>very important</strong>.</p>
<p>Please <em>pay attention</em>.</p>

👨‍🏫 6. Your First Real Example
Let’s make a personal profile page for someone named "Betelhem":

<!DOCTYPE html>
<html>
<head>
   <title>Betelhem's Page</title>
</head>
<body>
     <h1>ሰላም! እኔ ቤተልሄም ነኝ</h1>
     <p>welcome to my web pagee</p> <img src="https://placekitten.com/300/200" alt="cute cat image">
<p>Visit my <a href="https://examplee.com">myGitHub</a></p>
<h3>my skills:</h3>
<ul>
   <li>video editing</li>
   <li>web developing</li>
   <li>photography</li>
</ul>

</body>
</html>

✅ Save it as betelhem.html
✅ Open it in your browser
🎉 Boom! You made your first webpage.

🎯 7. Where Do We Write HTML?
You can use:
💻 VS Code on your laptop
📱 TrebEdit, Acode, or Spck Editor on mobile
🌐 Your browser to open the file

📚 8. What’s Coming Next?
In the next lessons, you’ll learn:
✅ Forms → Collect data from users
✅ Tables → Display information in grids
✅ Semantic HTML → More readable structure
✅ Multimedia → Add videos, music, maps

📌 Summary:
✅ HTML = The skeleton of every webpage
✅ Tags like <p>, <h1>, and <img> define what shows up
✅ You write HTML in a text editor, and view it in a browser
✅ Use simple, structured code to build everything from a blog to a full website

#Week1 #Day2 #Html #introductionToHtml #lesson

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fullstack day 2</title>
</head>
<body>
<h1>Hello World</h1>
<h1>Universe</h1>
<h2>Galaxy</h2>
<h3>Solar System</h3>
<h4>Earth</h4>
<h5>Africa</h5>
<h6>Ethiopia</h6>
<p>This is a normal paragraph tag, which is used for writing regular text.</p>
<a href="https://google.com">google anything</a>
<h2>Continents</h2>
<ul>
<li>Europe</li>
<li>Asia</li>
<li>Africa</li>
<li>America</li>
</ul>
<h3>Universities in Ethiopia</h3>
<ol>
<li>Addis Ababa University</li>
<li>Mekelle University</li>
<li>Hawassa University</li>
<li>AASTU University</li>
<li>Raya University</li>
</ol>
<img src="20250709_152202.png" alt="cloud ">
<p>see ya again ✌️</p>
</body>
</html>

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
━━━━━━━━━━━━━━━━━━━━━━━