Web Fundamentals

How a page becomes pixels, and where state actually lives.

Concept guideUpdated 21 days ago (29 Sept 2026) by Developer C

Download .md Done editing

Title

Type

What it is, why we use it, the architecture and real examples. The material behind a Concept Sharing session.

Summary

Body

# Web Fundamentals

## From URL to pixels

1. The browser requests a document.
2. HTML is parsed into the DOM.
3. CSS is matched and the layout is computed.
4. JavaScript runs and can change any of the above.
5. The browser paints, then repaints when something changes.

Anything you do in step 4 that forces step 3 again is expensive. That is most
performance work in one sentence.

## Semantics first

```html
<button type="submit">Save</button>
```

not

```html
<div onclick="save()">Save</div>
```

The first is focusable, announced by a screen reader, works with the keyboard and
submits a form. The second is a div. Reaching for the right element is the
cheapest accessibility work available.

## Where state lives

- **URL** — anything a user should be able to share or reload into: the current
  tab, a filter, a page number.
- **Server** — the truth. Everything durable.
- **Component state** — transient interaction: an open menu, a draft input.

When in doubt, push state up the list, not down.

## The event loop

JavaScript runs one thing at a time. `await` does not pause the browser; it
yields. Long synchronous work blocks scrolling, clicks and paint — split it or
move it off the main thread.

Markdown with tables, code blocks and task lists.