Lesson 4.0

Orientation

Artifact: Knowing what HTML is, what you ship in this chapter, and how it fits into the rest of the course

1. The promise

You'll know what HTML is, what it isn't, what you're going to build in this chapter, and how this chapter fits into the rest of the course. By the end of the chapter you'll ship a three-page website that scores 100 on Lighthouse's accessibility audit.

2. The mental model

A web page is a stack of three layers.

  • HTML is the structure. The walls and doorways of a house.
  • CSS is the look. The paint and the furniture.
  • JavaScript is the behaviour. The doorbell that does something when you press it.

This chapter is only the framing. The pages you build will look plain. That's the point. You can't paint a wall that isn't built yet.

(DIAGRAM: the three layers of a web page — annotated SVG — three stacked boxes labelled HTML (structure), CSS (look), JavaScript (behaviour), with arrows showing each is independent)

The two-sentence definition. HTML is the file the browser reads to know what's on the page. Every web page in the world starts as one.

What you ship at the end of this chapter: three HTML files, linked together, that score 100 on Lighthouse's accessibility audit. No CSS. No JavaScript. Just structure.

That's why HTML comes first. You can learn one thing at a time, or you can learn two at once and learn neither cleanly. Pick one.

A few terms before you start.

  • HTML (HyperText Markup Language). The standard file format for the structure of a web page.
  • Lighthouse. A free auditing tool inside Chrome's DevTools. Grades a page out of 100 on accessibility, performance, best practices, and SEO. You'll only care about the accessibility score in this chapter.
  • Accessibility (a11y). The practice of building pages that work for people using screen readers, keyboards instead of mice, larger fonts, and so on. "a11y" is shorthand — 11 letters between the a and the y.

There's a separate forms chapter later (Ch 13). It covers React Hook Form, Zod, ARIA, and screen-reader testing. You need this chapter first. Ch 4 teaches the HTML primitives of accessibility — the attributes and elements built into HTML itself. Ch 13 builds on top.

(SCREENSHOT: the Click to Career chapter index for Ch 4 — full window — the orientation unit highlighted)

3. You do it, with me

Nothing to install in this unit. Read along.

The chapter shape is the same as every other chapter. 16 short units, then one assignment at the end. The assignment is gated. You can't move on until you ship it.

The assignment is bigger than most chapter assignments in this course. Set aside an evening for it.

Here's the rough plan, in order:

  1. What HTML actually is.
  2. Type your first HTML file.
  3. Tags and attributes.
  4. The four-part document skeleton.
  5. Headings, paragraphs, and text.
  6. Links of every flavour.
  7. Images and alt text.
  8. Lists.
  9. Tables — for data only.
  10. Forms (three units).
  11. Semantic landmarks.
  12. Accessibility wins.
  13. The head tag, deep dive.
  14. The chapter assignment.

(SCREENSHOT: the finished three-page site rendered in Chrome — homepage — full window — no DevTools open)

(SCREENSHOT: Chrome DevTools Lighthouse panel showing a 100 score for Accessibility on the finished site — full window)

4. What you should be seeing

You should be able to say in one sentence:

  • What HTML is.
  • What you ship at the end of this chapter.
  • Why CSS isn't in this chapter.

If you can, you're done with this unit.

5. Common stumbles

  • You expect CSS in this chapter. Not yet. Pages will look plain. The next chapter paints them.
  • You want to skip ahead to forms. Forms depend on structure. Walk in order.
  • You think 100 on Lighthouse sounds hard. It's not, once you've done the chapter. The score comes from following the rules each unit teaches.

6. You should know

1/17
Next