TaskBuild the full layout. <header class='nav'><strong>Brand</strong><a class='login'>Log in</a></header>. <div class='layout'><aside class='sidebar'>Sidebar</aside><main class='main'><div class='cards'> with 3 .card divs labeled 1/2/3 </div></main></div>. <footer class='footer'><div>Footer col 1</div><div>Footer col 2</div><div>Footer col 3</div></footer>. Styles: .nav flex with space-between + padding 16px 24px + bg #18181B + color white. .layout flex min-height 300px. .sidebar flex 0 0 200px + bg #f5f5f5 + padding 16px. .main flex 1 + padding 24px. .cards flex wrap gap 12px. .card flex 1 1 120px + padding 16px + bg #eef + border-radius 8px. .footer flex + padding 16px 24px + bg #18181B + color white. .footer > div flex 1.
Module capstone: full responsive layout
200 XP14 min
Theory
Putting B2 together
Build a complete page layout using ONLY flexbox. The page has:
- A header with logo (left) and login link (right).
- A main content area that's a sidebar + main split.
- A footer with 3 navigation columns side-by-side.
Each section uses a different flex pattern from this module:
- Header β
justify-content: space-between(lesson 5). - Layout β fixed sidebar + flex: 1 main (lesson 9).
- Card row in main β flex-wrap + gap (lessons 7-8).
- Footer β three equal columns with flex: 1 each.
This is the kind of layout every SaaS dashboard ships. After you can build this from scratch, flexbox is muscle memory.
π
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial β card required, cancel anytime.
Sign up β free trial βFirst 10 lessons in each track are free. No card needed for those.