Through Time

Course map

Seventeen parts, from how the internet works to the agentic web. A lesson opens once you’ve done everything it builds on.

  • Done
  • Open
  • Waiting for other lessons

0 Start

How to learn here, and what your site will be about.

  1. How this textbook works 12 minutes
  2. The time machine: one site in eight eras first: how the course works
  3. The workbench: editor, preview and checks first: the time machine
  4. The brief: your project in seven fields first: the workbench
  5. Your data stays on your device: storage, export, your own key first: the project brief

1 How the internet works

From ARPANET to the web: packets, DNS, HTTP and how a browser draws a page.

  1. From ARPANET to the World Wide Web first: the eras of the web and their tools
  2. The browser wars, dot-coms, web 2.0, platforms and the Runet first: from ARPANET to the World Wide Web
  3. Packets, IP and TCP: how data gets there first: the internet versus the web
  4. URLs, domain names and registrars first: IP addresses and TCP
  5. DNS: from the resolver to the root and back first: domain names and registrars
  6. HTTP: requests, responses, status codes and headers first: the path of a DNS query
  7. HTTPS and TLS: encryption and trust first: HTTP requests and responses
  8. How a browser draws a page first: HTTP status codes and headers, HTTPS and TLS

2 HTML

The document, tags, meaningful markup, links, forms and accessibility.

  1. Your first page: tags, a heading, a link first: the workbench, how a browser draws a page
  2. A 1996 page: tables, font and a counter first: the structure of an HTML document, tags and attributes
  3. Semantic markup and headings first: table layout and the spacer GIF, heading
  4. Links, images and media first: semantic elements, the anatomy of a URL
  5. Tables: for data, not for layout first: table layout and the spacer GIF, semantic elements
  6. Forms: how a person sends something first: links and anchors, HTTP requests and responses, HTTPS and TLS
  7. The head, meta tags and link previews first: the structure of an HTML document, HTTP status codes and headers
  8. Accessibility: a site for everyone first: forms and fields, images and alt text, headings and the document outline
  9. Site languages: lang, hreflang and translation first: the head and meta tags, accessibility basics

3 CSS

The cascade, boxes, typography, color, flexbox, grid and responsive layout.

  1. Selectors and the cascade: styles in a separate file first: semantic elements, tags and attributes
  2. The box model, units and float layout first: the cascade and inheritance
  3. Typography and color first: CSS units, the cascade and inheritance
  4. Flexbox: laying things out in a row or a column first: the box model, float layout and the holy grail
  5. Grid: a two-dimensional layout first: Flexbox
  6. Responsive layout: media queries and container queries first: Grid, the head and meta tags
  7. Modern CSS: variables, nesting, :has() and layers first: specificity, color formats, container queries
  8. Animation and motion, with respect for people first: custom properties, accessibility basics

4 Design and design systems

The history of web design, hierarchy, color, tokens and how to read a design system.

  1. Thirty years of web design: from gray backgrounds to glass first: from ARPANET to the World Wide Web, from the dot-com bubble to the platforms, A separate stylesheet, float layout and the holy grail
  2. What dates a site: outdated and modern first: the history of web design, text contrast ratios, the head and meta tags
  3. Hierarchy, grid and empty space first: what makes a site look dated, Grid, typography, custom properties
  4. The type scale: sizes on a ladder, not by guesswork first: visual hierarchy, typography, CSS units
  5. Color systems and contrast: a palette you can read first: visual hierarchy, color formats, text contrast ratios, custom properties
  6. What a design system is, and what it is made of first: visual hierarchy, the color system, the type scale
  7. How to read someone else’s design system: Material, Apple, Fluent first: what a design system is made of, contrast in a color system
  8. Systems of governments and big companies: GOV.UK, Carbon, Atlassian first: reading someone else’s design system, forms and fields, accessibility basics
  9. Product and “headless” systems: Polaris, Primer, Radix, shadcn/ui, Tailwind first: reading someone else’s design system, custom properties
  10. Open systems from Russia, and what a language does to an interface first: product and headless design systems, page language and hreflang
  11. Design tokens: names instead of numbers first: product and headless design systems, the color system, the type scale, custom properties
  12. Atomic design: atoms, molecules, components and their states first: design tokens, semantic elements
  13. Documenting and governing a system: the component page, versions, contributions first: atomic design, A component and its states
  14. From design to code: Figma, handoff and working with AI first: design tokens, A component and its states
  15. The tells of a template page, and a small design system of your own first: handing a design over to a developer, running a design system, what makes a site look dated, what a design system is made of

