Make it shine
Style a real landing page from scratch: a themed design using custom properties, a flex header, a hero, a responsive feature grid, hover states and accessible focus — mobile first.
Plan the stylesheet
A landing page has one job: help a visitor understand what's offered and take the next step. Your CSS should support that job — a clear header, a hero that states the promise, features that are easy to scan, and a button that stands out. Everything from this course appears here: custom properties for a themeable design, Flexbox for components, Grid for the feature list, fluid type, focus styles and respectful motion. Treat it like a real client project: organise the stylesheet so someone else could change the brand colour or add a fourth feature in minutes.
A landing page stylesheet grows quickly, so organise it in the order the browser and your future self need: settings first, general rules next, then components, then layout tweaks for bigger screens. This mirrors how CSS cascades — broad rules first, specific ones later — so fewer rules ever fight.
- Tokens — :root custom properties for colours, spacing, radius; dark mode overrides.
- Base — box-sizing, body font and line height, img { max-width: 100% }, link and focus styles.
- Components — .btn, .site-header, .hero, .feature cards, each with its states.
- Layout — the features grid, mobile first.
- Media queries — wider-screen enhancements, reduced motion.
Before writing CSS, check the HTML: is the content in a sensible order with good landmarks and headings? Styles can't fix muddled structure.