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 · 8 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 · 21 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. and 4 more
13 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 — that holds together on a phone and on a laptop, and you can say why every part of it is where it is.Inside · 37 min read
  1. The Hot Take
  2. Get your copy
  3. Set the colors before you build anything
  4. Your toolkit for this project
  5. The box and the flow
  6. Container, row, column
  7. and 3 more
11 quick checksstepperlive HTML/CSS sandboxcode exercisesdebugging drills04lockedThe 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 · 20 min read
  1. Top 6
  2. Get your copy
  3. The thing under the five screens
  4. Local development
  5. Version control
  6. Working with other people’s code
  7. and 2 more
4 quick checksstepperlive HTML/CSS sandboxcode exercisesdebugging drills05lockedType, Color, 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 · 19 min read
  1. Type
  2. Color
  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
21 quick checkslive HTML/CSS sandboxcode exercisesdebugging drills06lockedAccessBy 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 · 11 min read
  1. Text alternatives
  2. Structure for assistive technology
  3. Color and contrast
  4. Keyboard and focus
  5. Auditing
20 quick checkslive HTML/CSS sandboxcode exercisesdebugging drills07lockedThe StudioBy the end of this unit your team has a real project environment — a cloned repo, a shared board, an organized 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 · 20 min read
  1. The Studio
  2. Get your copy, once, for the whole team
  3. Your first change, together
  4. File systems
  5. KANBAN
  6. Working as a team
  7. and 1 more
15 quick checksstepperlive HTML/CSS sandboxcode 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 · 12 min read
  1. Small fish, big-fish polish
  2. Inspect and override
  3. Adding to a site
  4. Deploy
  5. Evaluate the shipped thing
  6. What a page costs its reader
24 quick checkslive HTML/CSS sandboxcode exercises