5 JavaScript

Values, functions, the DOM, events, fetch and components.

  1. Values, functions, arrays and objects first: the structure of an HTML document, how a browser draws a page
  2. The DOM: a page that can be changed first: arrays and objects, semantic elements
  3. Events: reacting to clicks, typing and keys first: the DOM, forms and fields
  4. Asynchrony, fetch and JSON first: events and bubbling, HTTP requests and responses
  5. Modules, npm and bundling first: fetch and requests to a server, the anatomy of a URL
  6. Why frameworks exist first: the DOM, events and bubbling, ES modules
  7. A Svelte component first: reactivity, ES modules
  8. Progressive enhancement first: fetch and requests to a server, events and bubbling, forms and fields

6 Servers and languages

What a web server is, why each language lives where it does, and what an API is.

  1. What a web server is first: HTTP requests and responses, the anatomy of a URL, the path of a DNS query
  2. Static and dynamic first: the web server, the structure of an HTML document
  3. From CGI to PHP and application servers first: static and dynamic, HTTP requests and responses
  4. Why each language has its own niche first: CGI, the application server
  5. APIs and REST: how programs talk to each other first: HTTP requests and responses, fetch and requests to a server, JSON
  6. GraphQL and webhooks first: REST
  7. Authentication in plain words first: REST, HTTPS and TLS
  8. Choosing a stack for a project first: where each server-side language lives, REST, authentication, webhooks

7 Data

Databases, SQL on a real Postgres in the browser, search and privacy.

  1. What a database is and why a site needs one first: static and dynamic, JSON
  2. SQL: reading and writing data first: the relational model
  3. Links between tables: JOIN and normalization first: querying with SQL
  4. Indexes and transactions first: joining tables, writing data with SQL
  5. Document, key-value and graph databases: when, and when not first: the relational model, indexes
  6. Search: full-text and vector first: indexes, how to choose a database
  7. Privacy by design: what to store and where first: transactions and ACID, writing data with SQL, authentication

8 CMSs, generators and Jamstack

WordPress, website builders, static site generators and headless CMSs.

  1. What a CMS is, and why a site needs one first: static and dynamic, the relational model, the project brief
  2. WordPress: themes, plugins and the era of 2010 first: what a CMS is, the content model, semantic elements, the box model
  3. What breaks in WordPress, and what it really costs first: WordPress themes and plugins
  4. Website builders and store platforms, from Wix to Tilda first: what a CMS is, the content model, forms and fields
  5. Static site generators and Markdown first: what a CMS is, semantic elements, responsive layout and mobile first, HTTP requests and responses
  6. Headless CMS: when content lives apart from the site first: the content model, the static site generator, REST, fetch and requests to a server
  7. Jamstack: the build, the CDN and the webhook first: the headless CMS, the static site generator
  8. How to choose: a decision tree for your project first: the cost of owning WordPress, website builders and their limits, store platforms, how static site generators differ, Jamstack

9 Infrastructure

Hosting, domains, certificates, CDNs, containers and CI/CD.

  1. Where a site lives: from shared hosting to the cloud first: HTTP requests and responses, the web server, static and dynamic, how to choose a CMS or a generator for a project
  2. Domains and DNS in practice: your site’s zone and a move with no downtime first: the path of a DNS query, DNS records and TTL, domain names and registrars, kinds of hosting
  3. HTTPS in practice: the certificate, renewal and the usual breakages first: HTTPS and TLS, certificates and trust, A domain and DNS in practice
  4. CDN, serverless and the edge: a site closer to the visitor first: HTTP status codes and headers, HTTP requests and responses, kinds of hosting, REST
  5. Containers and Docker: the same box everywhere first: the web server, kinds of hosting, the static site generator
  6. Kubernetes in plain words, and when you don’t need it first: containers and Docker, how to choose hosting for a project and a budget
  7. CI/CD: a deploy on every commit first: Dockerfile and Compose, kinds of hosting, rebuilding on a webhook, npm and bundling
  8. Deploying your own site: GitHub Pages, Vercel or an ordinary host first: CI/CD, A domain and DNS in practice, TLS certificates and Let’s Encrypt in practice, how to choose hosting for a project and a budget
  9. Backups, monitoring and where personal data may be kept first: kinds of hosting, CI/CD, publishing your own site, personal data localization and transfers

