The Web, End to End
How the web works, from the first page of 1991 to agents. In each era you build your own site again.
A textbook for people who have never built a site. You describe a project of your own and build it in each era of the web, and at the end you set an AI the task and review the result with everything you have learned.
- Your streak starts with your first lesson
- 0 of 154 lessons
- 0 XP
Your progress is kept only in this browser. Save it to a file in settings. Save progress
Watch the prologue againContents
Part 0 Start
How to learn here, and what your site will be about.
Part 1 How the internet works
From ARPANET to the web: packets, DNS, HTTP and how a browser draws a page.
- From ARPANET to the World Wide Web
- The browser wars, dot-coms, web 2.0, platforms and the Runet
- Packets, IP and TCP: how data gets there
- URLs, domain names and registrars
- DNS: from the resolver to the root and back
- HTTP: requests, responses, status codes and headers
- HTTPS and TLS: encryption and trust
- How a browser draws a page
Part 2 HTML
The document, tags, meaningful markup, links, forms and accessibility.
- Your first page: tags, a heading, a link
- A 1996 page: tables, font and a counter
- Semantic markup and headings
- Links, images and media
- Tables: for data, not for layout
- Forms: how a person sends something
- The head, meta tags and link previews
- Accessibility: a site for everyone
- Site languages: lang, hreflang and translation
Part 3 CSS
The cascade, boxes, typography, color, flexbox, grid and responsive layout.
- Selectors and the cascade: styles in a separate file
- The box model, units and float layout
- Typography and color
- Flexbox: laying things out in a row or a column
- Grid: a two-dimensional layout
- Responsive layout: media queries and container queries
- Modern CSS: variables, nesting, :has() and layers
- Animation and motion, with respect for people
Part 4 Design and design systems
The history of web design, hierarchy, color, tokens and how to read a design system.
- Thirty years of web design: from gray backgrounds to glass
- What dates a site: outdated and modern
- Hierarchy, grid and empty space
- The type scale: sizes on a ladder, not by guesswork
- Color systems and contrast: a palette you can read
- What a design system is, and what it is made of
- How to read someone else’s design system: Material, Apple, Fluent
- Systems of governments and big companies: GOV.UK, Carbon, Atlassian
- Product and “headless” systems: Polaris, Primer, Radix, shadcn/ui, Tailwind
- Open systems from Russia, and what a language does to an interface
- Design tokens: names instead of numbers
- Atomic design: atoms, molecules, components and their states
- Documenting and governing a system: the component page, versions, contributions
- From design to code: Figma, handoff and working with AI
- The tells of a template page, and a small design system of your own
Part 5 JavaScript
Values, functions, the DOM, events, fetch and components.
Part 6 Servers and languages
What a web server is, why each language lives where it does, and what an API is.
Part 7 Data
Databases, SQL on a real Postgres in the browser, search and privacy.
Part 8 CMSs, generators and Jamstack
WordPress, website builders, static site generators and headless CMSs.
- What a CMS is, and why a site needs one
- WordPress: themes, plugins and the era of 2010
- What breaks in WordPress, and what it really costs
- Website builders and store platforms, from Wix to Tilda
- Static site generators and Markdown
- Headless CMS: when content lives apart from the site
- Jamstack: the build, the CDN and the webhook
- How to choose: a decision tree for your project
Part 9 Infrastructure
Hosting, domains, certificates, CDNs, containers and CI/CD.
- Where a site lives: from shared hosting to the cloud
- Domains and DNS in practice: your site’s zone and a move with no downtime
- HTTPS in practice: the certificate, renewal and the usual breakages
- CDN, serverless and the edge: a site closer to the visitor
- Containers and Docker: the same box everywhere
- Kubernetes in plain words, and when you don’t need it
- CI/CD: a deploy on every commit
- Deploying your own site: GitHub Pages, Vercel or an ordinary host
- Backups, monitoring and where personal data may be kept
Part 10 Writing for the web
How people read on screens, plain style, headlines and microcopy.
Part 11 Copywriting and marketing frameworks
AIDA, PAS, JTBD, StoryBrand, funnels and the value ladder.
- Levels of awareness and the Ogilvy principles
- AIDA, AIDCA, ACCA, PAS, PASO and SLAP
- BAB, 4U, 4P, FAB and QUEST
- JTBD and the Value Proposition Canvas
- StoryBrand and hook, story, offer
- Persuasion and its limits
- STP, 4P and 7P, and the customer journey map
- The funnel, See–Think–Do–Care and RACE
- AARRR, the flywheel, North Star, ICE and RICE
- The value ladder and offers
Part 12 Storytelling
Why stories work, and a dozen ways to tell yours.
- Why stories work
- Three acts, Freytag’s pyramid and Duarte’s zigzag
- The hero’s journey: who is the hero on your site
- Harmon’s circle and the critique of the hero’s journey
- Short forms: ABT, the Pixar spine and kishōtenketsu
- StoryBrand as the skeleton of a page
- A story on a landing page
- The brand story and the founder’s story
- The case study: STAR, and before and after
- A story told with data: the conclusion headline and one accent
- Visual storytelling and scrollytelling
- An expert who doesn’t boast: stories and advertising rules
- Which version works better: testing on readers
Part 13 Marketing and growth
Automation, email, social media, SEO and GEO, and the rules that apply.
- Automation: triggers, segments, cascades
- Email: deliverability, consent, unsubscribe
- The value ladder in practice: the page, the thank-you, the count
- Social networks and messengers: channels, a content plan, UTM tags
- SEO: crawling, indexing, ranking
- Technical SEO and JSON-LD markup
- GEO: getting into AI answers
- Local SEO: the business listing and LocalBusiness markup
- Paid traffic and ad labeling: FTC, ASA and the DSA
Part 14 Metrics and behavior
Bounces, conversions, cohorts, A/B tests and their traps.
- What drives clicks and retention
- Google Analytics 4: a counter, events, key events
- Bounces, time, scroll depth and CTR
- Conversion, funnels, cohorts and retention
- Metrics that mislead: vanity numbers and Goodhart’s law
- A/B tests and their traps
- Heatmaps, session recordings and cookie consent
- HEART, the North Star and a dashboard
Part 15 Quality and the law
Speed, accessibility, security, data protection, advertising rules and a launch checklist.
- Speed: Core Web Vitals and a budget
- Accessibility in depth: WCAG 2.2 and a walkthrough
- Keyboard and screen reader: name, role, state
- Testing a site: what an end-to-end test is
- Site security: OWASP, HTTPS, updates and passwords
- Form security: server-side checks and spam
- Personal data law: GDPR, UK GDPR and US state laws
- A privacy notice and consent on a site
- Cookies, trackers and an honest banner
- Copyright: photos, fonts, texts and licenses
- Advertising law and the rules of your profession
- Consumer protection: selling and offers online
- Accessibility and the law, and visitors from other countries
- The pre-launch checklist
Part 16 AI and the future of the web
AI site builders, vibe coding, the agentic web and Iskin.
- AI site builders: bolt, Lovable, v0, Framer AI, Wix AI, and questions for any of them
- Vibe coding: what it gives and what it costs
- Prompts as briefs: how to give an AI a task
- Checking what an AI made: mistakes that look plausible
- Capstone: a mini-builder “brief, structure, copy, code”
- The agentic web: MCP, A2A and agents as visitors
- Capstone with Iskin: an interview, a site and a critical review
- The internet of intelligence, the launch and where to go next