Every web page is made of the same three languages, and each one answers exactly one question about the page.

Keeping these apart is a genuine skill and it is worth building early. The most common beginner mistake in HTML is reaching for a tag because of how it looks — using h3 because you wanted smaller text, or b because you wanted bold. Those are CSS questions being answered in the wrong language.

JavaScript is a full programming language — variables, conditions, loops, functions — and it is not covered in this track. Know what it is for, so you can tell when a problem is not yours yet.

It runs after the page has loaded, and it changes things: text, styles, whole sections of the page appearing and disappearing. If something on a page responds to you without fetching a new page, that is JavaScript.

Turn off the stylesheet on any well-built page and it does not break. It becomes plain — black text, blue underlined links, headings in decreasing sizes — and it remains completely readable and completely usable.

That first panel is what a search engine crawls, roughly what a screen reader announces, and what a browser's reader mode produces. It is also what your visitor sees for the first moment before your CSS arrives on a slow connection.

Between receiving text and showing pixels, the browser runs a fixed sequence. You will never write any of it, and knowing the shape explains several things that otherwise look arbitrary.

1. 1

   Parse the HTML into a tree

   Every element becomes a node with a parent and children. This structure is called the DOM, and it is what CSS selects from and JavaScript manipulates.

2. 2

   Parse the CSS into rules

   Every stylesheet, plus the browser's own defaults, plus anything in a style attribute — collected and sorted.

3. 3

   Work out the style of every node

   For each element, which declarations apply and which win. This is the cascade, and it gets its own chapter because it is where most confusion lives.

4. 4

   Lay out — calculate every box

   Position and size for everything, computed from the top down. Change one width and the browser may have to redo a large part of this, which is why layout is the expensive step.

5. 5

   Paint, and composite

   Fill in the pixels, then stack the layers. Now it is on screen.

One practical consequence: a <script> in the middle of your HTML stops parsing until it has downloaded and run. That is why scripts conventionally go at the end of the body, or carry the defer attribute.

Every page you have ever visited will show you its own source, for free, right now. This is not a developer feature that was left switched on — the web was designed this way, and it is the reason a generation of people learned to build things by reading other people's.

Ctrl/Cmd + U        View source — the HTML the server sentF12  or  Ctrl/Cmd + Shift + I    Devtools — the live page, after the browser                                 finished with it

Those are not the same thing, and the difference matters more the further you get. View source shows the file as delivered. Devtools shows the tree as it exists now, including anything JavaScript has changed since. On a modern site they can look completely different.