A responsive landing page

The problem

Take a small, plain HTML page for a product of your choice, and style it into a complete landing page that works on a phone and on a large screen.

Requirements

• A sticky navigation bar with the brand on the left and links on the right
• A hero section with a gradient background and a clear call to action
• A feature section using grid that rearranges itself with no media queries
• Colours and spacing defined as custom properties
• A visible focus style on every link and button
• A mobile-first layout that has no sideways scrolling at 320 pixels

Technologies

• HTML
• CSS
• Browser developer tools

Step by step

1. Write the plain HTML first, and check that it makes sense with no CSS.
2. Add a small reset and define your colours and spacing as custom properties on the root.
3. Build the navigation bar with flexbox, and make it sticky.
4. Build the hero section with a gradient and readable text, checking the contrast.
5. Build the feature section with an auto-fit grid.
6. Add hover and focus-visible styles, then short transitions.
7. Drag your browser from narrow to wide, fixing anything that breaks, and test at 320 pixels.

Expected result

A finished page that looks deliberate at every width, where one change to a variable can restyle the whole page.

How it is evaluated

• The layout has no sideways scrolling at any width
• Colours are defined once and reused
• Text has sufficient contrast on every background
• Every interactive element has a visible focus style
• The grid adjusts without media queries

Ways to improve it

• Add a dark theme controlled by prefers-color-scheme
• Respect reduced motion across the page
• Add a container query to one component