How a browser assembles a page

from text to pixels

What it is

A browser receives text and turns it into a picture. Between those two states there are four steps, and you need to know them for a practical reason: errors at each step look different, and the look of the breakage tells you at once where to search.

What it looks like in code

The four steps

1. Parsing. The HTML text becomes a tree of elements — the DOM. That tree is what you see in the Elements tab and what JavaScript changes. An important detail: the browser repairs broken markup itself, by its own rules — so an unclosed tag gives you no error and an unexpected tree instead.

2. Styles. For every element all the matching CSS rules are gathered and a final value for each property is computed (article 8.3).

3. Layout. The browser works out where each element goes and how big it is. This is where all the "why is this box full width" and "why do the elements overlap" effects appear.

4. Painting. The finished rectangles become pixels.

Which error is where

The first row is the treacherous one. The browser doesn't complain about broken HTML, it quietly builds the tree its own way. So "the selector doesn't work" often means "the element isn't where you think it is".

The page is not drawn once

Steps 2–4 repeat every time something changes: JavaScript changed the text, the user opened a menu, new data arrived. Hence two words that come up in conversations about speed:

• reflow (recomputing the layout) — expensive, affects the neighbours;
• repaint (redrawing) — cheaper, only the pixels change.

For reading code it is enough to know: changing sizes and positions costs more than changing a colour.

What to tell the AI

The element with class .card isn't visible on the page. Is it
in the DOM or not? How do I check that without guessing?

The question is put correctly: it separates "wasn't created" from "was created but is invisible" — two entirely different causes.

Here is the HTML and the CSS. At which step — parsing, styles
or layout — does what I see happen: the boxes stack vertically
when I expected them in a row?

Check this HTML for unclosed and badly nested tags.
A list of problems only, no fixes.

What to look for

The element is in the code but not in the DOM. That means the markup is broken and the browser rebuilt the tree. A common cause is a <div> inside a <p> or an unclosed tag.

A style that didn't apply. Three causes, most common first: the selector doesn't match, the rule was overridden by another (article 8.3), a typo in the property. A fourth, rare one: the stylesheet never loaded — visible in the Network tab (article 8.4).

Everything shifted from one change. A sign the layout was held together by luck — by an exact pixel width, for instance.

The page judders. Something is changing sizes on every frame. Look for JavaScript writing to styles in a loop or in a scroll handler.

Cheat sheet