Command Palette

Search for a command to run...

Hectal

HTML · 8 phases · 53 topics · ~20 h

The HTML Roadmap

Every phase is labelled by level so you can start where you are. Each topic opens with a real-life analogy, then commands and code you run yourself, then questions with reveal answers. Progress is saved as you go.

Beginner no prior knowledgeIntermediate day-to-day workAdvanced production and interviews

Where should I start?

Pick a path for your goal

Complete beginner

Never written code before. Start here: every word is explained.

  1. 10 · Start Here: How the Web Works
  2. 21 · HTML Basics: Elements and Text
  3. 32 · Structure and Semantics
  4. 43 · Tables

Job-ready front end

You know the basics and want forms, media and SEO done properly.

  1. 12 · Structure and Semantics
  2. 24 · Forms
  3. 35 · Media and Embeds
  4. 46 · The Head, SEO and Sharing

Accessibility and quality

You build pages already and want them accessible and correct.

  1. 12 · Structure and Semantics
  2. 24 · Forms
  3. 37 · Accessibility and Quality

The full curriculum

Level
Phase 0

Start Here: How the Web Works

Beginner ~64 min0/4 · 0%

What a website really is, what happens when you open one, the tools you need, and your very first HTML page. No experience needed.

Phase 1

HTML Basics: Elements and Text

Beginner ~3 h0/8 · 0%

Elements, tags and attributes, headings and paragraphs, text formatting, entities, lists, links, images and file paths: the everyday HTML of every page.

Phase 2

Structure and Semantics

Beginner ~3 h0/7 · 0%

Block and inline flow, semantic layout and landmarks, the heading outline, meaningful text, figures, details, dialog, popover and global attributes.

Phase 3

Tables

Beginner ~87 min0/4 · 0%

Build data tables the right way: rows and cells, headers, captions and sections, cells that span, and tables that screen readers and phones can use.

Phase 4

Forms

Intermediate ~3 h0/8 · 0%

How forms send data, every input type, labels, choices, buttons, built-in validation and autofill: forms that work for everyone, on every device.

Phase 5

Media and Embeds

Intermediate ~3 h0/7 · 0%

Responsive images, fast-loading media, audio and video with captions, safe iframes, inline SVG and a first look at canvas.

Phase 6

The Head, SEO and Sharing

Intermediate ~2 h0/7 · 0%

Everything in the <head>: titles, descriptions, social cards, icons, the manifest, loading CSS and scripts, structured data and SEO basics.

Phase 7

Accessibility and Quality

Advanced ~3 h0/8 · 0%

Build pages everyone can use: alt text, keyboard and focus, ARIA, accessible names, testing with real tools, best practices and interview answers.