Responsive Web Design

📱 1. What Is Responsive Web Design?

Responsive design uses flexible grids, images, and media queries so pages adapt from desktop to mobile. Mobile-friendly sites rank better on Google.

🧩 2. Key Principles

• Fluid Layouts with %, em, rem, vw, vh, fr.
• Flexible Images that scale within containers.
• Media Queries to switch styles by width.
• Mobile-First: start small, enhance up.

📐 3. Using Relative Units

.container{
  width:90%;
  margin:0 auto;
}

🖼️ 4. Making Images Responsive

img{
  max-width:100%;
  height:auto;
  display:block;
}

💪 5. Introduction to Media Queries

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

🧱 6. Mobile-First Design

/* Base (mobile) */
body{ font-size:16px; }

/* Tablets */
@media (min-width:768px){
  body{ font-size:18px; }
}

/* Desktops */
@media (min-width:1024px){
  body{ font-size:20px; }
}

Smaller devices load simpler styles first.

💻 7. Hands-On Practice: Responsive Grid

<section class="gallery">
  <div class="item">1</div> <div class="item">2</div> <div class="item">3</div>
  <div class="item">4</div> <div class="item">5</div> <div class="item">6</div>
</section>

/* CSS */
.gallery{ display:grid; grid-template-columns:1fr; gap:10px; padding:20px; }
.item{ background:#0E477B; color:#fff; text-align:center; padding:30px 0; border-radius:8px; }
/* Tablet */  @media (min-width:768px){ .gallery{ grid-template-columns:repeat(2,1fr); } }
/* Desktop */ @media (min-width:1024px){ .gallery{ grid-template-columns:repeat(3,1fr); } }

🧭 8. Responsive Navigation Example (Flexbox)

<header class="nav">
  <div class="logo">StreetGeek</div>
  <nav>
    <a href="#">Home</a> <a href="#">Courses</a> <a href="#">Blog</a> <a href="#">Contact</a>
  </nav>
</header>

.nav{ display:flex; justify-content:space-between; align-items:center; background:#0E477B; color:#fff; padding:10px 20px; }
.nav nav a{ color:#fff; text-decoration:none; margin-left:15px; }
/* Mobile */
@media (max-width:600px){
  .nav{ flex-direction:column; }
  .nav nav a{ display:block; margin:5px 0; }
}

🌍 9. Testing Responsiveness

• Resize the browser window, or use Chrome DevTools → Device Toolbar.
• Test on real devices when possible.
• Check: readable text, scaling images, accessible nav, no sideways scroll.

🧠 10. Quiz Time

• What CSS feature applies rules based on screen size?
• What’s the core advantage of mobile-first design?
• What does max-width:100% on an image ensure?
• Which CSS units respond to viewport size?
• Why test on multiple devices?