Build a responsive landing page
Build a responsive landing page
Create a landing page with a header, hero, feature grid, testimonial and footer. Use semantic HTML, a consistent spacing scale, grid or flexbox and at least one breakpoint. Test zoom, keyboard focus, contrast and narrow viewports.
Try it yourself
Change the example, run it, and explain the result in your own words. Then create one variation of your own.
Key idea
Use the example as a starting point, not something to memorize. Practise, inspect the result and make small improvements.
Code example
.features { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 48rem) { .features { grid-template-columns: repeat(3, 1fr); } }