---
skill: Web
description: "Frontend for the browser: markup, layout, state, API integration, accessibility and performance."
owner: Developer C
guides: 2
exported: 2026-10-19
---

# Web

Frontend for the browser: markup, layout, state, API integration, accessibility and performance.

## Contents

- [Web Fundamentals](#web-fundamentals) — Concept guide
- [Web standards](#web-standards) — Development standard

---

<a id="web-fundamentals"></a>

# Web Fundamentals

_Concept guide · written by Developer C · updated 2026-09-29_

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

## 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.

---

<a id="web-standards"></a>

# Web standards

_Development standard · written by Developer C · updated 2026-09-29_

> Components, state, accessibility and performance rules.

## Components

- One job per component. If the name needs "and", split it.
- Props in, events out. A component does not reach into global state it was not
  given.
- Server-render by default; reach for a client component only when you need
  interactivity.

## State

- URL for anything shareable or reloadable.
- No duplicated source of truth. Derive, do not copy.
- An uncontrolled input that reflects server data needs a `key` tied to that
  data, or it will show a stale value after a save.

## Accessibility (non-negotiable)

- Every interactive element is reachable and operable by keyboard.
- Every input has a label — visually hidden is fine, absent is not.
- Focus is visible. Do not remove the outline without replacing it.
- Colour is never the only carrier of meaning.
- Text contrast is at least 4.5:1.

## Performance

- Measure before optimising.
- Images are sized and lazy below the fold.
- Watch the bundle. A date library is rarely worth 70 KB.

## Review checklist

- [ ] Works with the keyboard alone
- [ ] Inputs are labelled
- [ ] Loading and error states exist, not just the happy path
- [ ] No layout shift once data arrives
- [ ] Nothing secret in client-side code