Flexbox + Grid / INTERACTIVE PRACTICE
Build a complete landing page
Bring your layout skills together in a responsive page for a creative studio.
What you are building
Bring the layout patterns together into a welcoming product landing page.
Your mission
Build a navbar, a centered hero, three feature cards, and a footer. At 800px, keep navigation in a row and cards in three equal columns. At 320px, stack the navigation and cards without horizontal overflow. The menu is display-only in this layout exercise.
- Place the brand and menu at opposite ends on wide screens, with at least 12px between menu labels. Stack the navbar on small screens.
- Center .hero-content on both axes inside a .hero at least 300px tall using Flexbox.
- Use CSS Grid for three equal feature columns with at least 16px gaps. Switch to one column below 600px.
- Keep the navbar, hero, cards, and footer visible and in order at both widths.
Keep any supplied classes so the checks can find your layout. Need a refresher? Responsive card grid practice.
Why this practice comes now
You have built navigation, centered content, and responsive cards. Combine those familiar patterns into one page, testing one region at a time.
Concepts to recall
- Navigation — Use separate flex parents for the navbar and its menu.
- Centered hero — The hero parent controls alignment of its content.
- Feature columns — Share available width after gaps.
- Small screens — Change only the rules that need to adapt.
Start with one action
Run the supplied page at both widths. Work on .navbar first and leave the hero and cards unchanged until the brand and menu behave correctly.
Your code and completion are saved in this browser. Pass all solution checks to complete this practice in My progress. Editing or resetting code keeps your completion.
- Tab / Shift+Tab: indent / outdent.
- Escape, then Tab or Shift+Tab: leave the editor.
- Enter: keep indentation.
Drag the divider, or focus it and use arrow keys to resize. Enter restores an even split.
Up to 10,000 characters per editor.
These controls resize both your preview and the target. Checks always test both widths. Scroll within a preview to inspect the full layout.
Preview supports text, headings, and layout elements with classes. Scripts, links, forms, and external resources are disabled.
Includes your current work as HTML, CSS, and JavaScript files. How to run it on your computer →
Stuck? Open one hint at a time, try a change, and check again before opening the next. The complete answer stays in the separate explained solution.
Hint 1
Think about the navbar as two nested groups. Which group should respond when the screen gets narrower?
Hint 2
Recall how the first practice used spare space around its content. How do the two axes apply to a hero section?
Hint 3
Solve the feature grid separately: make three equal tracks with gaps on the wide view. Which rule should change to give each card its own row on mobile?
Hint 4
Use media queries for the navbar and grid changes. Recheck all sections at 320px and 800px; fixing one region should not hide another or change the content order.
See the explained solution
.navbar { display: flex; align-items: center; justify-content: space-between; }
.nav-links { display: flex; flex-wrap: wrap; gap: 12px; }
.hero { display: flex; justify-content: center; align-items: center; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 600px) {
.card-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
.navbar { flex-direction: column; align-items: flex-start; }
}Each section has its own layout responsibility. Flexbox distributes navigation and centers the hero, while Grid creates equal feature columns. Media queries adapt the composition without changing its content order. Add these rules to the starter CSS, then run the checks.