HTMLFoundational~4h

HTML & Semantics

The document, and what it means

Everything renders the same once there is a stylesheet, which is why element choice is the one decision you cannot check by looking. This is the document layer with the guessing taken out: the tree the parser really builds, the roles your tags already carry, what a form really submits — and a page you wrote.

Start this project See the modules

Modules: 6
Drills: 9
Build steps: 5
Time: ~4h

Walk out able to

Predict the tree a browser builds from your markup, name the role every element carries, say exactly what your form submits, and defend each element you chose.

What the project covers

Structure and semantics

The shell, the outline, landmarks, and choosing the element.

Forms and validation

What a form submits, and what the browser refuses to send.

The head

Seven lines, and what breaks when each one is missing.

When a div is wrong

And when it is right, which no course teaches.

The pitch

What you practise, and what you leave with

One hand-written page — structure, a data table and a working form — verified against the browser rather than against how it looks.

You will practise

The tree the parser builds from your markup
Outlines, landmarks and choosing the element
What a form submits, control by control
Input types, constraints and the head

Afterwards you can

Predict a parser repair before you open it
Build an outline that actually conforms
Say what a form submits, exactly
Defend every element, including the divs

Modules

6 modules, 25 items

Lessons explain one idea. Drills repeat it until it sticks. Build steps make something that exists afterwards.

1
Build a document that stands up
~41 min
Predict the tree the browser builds, then write a shell that puts it in standards mode.
- LessonWhy the file is not the document4 min
- LessonName the category an element is in6 min
- LessonPredict the repair the parser makes8 min
- DrillPredict the parent the parser gives it11 min
- Build stepWrite the shell, then prove the mode12 min
2
Choose the element that means it
~46 min
Build an outline that conforms, and name the role every element in your page carries.
- LessonThe outline is only the headings13 min
- DrillKeep the outline conforming9 min
- DrillName the role the element already has10 min
- Build stepGive the page landmarks and an outline14 min
3
Wire a form that actually submits
~37 min
Label and name controls so a submission carries exactly what you meant it to.
- Lessonname submits, id connects, label names13 min
- DrillSay exactly what it submits12 min
- Build stepSubmit it and read the query string12 min
4
Pick the type, then constrain it
~45 min
Pick the type a requirement actually needs, and name the flag that stops a submission.
- LessonThe type buys behaviour, not a border12 min
- DrillPick the type the requirement needs10 min
- DrillName the flag that fired11 min
- Build stepMake the browser refuse the bad value12 min
5
Make the head earn its lines
~31 min
Say what each line of the head buys, and what somebody notices when it is missing.
- LessonFour lines that do real work12 min
- DrillSay what breaks without it9 min
- Build stepFill the head, then ask the browser10 min
6
Know when a div is wrong
~1h
Defend every element in the document you built, including the ones that are div.
- LessonTwo failures, and they are opposite14 min
- DrillDiv, or something that means it?11 min
- DrillSpot the broken line at a glance10 min
- LessonAssemble the page to a specification12 min
- LessonVerify it against the browser7 min
- LessonDefend every element you chose6 min