These are tasks, not tutorials. Each one describes the expected result. Try to build it before you look at the solution. If you get stuck, check the lesson named in the hint.
Challenge 1: center a box
Center a 200px by 100px box exactly in the middle of a 300px tall container, horizontally and vertically.
Expected result: the box sits in the center of the container, whatever its width. Hint: Flexbox.
Show a possible solution
<style>
.stage { height: 300px; background: #f4f9fc; display: grid; place-items: center; }
.box { width: 200px; height: 100px; background: #d94a00; color: #fff; display: grid; place-items: center; }
</style>
<div class="stage"><div class="box">Centered</div></div>Challenge 2: a navbar
Build a bar with a logo on the left and three links on the right, all vertically centered, with 16px between the links.
Expected result: one row, the logo at one end and the links at the other. Hint: Flex order and align-self for margin-left: auto.
Show a possible solution
<style>
.bar { display: flex; align-items: center; gap: 16px; padding: 12px 16px; background: #1a5276; color: #fff; }
.bar a { color: #fff; text-decoration: none; }
.logo { margin-right: auto; font-weight: 800; }
</style>
<div class="bar"><span class="logo">Juniper</span><a href="#">Shop</a><a href="#">Journal</a><a href="#">About</a></div>Challenge 3: equal cards
Make three cards of equal height in a row, even though they hold different amounts of text, with a 16px gap.
Expected result: the three cards are aligned and have the same height. Hint: Flexbox stretches items by default.
Show a possible solution
<style>
.cards { display: flex; gap: 16px; }
.card { flex: 1; padding: 12px; border: 1px solid #ccc; border-radius: 8px; }
</style>
<div class="cards">
<div class="card">Short card.</div>
<div class="card">A card with quite a lot more text, which makes it taller than the others in the row.</div>
<div class="card">Medium text here.</div>
</div>Challenge 4: header, sidebar, content, footer
Use grid areas for a page with a header across the top, a 150px sidebar on the left, the content next to it, and a footer across the bottom.
Expected result: the classic four-region page. Hint: grid-area.
Show a possible solution
<style>
.page { display: grid; gap: 8px; grid-template-columns: 150px 1fr; grid-template-areas: "h h" "s m" "f f"; }
.page > * { padding: 12px; background: #d0e8f2; }
header { grid-area: h; } aside { grid-area: s; } main { grid-area: m; min-height: 100px; } footer { grid-area: f; }
</style>
<div class="page"><header>Header</header><aside>Sidebar</aside><main>Content</main><footer>Footer</footer></div>Challenge 5: a responsive grid without media queries
Make a grid of eight boxes that has as many columns as fit, with each column at least 120px wide.
Expected result: the number of columns changes when you resize the window. Hint: auto-fit and auto-fill.
Show a possible solution
<style>
.grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.grid div { padding: 16px; background: #fdebd9; text-align: center; }
</style>
<div class="grid"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div></div>Challenge 6: two columns on desktop, one on mobile
Make a layout with a main column and a sidebar. At 500px and wider they sit side by side (2 : 1). Below that, the sidebar is under the main column.
Expected result: the layout changes at the breakpoint. Drag the corner of the Result panel to test it. Hint: Mobile First.
Show a possible solution
<style>
.layout { display: grid; gap: 12px; }
.layout > div { padding: 14px; background: #d0e8f2; }
@media (min-width: 500px) { .layout { grid-template-columns: 2fr 1fr; } }
</style>
<div class="layout"><div>Main</div><div>Sidebar</div></div>Next: finding mistakes in broken CSS in Debugging Exercises.