Responsive Landing Page

About this project

A complete landing page for a fictional product — hero, features, pricing, testimonial, FAQ and footer — that works from a 360px phone to a wide desktop. HTML and CSS only: no JavaScript, no framework, no build step, and no external font or image. Every graphic is CSS or inline SVG.

The idea it is built around is that modern CSS has made most media queries unnecessary. Grid with auto-fit, flex-wrap, clamp() and minmax() let a layout adapt continuously instead of snapping at three widths somebody picked in 2014. The page is built that way and then counts the media queries it actually still needed, explaining what each one is for — because a breakpoint should come from the width at which your content stops working, not from the screen size of a phone that is now six years old.

The second theme is that a landing page is a document before it is a design. Heading order that makes sense read aloud, real landmark elements, a skip link, alt text that says something, and a focus ring you can actually see.

What you will learn

• Lay out with grid, flex-wrap, clamp() and auto-fit so the page adapts continuously
• Choose a breakpoint from where your own content breaks, not from a device you own
• Use fluid type and spacing instead of stepping sizes at arbitrary widths
• Build a landing page as a document first — correct heading order, landmarks, a skip link
• Understand why a div with an onclick is not a button

Before you start

• HTML and CSS basics — selectors, the box model, and what a class is
• A browser and a text editor. Nothing to install.

New to HTML? The free HTML course covers everything this project assumes.

Features

• Hero, feature grid, pricing table, testimonial, FAQ and footer
• Continuous layout with grid auto-fit, flex-wrap, clamp() and minmax()
• Fluid type and spacing, so nothing jumps at a breakpoint
• Every graphic is CSS or inline SVG — nothing is fetched from anywhere
• Correct heading order, landmark elements, a skip link and visible focus
• Works from 360px upward with no horizontal scrolling, verified

Technology stack

Track: Web Development · Level: Starter

What is included

• index.html and style.css — commented throughout
• A README on breakpoints, fluid sizing, and why the media query count is low
• Suggested extensions, including a dark mode and a second page

Delivered as a 30 KB ZIP. SHA-256 published under Changelog so you can verify it.

System requirements

Operating system

Any

Runtime

Any modern browser. No install, no build step.

Licence

Frequently asked

Changelog