Ship it
Combine everything into one file: the semantic page, the accessible form, the design tokens and the responsive layout — plus a dark theme for free, thanks to the tokens.
Assembling one file
The final site lives in a single HTML file with a <style> element in the head. Professional projects split CSS into files, but one file is perfect for a small site and makes it easy to share and host. Build it in the same order as the course, checking the page after each stage, so a problem is always in the last thing you added.
- Head: charset, viewport, a specific title and meta description.
- Structure: header with nav, main with hero, menu, visit and booking sections, footer.
- Content: real alt text, labelled form fields with sensible types and validation.
- Tokens: the :root custom properties, then base styles for body, headings, links and focus.
- Components: button, cards, form fields.
- Layout: Flexbox header, Grid menu, a media query for wider screens.
- Theme: dark-mode token overrides in prefers-color-scheme.
When everything works, read the page top to bottom on a phone-width window, then tab through it with the keyboard. Those two checks catch most real-world problems before any visitor does.