How this site was made

This site practices what it preaches — at least where it counts. The pages you see are built with plain HTML, restrained CSS, and just enough vanilla JavaScript to keep things functional. This page explains how it was made.

HTML — Skeleton, not sculpture

HTML is the foundation, not the garnish. If it’s not meaningful without CSS or JavaScript, it’s not meaningful. So we use proper tags in proper places, structure things for assistive tech, and let the markup do its job — which, shockingly, isn’t to look pretty.

  • Real landmarks, properly used. One <header>, one <main>, one <footer>. Not a suggestion.
  • Skip links, actually functional. Invisible until needed. Keyboard users rejoice.
  • Readable without styles. Loads like it’s 1999, even if the CSS goes AWOL.
  • Headings in logical order. H1, H2, H3 — not H4 for bold text.
  • No meaningless div soup. Tags mean things. Use the ones that do.
  • Whitespace respected. Code’s for humans too, not just the parser.
  • Glossary in a <dl>. Because that’s what it’s for. Imagine that.

CSS — Eat your vegetables

CSS can help accessibility, or can sabotage it. So the critical rules—layout, focus, legibility—go inline in the <head>, where they’re guaranteed to load. Everything else is cosmetic. If the external stylesheet fails, the site still works. Pretty is optional. Accessible is not.

  • 60 ch max‑width because reading a wall‑of‑text is easier when it isn’t the Great Wall of China.
  • 18 px base font with a civilized line‑height (1.8). If you need a microscope to read your own site, you’ve already failed.
  • Link treatment: a hair‑line border-bottom that fattens to 3 px on hover/focus. Homage to GOV.UK.
  • Theme and high‑contrast layers via two data‑attributes. No fancy CSS variables? I’m not running for office here.

JavaScript — The reluctant butler

JavaScript is here on sufferance. The main content works fine without it, because a website shouldn’t collapse into a smoking heap just because a script didn’t load. When it is used, it behaves itself:

  • Non-essential to the main act. The core content and functionality are pure HTML and CSS. Pull the plug on JavaScript, and you still get the whole show.
  • If it needs JavaScript, JavaScript puts it there. Interface elements that require scripting are injected by the script itself, so nothing sits around broken when scripts are off.
  • Vanilla only. No frameworks. No extras.
  • Menu toggle. Collapses navigation, preserves focus, and doesn’t panic if scripts vanish mid-click.
  • Theme and contrast switcher. Twiddles a couple of data-* attributes, remembers your choices in localStorage, and quietly accepts its fate if storage is disabled.

A final word

This whole contraption is a demonstration—a crash-test dummy for semantic HTML, minimal CSS, and vanilla JavaScript—not a golden template handed down from Mount W3C. If you find a nit to pick, congratulations: you’ve understood the exercise. Please close your bug report with “works as intended” and move on.

Back to the top