Responsive Design & Media Queries

Perfect! Let’s roll into Lesson 9, where we make everything we’ve learned responsive — super important in today’s mobile-first world.

---

📘 LESSON 9: Responsive Design & Media Queries

✅ Learning Goals:

• Understand what responsive design is
• Learn how to use media queries
• Make websites look good on all screen sizes
• Build a mobile-friendly layout with Flexbox + media queries

---

🧾 Lesson Content (Text for Website)

---

📱 What is Responsive Design?

Responsive design means your website adapts to any screen size — whether it’s a phone, tablet, or desktop.

No more pinching and zooming. Everything fits just right!

---

🧩 Why Is It Important?

• Over 60% of users browse on mobile
• Google ranks mobile-friendly sites higher
• Better user experience = more engagement

---

🧠 Core Techniques

1. ✅ Fluid Layouts: Use %, vw, vh, or flex instead of fixed px widths
2. ✅ Flexible Images: Use max-width: 100%
3. ✅ Media Queries: Apply different CSS rules for different screen sizes

---

📐 Basic Media Query Syntax

@media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

This changes the background only on screens smaller than 768px.

---

🧪 Responsive Card Layout

<style>
  .container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
  }

  .card {
    flex: 1;
    min-width: 250px;
    padding: 20px;
    background: #fff3e0;
    border: 1px solid #ffcc80;
  }

  @media (max-width: 768px) {
    .container {
      flex-direction: column;
    }
  }
</style>

<div class="container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

On desktop, the cards sit side-by-side.
On mobile, they stack vertically. Magic! 🎩✨

---

🔧 More Common Breakpoints

Device	Width (max)	Typical Media Query
Mobile	480px	@media (max-width: 480px)
Tablet	768px	@media (max-width: 768px)
Laptop	1024px	@media (max-width: 1024px)
Desktop	1200px+	@media (min-width: 1200px)

---

🧪 Practice Task

✅ Create a simple page with:

• A 3-column layout on desktop
• A 2-column layout on tablets
• A 1-column layout on mobile

Use Flexbox + Media Queries to handle the layout switching.

---

📌 Quick Summary

• Responsive design adapts to all screen sizes
• Use flexible units, media queries, and wraps
• Design mobile-first, then enhance for larger screens
• Flexbox + media queries = modern responsive power!

---

🔗 Next Lesson:

👉 Lesson 10: Project – Build a Responsive Landing Page