Structure, then presentation.
Then the browser tools that explain both.

Document structure

HTML labels the page. The head carries language, encoding, and the viewport. The body carries the words.

Semantic HTML and why it matters

Name each region with an element, then use CSS only for how it looks.

After Document structure

Forms and validation

A label, a real control, and a browser check that is not the only copy of the rule.

After Semantic HTML and why it matters

Tables

A caption and header cells keep the meaning of each number in the document.

After Forms and validation

Accessibility basics

What a screen reader announces is the role, the name, and the state in the HTML.

After Tables

SEO fundamentals

A title, real text, and a link a crawler can follow.

After Accessibility basics

Cascade and specificity

When two declarations set the same property, specificity and source order pick the winner.

After SEO fundamentals

The CSS box model

Content, padding, border, and margin, and why the same padding changes the footprint.

After Cascade and specificity

Display types

Block, inline, inline-block, flex, and grid change how boxes share a line.

After The CSS box model

Positioning

Static, relative, absolute, fixed, and sticky, plus the offsets that apply to each.

After Display types

Flexbox

One axis, free space, and one item that can grow differently from its siblings.

After Positioning

Grid

Rows and columns together, and a span you can see in the CSS.

After Flexbox

Responsive design and media queries

One document, a base layout, and queries that add the wider arrangement.

After Grid

Transitions and animations

Duration and easing you can feel, on a property that can change smoothly.

After Responsive design and media queries

CSS architecture

Why one global stylesheet becomes hard to change, and how to keep a rule findable.

After Transitions and animations

Build a responsive layout

One page that uses the box model, flex or grid, and a media query together.

After CSS architecture

querySelector returns null

Semantic HTML and why it matters · Document structure · Accessibility basics

localStorage value is a string, or storage throws

Forms and validation · Document structure

document.cookie did not do what the jar required

Forms and validation · Document structure

The Styles pane is editing the wrong box

CSS architecture · The CSS box model · Display types

The Network tab shows a failed asset, not a CSS mystery

SEO fundamentals · Build a responsive layout · Document structure

The device toolbar and the phone disagree

Responsive design and media queries · Document structure · Build a responsive layout

The page overflows, collapses, or ignores an asset

The CSS box model · Flexbox · CSS architecture