A course on building for the open web

Intro to Web Design

HTML, CSS, and building something a person wants to use. Starts with how the Internet actually moves a page to a screen, and doesn't stop until you've written and styled a real one yourself.

Start Unit 1Your account

Curriculum

Units

01lockedThe InternetBy the end of this unit you can trace a page from a typed domain to a rendered document, and say what ARPANET, DNS and HTTP each contribute to getting it there.Inside · 9 min read
  1. Nobody can see how big your company is
  2. How do you respond to an attack if your phone line has been cut?
  3. How information moves
  4. The request/response cycle
5 quick checksannotated specimenscrollytellingvideoCold War map scrollercode exercises02lockedThe Utility ClassBy the end of this unit you can write a valid HTML page from nothing, choose elements for what content means rather than how it looks, and write your own CSS helper classes — then read a Tailwind class and say exactly what rule it sets.Inside · 20 min read
  1. Anatomy of a document — writing your first page
  2. Meaning before appearance
  3. CSS as a separate concern
  4. One class, one job
  5. A palette in custom properties
  6. Composing without cascade fights
  7. What a framework hands you
  8. The trade
  9. Leaving the sandbox
  10. Your tools
14 quick checksscrollytellingstepperlive HTML/CSS sandboxcode exercises03lockedLayout and ResponseBy the end of this unit you have built and published a real page of your own — a Hot Take, one screen, one opinion — that holds together on a phone and on a laptop, and you can say why every part of it is where it is.Inside · 16 min read
  1. The Hot Take
  2. The box and the flow
  3. Container, row, column
  4. When the screen changes
  5. Components, and the one thing you want them to do
  6. Next: Top 6
5 quick checkslive HTML/CSS sandboxcode exercises04lockedThe Working EnvironmentBy the end of this unit your work lives in a real editor, on a real branch, in a repository you can hand in — and you can read code you did not write, including code a machine wrote, and say what is wrong with it.Inside · 9 min read
  1. Local development
  2. Version control
  3. Working with other people’s code
  4. Working with code a machine wrote
  5. Getting help
3 quick checkslive HTML/CSS sandboxcode exercises05lockedType, Colour, and ImageBy the end of this unit your site looks like a decision rather than a default — a type pairing, a palette built from a mood you chose, images you are allowed to use and have credited, and a second draft you can say is better than the first.Inside · 11 min read
  1. Type
  2. Colour
  3. Images
  4. Logo and brand
  5. Where images come from, and what you are allowed to do with them
  6. The five mistakes, and the second draft
6 quick checkslive HTML/CSS sandboxcode exercises06lockedAccessBy the end of this unit you can operate your own site with a keyboard alone, measure it against WCAG rather than a feeling, and name exactly who a specific failure excludes — and your Top 6 does not fail any of it.Inside · 10 min read
  1. Text alternatives
  2. Structure for assistive technology
  3. Colour and contrast
  4. Keyboard and focus
  5. Auditing
6 quick checkslive HTML/CSS sandboxcode exercises07lockedThe StudioBy the end of this unit your team has a real project environment — a cloned repo, a shared board, an organised file system — and you can point at a specific card and say "that one was mine," with hours logged and a link to prove it.Inside · 5 min read
  1. File systems
  2. KANBAN
  3. Working as a team
  4. Revision
2 quick checkscode exercises08lockedShipBy the end of this unit your stylesheet is built for real instead of loaded from a CDN, your site lives at a public address you can hand someone, and you can say exactly what it costs the person who opens it — in bytes, and in what it tells about them.Inside · 8 min read
  1. Inspect and override
  2. Adding to a site
  3. Deploy
  4. Evaluate the shipped thing
  5. What a page costs its reader
5 quick checkslive HTML/CSS sandboxcode exercises