Final Project: Build a CSS Page

1. The brief

Build a one-page product site for an imaginary app of your choice. It must contain: a sticky header with nav, a hero with gradient background and CTA button, a 3-card feature grid that stacks on mobile, a testimonial section, and a footer. Dark text on light surfaces, one accent color, your own font pairing.

• Structure first (Modules 1–2): semantic sections, border-box sizing, a fluid .container with max-width.
• Type system (Module 3): a display/body pairing, rem-based scale, 1.6 body line-height.
• Layout (Module 4): Flexbox for the nav, Grid (auto-fit, minmax) for the features.
• Responsive (Module 5): viewport meta, flexible media, one breakpoint where your content needs it.
• Effects (Module 6): gradient hero, layered card shadows, rounded corners.
• Motion (Module 7): hover transitions on cards and buttons, a fade-up entrance on the hero.
• System (Module 8): all colors and spacing as custom properties on :root.

2. Build faster with the toolbox

This is what the generators are for: craft your hero in the Gradient generator, card depth in Box Shadow, your CTA in the Button Styler, hover motion in Hover Effects, and compress the result with the Minifier. Copy each output into your project file.

3. Review checklist

• Resizes cleanly from 320px to desktop with no horizontal scrollbar.
• All colors/spacing flow from :root variables — changing --accent once restyles the page.
• Hover states transition smoothly (transform/opacity only).
• Keyboard focus is visible on every interactive element.
• Stylesheet passes through the Minifier without errors.

4. Try it yourself

Your project scaffold — a working miniature of the brief. Extend it: add the feature grid, a testimonial, and your own theme via the :root variables. Build the rest in your own editor.

5. Quiz — check your understanding