The capstone: Bright Leaf Coffee's complete, styled site

Twenty-one parts have styled one real, complete site — from a first external stylesheet through Flexbox, Grid, dark mode, and Core Web Vitals. This capstone brings it together and covers the real, practical last step: shipping it.

The complete, real file structure

styles/
├── tokens.css        → part 5: colors, spacing, type scale, dark mode (part 19)
├── reset.css         → part 4: box-sizing: border-box, margin resets
├── base.css          → part 6: typography, real font stacks and @font-face
├── layout.css        → parts 9-13: header, grid, sticky positioning
├── components/
│   ├── product-card.css   → parts 7, 10, 16, 17: cards, hover, shadows
│   ├── forms.css           → part 15: real accessible form styling
│   └── buttons.css         → parts 16-17: transitions and states
└── main.css

Every file here maps directly back to a real part of this series — this isn't a new structure introduced at the end, it's part 20's architecture applied to everything actually built across the previous twenty-one parts.

A real, final pre-launch checklist

[ ] box-sizing: border-box set globally (part 4)
[ ] Every color and spacing value uses a real design token (part 5)
[ ] Real font-display: swap on every @font-face declaration (part 6)
[ ] Layout reflows correctly at every real breakpoint, mobile-first (part 14)
[ ] Every focus state is visible, never removed outright (part 15, 17)
[ ] prefers-reduced-motion respected on every transition/animation (part 16)
[ ] Images and custom fonts have real, reserved space — no layout
    shift on load (part 18)
[ ] Dark mode tested against the real OS setting, not just dev tools
    emulation (part 19)

This is directly part 21's mistakes roundup, restated as a real, actionable list — the same pattern the HTML series' own capstone used, and worth running through in full before treating Bright Leaf Coffee's real, styled site as genuinely done.

Shipping real CSS to production

<!-- development: several real, organized files -->
<link rel="stylesheet" href="/styles/main.css" />

<!-- production: one real, minified, concatenated file -->
<link rel="stylesheet" href="/styles/main.min.css" />

Part 20's split-file structure is valuable for real, human organization during development — shipping that same structure unminified and unconcatenated to real production visitors means multiple separate HTTP requests and needless whitespace and comments in every file. A real, practical build step (even a simple one) that concatenates the files in the deliberate order from part 20 and strips whitespace/comments is a genuine, worthwhile step before actual deployment — this is exactly the kind of task a build tool or static site generator handles automatically, distinct from the hand-written CSS itself, which stays identical either way.

Real cache headers for a stylesheet that rarely changes

Cache-Control: public, max-age=31536000, immutable

A real, aggressive cache header like this tells a returning visitor's browser to reuse the cached stylesheet for up to a year without even checking for a new version — genuinely appropriate specifically when the deployed filename changes on every real update (main.a3f9c2.css, a real fingerprinted filename), since a new filename is what forces a fresh download when the CSS actually changes, while an unchanged filename can safely stay cached indefinitely in between.

Real, final validation before calling it done

1. Run the page through a real Lighthouse audit (built into Chrome
   DevTools) — checking Core Web Vitals scores directly, not just
   guessing based on the checklist above
2. Tab through every real page with a keyboard only
3. Toggle real OS-level dark mode and reduced-motion settings and
   reload

That's the complete CSS series — from a first external stylesheet through to a real, deployed, performant, accessible, dark-mode-ready site for Bright Leaf Coffee, styled entirely on top of the HTML series' own semantic markup. Combined with the SEO and Google Analytics series, the foundation these two series built together connects directly into everything else this site teaches about building and growing a real website.