Day 3 — Layout: Flexbox & Responsive Design

display: flex · Nav bars · Card rows · Mobile-friendly pages

Schedule

Time	Activity
0:00 – 0:45	Lecture: why layout is hard, flexbox to the rescue
0:45 – 1:30	Project: build a nav bar + card row
1:30 – 1:40	Break
1:40 – 3:00	Project: give your site a real multi-section layout

Flexbox — Putting Things in a Row

By default, HTML stacks everything top to bottom. Flexbox lets you place items in a row and control how they're spaced. You turn any element into a flex container with one line:

.container {
  display: flex;
}

Now its direct children sit side by side. Then you control them:

.container {
  display: flex;
  gap: 1rem;                    /* space between items */
  justify-content: center;      /* left / center / right / space-between */
  align-items: center;          /* vertical alignment */
  flex-wrap: wrap;              /* let items wrap to a new line if needed */
}

Practice: Flexbox Froggy teaches every flexbox property as a short game. 10 minutes there and this all clicks.

Project — Nav Bar + Card Row

These two patterns — a horizontal nav bar and a wrapping row of cards — appear on almost every website. Add them to your site.

The HTML

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

<div class="cards">
  <div class="card">First</div>
  <div class="card">Second</div>
  <div class="card">Third</div>
</div>

The CSS

nav {
  display: flex;
  gap: 1rem;
  justify-content: center;
  background: #6a1b9a;
  padding: 1rem;
}
nav a {
  color: white;
  text-decoration: none;
}

.cards {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.card {
  flex: 1;                      /* each card grows to share the space */
  min-width: 200px;            /* but never gets narrower than this */
  background: white;
  padding: 1rem;
  border-radius: 12px;
}

Making It Work on Phones

Add this tag inside your <head> so phones don't shrink your page to fit:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Then test by dragging your browser window narrow. A media query lets you change the layout on small screens:

/* when the screen is 600px wide or less, stack the cards */
@media (max-width: 600px) {
  .cards {
    flex-direction: column;
  }
}

Full Worked Example — A Whole Page Layout

Here's the nav bar, a hero section, and a card row assembled into one real page. Copy it into a fresh file to see all three patterns working together, then adapt it to your theme.

The HTML

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

<header class="hero">
  <h1>My Awesome Site</h1>
  <p>A one-line pitch for what this page is about.</p>
</header>

<section class="cards">
  <div class="card"><h3>One</h3><p>Some detail.</p></div>
  <div class="card"><h3>Two</h3><p>Some detail.</p></div>
  <div class="card"><h3>Three</h3><p>Some detail.</p></div>
</section>

The CSS

nav {
  display: flex;
  gap: 1rem;
  justify-content: center;
  background: #1a1a2e;
  padding: 1rem;
  position: sticky;              /* stays put as you scroll */
  top: 0;
}
nav a { color: white; text-decoration: none; }

.hero {
  text-align: center;
  padding: 3rem 1rem;
  background: linear-gradient(#6a1b9a, #06b6d4);
  color: white;
}

.cards {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.5rem;
}
.card {
  flex: 1;
  min-width: 200px;
  background: white;
  padding: 1.25rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

Flexbox or Grid?

Both place items in a layout. You don't need Grid this week, but here's when each shines:

Flexbox — best for a single row or column of items, like a nav bar or a row of cards. It's what we use today.
CSS Grid — best for a true two-dimensional grid (rows and columns lined up), like an image gallery or a dashboard.

Fast finisher? Play CSS Grid Garden and rebuild your card row with display: grid instead.

Common Mistakes

display: flex on the wrong element. It goes on the container (the parent), not on the items inside it.
Cards won't wrap. Add flex-wrap: wrap to the container, or they'll all squish into one row on narrow screens.
Everything's crammed together. Use gap for spacing between flex items instead of adding margins to each one.
Tiny page on your phone. You forgot the <meta name="viewport"> tag in the <head>. Add it to every page.
Confusing the two axes. justify-content spaces items along the row; align-items positions them across it. Swap them if it looks off.

Stretch Goals

Make the nav stick to the top: position: sticky; top: 0;
Try CSS Grid for your cards instead of flexbox — CSS Grid Garden teaches it
Add a media query so your cards stack on narrow screens
Build a simple image gallery with flexbox
Add a footer with links to your social media