Free course · Lesson 2 of 5

Responsive Web Design

In this lesson you will

Lay out content with Flexbox and Grid
Make a page adapt to small and large screens

Responsive design means one website works perfectly on phones, tablets, and desktops. We use CSS Grid (or Flexbox) to create flexible layouts, and media queries to adjust styles at different screen widths.

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) auto-stacks columns on small screens.
Flexbox flex-wrap: wrap does the same for simpler layouts.
Always use <meta name="viewport" content="width=device-width"> for mobile.
Test by shrinking your browser — no media query needed for basic Grid auto-fit!

Worked example3-Column Grid

HTML

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Responsive Grid - Rescue Academy</title>  <style>    :root { --font: system-ui, -apple-system, sans-serif; }    * { margin: 0; box-sizing: border-box; }    body { font-family: var(--font); padding: 1rem; background: #f9fafb; }    .grid {      display: grid;      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));      gap: 1rem;      max-width: 800px;      margin: 2rem auto;    }    .card {      background: white;      border-radius: 10px;      padding: 1.5rem;      box-shadow: 0 2px 12px rgba(0,0,0,0.06);    }    .card h3 { color: #1D448A; margin-bottom: 0.5rem; }    .card p { color: #4b5563; font-size: 0.9rem; line-height: 1.5; }  </style></head><body>  <div class="grid">    <div class="card"><h3>HTML</h3><p>Structure your content with semantic tags.</p></div>    <div class="card"><h3>CSS</h3><p>Style with modern layouts and variables.</p></div>    <div class="card"><h3>JavaScript</h3><p>Add interactivity and dynamic behavior.</p></div>  </div></body></html>

Practice exercise

Make your profile page show one column on a phone and three cards in a row on a laptop, without horizontal scrolling at 320 px.

Key takeaways

Design for the smallest screen first
Flexbox suits rows of items; Grid suits page layouts
Test at 320 px and on a real phone

In the full program Module 2: CSS and Responsive Layout See how this topic is taught in depth, with practical activities and an assessment.

Free self-study lesson — no certificate. For the full instructor-led program, see registration options.