10 Writing for the web

How people read on screens, plain style, headlines and microcopy.

  1. How people read on a screen first: the project brief, semantic elements, visual hierarchy
  2. Plain, informative style: facts instead of judgments first: reading on screens
  3. The inverted pyramid and headlines first: plain informative style, open Graph and link previews
  4. Microcopy and UX writing first: plain informative style, forms and fields
  5. Tone of voice and a style guide first: microcopy and UX writing
  6. Legal and expert texts first: tone of voice and a style guide, privacy by design
  7. Editing: a biography before and after first: what a headline promises, expert writing

11 Copywriting and marketing frameworks

AIDA, PAS, JTBD, StoryBrand, funnels and the value ladder.

  1. Levels of awareness and the Ogilvy principles first: what a headline promises, the project brief
  2. AIDA, AIDCA, ACCA, PAS, PASO and SLAP first: the five levels of awareness, microcopy and UX writing
  3. BAB, 4U, 4P, FAB and QUEST first: AIDA
  4. JTBD and the Value Proposition Canvas first: Before–After–Bridge (BAB)
  5. StoryBrand and hook, story, offer first: JTBD and job stories
  6. Persuasion and its limits first: StoryBrand (SB7), expert writing
  7. STP, 4P and 7P, and the customer journey map first: the Value Proposition Canvas
  8. The funnel, See–Think–Do–Care and RACE first: the customer journey map
  9. AARRR, the flywheel, North Star, ICE and RICE first: the funnel
  10. The value ladder and offers first: the funnel, dark patterns and where manipulation begins, legal texts in plain words

12 Storytelling

Why stories work, and a dozen ways to tell yours.

  1. Why stories work first: the seven fields of the brief
  2. Three acts, Freytag’s pyramid and Duarte’s zigzag first: narrative transportation
  3. The hero’s journey: who is the hero on your site first: the three acts
  4. Harmon’s circle and the critique of the hero’s journey first: the hero’s journey
  5. Short forms: ABT, the Pixar spine and kishōtenketsu first: the three acts
  6. StoryBrand as the skeleton of a page first: the hero’s journey, StoryBrand (SB7)
  7. A story on a landing page first: StoryBrand as the skeleton of a page, the three acts
  8. The brand story and the founder’s story first: the plot of a landing page
  9. The case study: STAR, and before and after first: And–But–Therefore (ABT), the brand story
  10. A story told with data: the conclusion headline and one accent first: the three acts
  11. Visual storytelling and scrollytelling first: telling a story with data, the three acts
  12. An expert who doesn’t boast: stories and advertising rules first: the brand story, the case study
  13. Which version works better: testing on readers first: an expert’s story without boasting, And–But–Therefore (ABT)

13 Marketing and growth

Automation, email, social media, SEO and GEO, and the rules that apply.

  1. Automation: triggers, segments, cascades first: the funnel, the lead magnet and the tripwire
  2. Email: deliverability, consent, unsubscribe first: marketing automation, DNS records and TTL, forms and fields, microcopy and UX writing
  3. The value ladder in practice: the page, the thank-you, the count first: email and the law, the core offer and the upsell, dark patterns and where manipulation begins
  4. Social networks and messengers: channels, a content plan, UTM tags first: And–But–Therefore (ABT), tone of voice and a style guide, marketing automation
  5. SEO: crawling, indexing, ranking first: HTTP status codes and headers, the head and meta tags, semantic elements, what a headline promises
  6. Technical SEO and JSON-LD markup first: how search engines rank pages, page language and hreflang
  7. GEO: getting into AI answers first: how search engines rank pages, semantic elements, the inverted pyramid
  8. Local SEO: the business listing and LocalBusiness markup first: technical SEO, structured data, the copywriter’s 4 Ps
  9. Paid traffic and ad labeling: FTC, ASA and the DSA first: social media by market, how search engines rank pages, the 4 U’s for headlines, UTM tags

14 Metrics and behavior

