The time machine: one site in eight eras

The time machine is the course’s method: the same site is built in eight eras of the web, from the table layouts of 1996 to the AI site builders of 2025.

A train arrives

In 1895 the Lumière brothers filmed a fifty-second scene: a train pulling into the station at La Ciotat. Nothing else happens. The public first saw it in early 1896. According to legend, the audience jumped up and fled the screen in terror. Historians have found no account of such a panic from the time, so it is probably a good story and no more. But the legend lasts for a reason: for the first time, people saw life in motion, and it felt like magic.

The textbook’s home page has a prologue, and it is a little like that film. You answer three questions about your project, and your own site assembles itself in front of you: first as it would have been in 1991, then more and more modern, until it reaches today. The same words of yours, in different eras. If you skipped the prologue or want to see it again, the home page has a “Watch the prologue again” button.

Why learn through history

You could start with today’s tools: pick a builder, write a prompt, get a site. But then you wouldn’t understand what the builder did for you, and you couldn’t check its work. Every tool on the web appeared as an answer to someone’s tedious job:

• Writing HTML by hand, line after line, was slow and repetitive. Templates and content management systems appeared.
• A page laid out with tables broke on every new screen. Stylesheets came, and then flexible layout.
• A site on a “platform” became slow and easy to attack. Static pages came back, but now they were built automatically.

That’s why the course goes through the eras. In each one you build the same site the way it was done then. You feel for yourself what it was missing, and you see where the next step came from.

Check yourself: why does the course go through the eras instead of starting with today’s tools?

Because a tool makes sense once you know what tedious job it replaced. Then you can choose it for the task and check what it produces.

Eight eras

The course passes through eight eras. Each has its own “way to make a site”:

1. 1996. Markup and tables: the page is assembled from tables, the text is dressed up with the font tag, and a picture counts the visitors.
2. 2005. Styles move into a separate file. Floating boxes, gloss and rounded corners: “web 2.0”.
3. 2010. WordPress: a ready-made theme, plugins, and an editor for the site’s owner.
4. 2014. Responsive layout: one site rearranges itself for any screen, phone first.
5. 2019. A static site generator: the texts live in Markdown, and a command builds the site.
6. 2022. A headless CMS and Jamstack: the content is stored separately and reaches the site on request.
7. 2025. An AI builder: you describe the site in words, and it builds it.
8. Next. A brief and an interview: Iskin asks questions and builds a site and a service from the answers.

There were other eras in between: Flash intros around 2000, separate “mobile versions” at their own address, builders such as Wix and Squarespace. We’ll touch on them where they explain the next step.

Move the slider and see how your project would have looked in different eras. The words stay the same.

Era: 199119962000200520142025

Building the pages…

1991. Plain HTML written by hand: headings, paragraphs, links.

Check yourself: how is a 2025 AI builder different from WordPress in 2010?

In WordPress you pick a ready-made theme and fill it in. In an AI builder you describe the site in words, and it is built from the description right away, with no template to choose.

What stays the same

Look at the diagram closely. A page from 1991 and a page from 2025 look nothing alike, but they say the same thing:

• Who you are, or what the idea is.
• Who it’s for.
• What a visitor should do: call, book, buy, join, read.

These three sentences are the content of the site. Everything else, the colors, the fonts, the animations, the technology, is a way of showing that content. It changes every few years, and the content stays.

From this comes a practical rule you can use at work too: write the three sentences first, then choose a tool. If the words are unclear, a beautiful design won’t save them. In any era, a bad site is a site where you can’t tell what to do with it.

Check yourself: which of the three sentences decides what the main button on the page will be?

The third: what a visitor should do. The main button is that action.

What was wrong with each era

Every era had a flaw, and that flaw gave birth to the next era. In the following parts, each era gets a page called “what was wrong with it”: what has gone out of date and what is still true. For example, laying out a page with tables is a bad idea, but the habit of starting a page with one clear heading dates from 1991 and hasn’t gone anywhere.

The idea of the very first page hasn’t gone out of date at all. The first website, made at CERN, was exactly that: a description of the project and some links. You can still open its description from the link in the sources.

Do it now

1. If you haven’t seen the prologue yet, watch it on the home page. If you have, press “Watch the prologue again”.
2. Answer the three questions the way you’d answer a client or a friend: who you are, who it’s for and what a visitor should do.
3. Open settings and check that the fields “Who you are, or what the idea is” and “Who the site is for” hold your words. Adjust them if you need to: they go into every lesson that follows.
4. Press “Finish the lesson”.

You’ll write the whole brief, with sections, content, languages and tone, in the fourth lesson of this part. For now, three sentences are enough.