Document Structure Timeline
From the birth of HTML tags to responsive layouts and web components. The era-by-era answer to "how should we structure a document?"
Open timelineWeb Story for Makers
How does a website actually get made? Four stories, one hub
Way back, a "website" was just a page full of plain text. Over time, people started wishing out loud: "I want it to look prettier," "I want things to move when I point at them," "I want to build it faster." Those little wishes piled up, and the result is the colorful, living web we scroll through every day.
On this page we've split web making into four threads. Structure (how do we lay out the words and pictures?), Style (how do we make it pretty?), Motion (how do we make it feel alive?), and Tools (what did people use to build it more easily?). Each story walks through the same loop—what was annoying people, and how they fixed it.
Start with a light skim of the big picture, then wander into whichever thread catches your eye. Don't worry if some terms sound scary—we'll tell you what the people of that era were actually thinking, in plain language.
Four Web Making Stories
People building the web asked different questions at the same time. How should we organize the structure? How should we dress up the screen? How do we make motion feel natural? How do tools help us work together? Each category is a timeline answering one of those questions.
Styling Evolution Timeline
CSS, Flexbox, Grid, design systems, and container queries. A collection of experiments in making the screen easier on the eyes.
Open timelineBrowser Interaction Timeline
JavaScript, Ajax, SPAs, Service Workers, WebAssembly, WebGPU. The moments when the web learned to respond like a real app.
Open timelineWeb Tools Timeline
From FTP clients and Dreamweaver to npm, bundlers, Vite, and AI copilots, explore how toolchains accelerated delivery.
Open timelineNo discipline grows alone
Better structure empowered styling. Immersive interaction demanded smarter tools. Whenever you finish one timeline, another will point toward the next leap. Keep this hub bookmarked whenever you need a fresh perspective.
Further Reading
Key archives and documentation that informed every timeline in this web making series.