Bounces, conversions, cohorts, A/B tests and their traps.

  1. What drives clicks and retention first: reading on screens, visual hierarchy, the Fogg Behavior Model
  2. Google Analytics 4: a counter, events, key events first: events and bubbling, the head and meta tags, HTTP status codes and headers
  3. Bounces, time, scroll depth and CTR first: setting up an analytics counter, visits and events
  4. Conversion, funnels, cohorts and retention first: how bounces are defined, the funnel, AARRR (pirate metrics)
  5. Metrics that mislead: vanity numbers and Goodhart’s law first: conversion and micro-conversions, the North Star Metric
  6. A/B tests and their traps first: attention and behavior, conversion and micro-conversions, vanity metrics and Goodhart’s law
  7. Heatmaps, session recordings and cookie consent first: setting up an analytics counter, legal texts in plain words, privacy by design
  8. HEART, the North Star and a dashboard first: conversion and micro-conversions, cohorts and retention, the North Star Metric, vanity metrics and Goodhart’s law

15 Quality and the law

Speed, accessibility, security, data protection, advertising rules and a launch checklist.

  1. Speed: Core Web Vitals and a budget first: how a browser draws a page, images and alt text, responsive layout and mobile first, events and bubbling, the CDN, web fonts
  2. Accessibility in depth: WCAG 2.2 and a walkthrough first: accessibility basics, ARIA and the first rule of ARIA, text contrast ratios, contrast in a color system, respecting prefers-reduced-motion
  3. Keyboard and screen reader: name, role, state first: WCAG 2.2, forms and fields, events and bubbling
  4. Testing a site: what an end-to-end test is first: forms and fields, events and bubbling, HTTP status codes and headers, CI/CD, the keyboard and screen readers
  5. Site security: OWASP, HTTPS, updates and passwords first: authentication, sessions and cookies, HTTPS and TLS, TLS certificates and Let’s Encrypt in practice, querying with SQL, CI/CD
  6. Form security: server-side checks and spam first: the basics of site security (OWASP), form validation and consent, serverless and edge functions
  7. Personal data law: GDPR, UK GDPR and US state laws first: forms and fields, privacy by design, personal data localization and transfers, form security and spam, legal texts in plain words
  8. A privacy notice and consent on a site first: personal data law, legal texts in plain words, form validation and consent, page language and hreflang
  9. Cookies, trackers and an honest banner first: personal data law, setting up an analytics counter, the ethics of analytics, sessions and cookies, HTTP status codes and headers
  10. Copyright: photos, fonts, texts and licenses first: images and alt text, expert writing, web fonts
  11. Advertising law and the rules of your profession first: an expert’s story without boasting, labeling ads, expert writing
  12. Consumer protection: selling and offers online first: advertising rules and professional ethics, A privacy notice and consent on a site, forms and fields, legal texts in plain words
  13. Accessibility and the law, and visitors from other countries first: WCAG 2.2, the keyboard and screen readers, personal data law, cookies and trackers, page language and hreflang
  14. The pre-launch checklist first: core Web Vitals, WCAG 2.2, end-to-end testing, security headers and HTTPS, form security and spam, personal data law, A privacy notice and consent on a site, cookies and trackers, copyright and licenses, advertising rules and professional ethics, consumer protection, accessibility and the law, technical SEO, backups and the 3-2-1 rule

16 AI and the future of the web

AI site builders, vibe coding, the agentic web and Iskin.

  1. AI site builders: bolt, Lovable, v0, Framer AI, Wix AI, and questions for any of them first: how to choose a CMS or a generator for a project, website builders and their limits, A Svelte component, publishing your own site, the tells of a page an AI made
  2. Vibe coding: what it gives and what it costs first: AI site builders, the basics of site security (OWASP), form security and spam
  3. Prompts as briefs: how to give an AI a task first: AI site builders, the project brief, the Value Proposition Canvas
  4. Checking what an AI made: mistakes that look plausible first: vibe coding, the prompt as a brief, the tells of a page an AI made, the pre-launch checklist
  5. Capstone: a mini-builder “brief, structure, copy, code” first: the prompt as a brief, reviewing what an AI made, fetch and requests to a server, JSON, REST, authentication
  6. The agentic web: MCP, A2A and agents as visitors first: the builder pipeline, describing an API (OpenAPI), webhooks, getting into AI answers (GEO), the basics of site security (OWASP)
  7. Capstone with Iskin: an interview, a site and a critical review first: reviewing what an AI made, the agentic web, the builder pipeline, checking accessibility, core Web Vitals
  8. The internet of intelligence, the launch and where to go next first: the Iskin flow, the agentic web, the pre-launch checklist, A project dashboard