The video is part of the full course
In this lesson you will
- Turn an element into a flex container and align its children
- Use gap, flex-wrap and the flex shorthand
- Write mobile-first CSS
- Change the layout at a breakpoint with a media query
So far every element sits under the one before it. Flexbox lets you place items in a row or a column, space them out and align them, with a few lines of CSS. Media queries then let the layout change with the screen size. Together they're how almost every modern site handles layout.
Updated HTML
The header now holds a brand link and the nav side by side, there's a hero section, and the menu is three <article> cards inside a .menu-grid wrapper.
<header class="site-header">
<a class="brand" href="#">
<img src="logo.svg" alt="" width="48" height="48">
<span>Sunrise Bakery</span>
</a>
<nav class="site-nav">
<a href="#menu">Menu</a>
<a href="#hours">Hours</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section class="hero">
<h1>Fresh bread, every morning.</h1>
<p>We start baking at 5 a.m. so the bread on our shelves is never more than a few hours old.</p>
</section>
<section id="menu">
<h2>Today's menu</h2>
<div class="menu-grid">
<article class="card">
<h3>Sourdough loaf</h3>
<p>Slow-fermented for 24 hours.</p>
</article>
<article class="card">
<h3>Butter buns</h3>
<p>Soft, golden, sold in sixes.</p>
</article>
<article class="card">
<h3>Carrot cake</h3>
<p>By the slice or whole.</p>
</article>
</div>
</section>Continue with the full course
The rest of this lesson, the narrated video, the PDF and the exercise are part of Web Development Foundations. One payment, lifetime access.
Buy the course$39.00
Already bought it? Sign in with the email you paid with.