How this textbook works

“Through Time” is a web textbook whose lessons are linked by a concept map, and whose material sticks through recall and spaced review of cards.

A map, not a table of contents

In an ordinary book the chapters come one after another. Here the lessons are linked through ideas. The lesson on links builds on the lesson on tags, and the lesson on design systems builds on the lessons on color and type. Those links are drawn on the map: each lesson is a point, and the lines show what follows from what.

That’s why some lessons on the map are open and others are locked. A locked lesson isn’t forbidden. It simply builds on something you haven’t seen yet, and it opens as soon as you’ve done the lessons that explain the ideas it needs.

You can go in order, or jump to any part once everything it needs is done. The “Continue” button on the home page always takes you to the first open lesson that’s waiting for you.

Check yourself: why might a lesson be locked?

Because it uses ideas that other lessons explain, and you haven’t done those lessons yet.

What a lesson is made of

Every lesson is built the same way, so you don’t spend effort working out where things are.

1. Why. One sentence on what you’ll be able to do after the lesson.
2. Theory. Short parts, each ending with a “Check yourself” question.
3. Live diagram. Something to touch: drag a slider, press a button, see how a thing works.
4. Practice. You build a piece of your own site, and the textbook checks straight away whether it works.
5. Test. A few questions. When an answer is wrong, you’re told why and where to look.
6. Cards. Three to five cards to review later.
7. Sources. Where the material comes from and where to read more. Every link is open to all.
8. Next. Which lessons this one opens.

Not every lesson has practice from the very start: in the first three lessons you fill in the description of your project, and the editor appears in the fourth.

Why you recall here instead of rereading

There is an awkward fact about memory. When you reread a text, you feel you know it, because it’s right in front of you. But recognizing and recalling are different things. Recognizing is easy. Recalling is what life asks of you: at work, in a conversation, when you write code and there are no notes beside you.

Memory researchers call this the testing effect: people who try to recall material remember it noticeably better than people who simply reread it. The attempt itself, even when it fails, strengthens the memory.

The way the lessons are built grows out of this. That is what the question after each part of the theory is for: close your eyes or cover the answer, try to answer, then check. The test and the cards work the same way.

Check yourself: how is recalling different from recognizing?

Recognizing is seeing something familiar. Recalling is bringing it back from memory with no prompt. It’s recalling that makes things stick.

Cards and spaced repetition

Even what you recalled today will be partly forgotten in a week. Forgetting follows a curve: fast in the first days, then slower and slower. If you review at the right moment, the curve climbs back up, and from then on you forget more slowly. So you can review at growing intervals: a day, three days, a week, a month.

This is called spaced repetition. You don’t need to keep a schedule in your head: after each lesson its cards go into the Review section, and there the app shows you the cards that are due.

Move the interval on the diagram and watch how the result changes.

every dayevery 3 daysevery 7 daysevery 14 daysevery 21 daysevery 30 days

With reviews (20 reviews), by day 60: 100%. Without reviews: under 1%. The dots on the chart are the days you looked at the card. Too rarely (once in 30 days) and the card is almost entirely forgotten in between; too often (every day) and the effort is wasted. This is a sketch; the real schedule is worked out by the FSRS algorithm.

The schedule is worked out by FSRS, an algorithm whose code and description are open. Only one thing is asked of you: say honestly how well you remembered each card. There are four buttons:

• Again: you couldn’t remember it at all. The card comes back soon.
• Hard: you remembered it, with difficulty.
• Good: you remembered it.
• Easy: you remembered it at once, with no effort.

If you press “Easy” when you don’t really remember, the card won’t come back for a long time, and you’ll forget it. Here, dishonesty only fools you.

Check yourself: what happens if you press “Easy” on a card you’d forgotten?

The next review is pushed too far away, and by then you’ll have forgotten the card.

Practice: one site through the eras

You’ll build the same site again and again, in each era of the web with that era’s tools: in 1996 with nothing but markup, in 2005 with a separate stylesheet, then with a site builder, then responsive, and so on up to today. That way you see not only how to do it but why the web turned out the way it did. More on this in the next lesson.

Your code runs in a closed “sandbox”: the page shows in the preview window, but it can’t send anything to the internet and can’t see anything but itself. The list of checks beside the window shows at once what already works.

Echo, and what to do when you’re stuck

Echo is your guide through the course, and you’ll meet them beside the practice. Echo gives hints in steps: first a nudge, then a more specific hint. When a check doesn’t pass, Echo explains what exactly it wants. You can look at the finished solution, but only after you confirm you want to: it shows you how it differs from yours.

If you’d like to ask Echo questions in your own words, you can enter a key of your own for an AI service in settings. Without one, Echo answers with prepared hints, and that costs nothing. There is more about the key in the fifth lesson.

Where your progress lives

There’s no sign-up here, and no server keeping your data. Everything you do is kept by your browser, on your device. That’s convenient and private, but it has a price: if you clear the site’s data in your browser or change computers, your progress is gone.

So now and then, save your progress to a file: “Settings”, then “Save progress”. The same file moves your progress to another computer. There is no other copy.

Check yourself: how do you move your progress to another computer?

Save it to a file in settings, then on the other computer open the textbook and load that file in the same place.

Do it now

Three small things this lesson is for:

1. Open the map and find a lesson whose title has a word from your project or your profession in it. See which lessons lead to it.
2. Open settings and, in the field “Who you are, or what the idea is”, write one sentence about your project. Just one for now: you’ll fill in the whole brief in the third lesson. If you don’t have a project, leave the example.
3. Press “Finish the lesson” below. Its cards go straight into Review. Answer three of them today, and the rest later.