Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the health-check domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/yogisv5/sitesbyyogi.com/wp-includes/functions.php on line 6260
MODULE 9: Responsive Web Design - SitesByYogi

🧠 Module 9

Responsive Web Design

Objective: Create flexible, mobile-friendly layouts that adapt to any screen using fluid units, flexible media, and media queries.

📱 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

Unit	Description	Example
%	Relative to parent	`width:80%;`
em	Relative to current font size	`margin:2em;`
rem	Relative to root font size	`font-size:1.2rem;`
vw/vh	Viewport width/height	`height:100vh;`

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

🖼️ 4. Making Images Responsive

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

Prevents overflow and keeps images proportional.

💪 5. Introduction to Media Queries

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

Device	Max Width
Large desktops	1200px
Laptops	992px
Tablets	768px
Mobile phones	576px

Mobile-first alternative: @media (min-width:769px){ ... }

🧱 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; }
}

StreetGeek

🌍 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?

🚀 Challenge Task

Create a Responsive 3-Section Homepage using:

Header: Logo + navigation (Flexbox)
Main: Grid of 3 cards (auto-adjusting columns)
Footer: Centered text
Stacks vertically on mobile
Use @media at 2+ breakpoints
Use relative units (%, rem, vw); images scale responsively
Bonus: add global transition

*{ transition: all .3s ease; }

🏁 Module 9 Summary

Why responsive design matters
Fluid units + media queries
Mobile-first workflow
Responsive images & nav
How to test across devices

Next up: 👉 MODULE 10: Final Project – Responsive Portfolio — bring structure, style, layout, and responsiveness together.