The modern web, one knob at a time.

00Three languages, three jobs

The whole web is three files talking to each other. HTML says what exists. CSS says what it looks like. JavaScript says what happens when you touch it. Nothing else you learn later changes this.

Turn the knobs and watch one little card get built up, layer by layer:

01Everything on a page is a box

Nothing on a webpage is a free-floating shape. Every element is a rectangle with four layers: content, then padding (inside space), then border, then margin (outside space). Ninety percent of "why is this thing in the wrong place" is a padding/margin question.

02The anatomy of a page

Almost every website is the same five regions. A header at the top, a nav to get around, the main content, an optional aside for secondary stuff, and a footer at the bottom. Learn this skeleton once and you can read the source of any site on the web.

03The blocks every site is made of

You have seen these eight things a thousand times. Navbar, hero, columns, card grid, accordion, tabs, breadcrumb, footer. Almost every page you will ever build is a stack of these. Pick one and it gets built in front of you, with the code that made it.

Columns: the three ways

Most page layouts are just "how do I split this width?". There are only three answers you need, and you can see all three below.

04Flexbox — arranging things in a line

Flexbox lays boxes out along one axis. You pick a direction (a row or a column), then say how the leftover space should be shared. Navbars, toolbars, button groups, centring anything — that's flexbox. It's the single most-used layout tool on the web.

05CSS Grid — arranging things in two directions

Grid is flexbox's two-dimensional sibling. You define columns and rows up front, then drop items into the cells. Page layouts, dashboards, photo galleries, magazine spreads. Rule of thumb: flexbox for a line of things, grid for a layout.

06Responsive: one page, every screen

You don't build a mobile site and a desktop site. You build one page that bends. Two ideas do most of the work: fluid units that scale continuously, and media queries that snap to a different layout past a certain width.

07Container queries — the modern upgrade

This is the big shift of the last few years. A media query asks "how wide is the screen?" A container query asks "how wide is the space I was dropped into?" That means one component can be genuinely reusable: put it in a sidebar and it goes compact, put it in a main column and it goes wide — no page-level knowledge required.

08Inputs & controls — the browser gives you a lot for free

Before you install a component library, check what's already built in. Modern browsers ship sliders, colour pickers, date pickers, search boxes, switches and progress bars — all accessible, keyboard-friendly and translated into every language, at zero cost. Below is a working control panel using nothing but native HTML.

09Dialogs, popovers & disclosure — no library needed

Modals used to take 200 lines of JavaScript. Now <dialog>, the popover attribute and <details> handle focus trapping, Escape-to-close, click-outside and stacking for you. This is some of the newest, most useful stuff in the platform.

10Forms that validate themselves

The browser is a validation engine you already own. Mark a field required, give it type="email" or a pattern, and CSS can style the valid/invalid states with :user-valid — which politely waits until the user has actually finished typing before shouting at them.

11Colour, depth & glass

Visual polish is mostly four properties. Gradients for colour interest, box-shadow for depth, backdrop-filter for that frosted-glass look, and border-radius for softness. Turn the knobs until it looks like an app you'd want to use.

12Transition & animation

A transition is CSS saying "don't jump — glide." You change a value, and the browser fills in every frame between the old and new. Timing and easing are what separate "cheap" from "expensive-feeling". Under ~150ms feels twitchy; over ~500ms feels sluggish.

13Scroll-driven effects

Scroll position is now an animation timeline. Things that used to need a JavaScript library — progress bars, reveal-on-scroll, parallax, scroll-snapping carousels — are CSS one-liners in modern browsers, and they run on the compositor so they never stutter.

1. Scroll progress. That bar pinned to the top of your window is animation-timeline: scroll() — three lines of CSS, no JS.

2. Reveal on scroll. These cards fade and rise as they enter the viewport, driven by animation-timeline: view():

3. Scroll snap. Drag this sideways — it locks neatly to each panel, again pure CSS:

14Events — how a page listens

JavaScript is mostly waiting. You tell the browser "when this happens to that element, run this function". Clicks, typing, hovering, scrolling, resizing — every interactive thing you've ever used is that one pattern, repeated.

15State drives the UI

This is the idea that everything modern is built on. Don't poke at the page directly. Keep a plain object — the state — that describes what's true right now. Change the state, and let one render() function redraw from it. React, Vue, Svelte and Flutter are all elaborate versions of this single sentence.

16Putting it together: a real reactive app

Everything above, in one working thing. Grid layout, native inputs, events, state, transitions and derived data (that filter and counter aren't stored — they're computed from state every render). About 40 lines of JavaScript.

172026 CSS superpowers

If you learned CSS more than a couple of years ago, this section is the update. Each of these replaced something that used to require JavaScript, a build step, or a horrible hack.

Play with :has() — the parent selector

Tick a card. The card restyles itself because it has a checked input inside it — and the grid restyles because it has a selected card inside it. No JavaScript is running here at all.

/* pure CSS — the parent reacts to its child */
.has-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.has-grid:has(input:checked)  { background: var(--accent-soft); }
.has-card:not(:has(input:checked)) { opacity: .55; }

View Transitions — app-like state changes

Click to reorder. The browser takes a snapshot before and after, then animates every item to its new home automatically. This is document.startViewTransition(), and it works across full page navigations too.

Fluid type with clamp()

One line replaces four breakpoints. Drag to resize the box — the heading scales continuously between a floor and a ceiling.

18Cheat sheet, then go build

display:grid;
place-items:center;

display:grid;
grid-template-columns:
 repeat(auto-fit,minmax(220px,1fr));

display:flex;
justify-content:space-between;
align-items:center;

font-size:clamp(1rem,2.5vw,2rem);

transition:transform .2s ease;
&:hover{transform:translateY(-3px)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
}

Six habits that make you look senior

1. Use the right element. <button> for actions, <a> for navigation. Accessibility mostly comes free if you do.
2. Design mobile-first. Write the narrow layout, then add complexity upward with min-width queries.
3. Use CSS custom properties for colour and spacing. One change updates the whole site.
4. Animate transform and opacity only. Everything else risks jank.
5. Test with the keyboard. Tab through your page. If you can't reach something, neither can a lot of your users.
6. Check caniuse.com and Baseline before shipping a shiny new feature, and provide a plain fallback.

Putting this online (Cloudflare Pages)

This whole site is a single index.html with no build step, so deploying is genuinely a drag-and-drop:

1. Put index.html in a folder on its own.
2. Go to the Cloudflare dashboard → Workers & Pages → Create → Pages → Upload assets.
3. Drag the folder in, name the project, hit deploy. You get a free *.pages.dev URL with HTTPS and a global CDN.
4. Prefer git? Push the folder to GitHub and connect the repo instead — leave the build command empty and set the output directory to the folder. Every push then redeploys itself.
5. CLI alternative: npx wrangler pages deploy . from inside the folder.