09 · Systems

Frontend Foundations

The browser is a runtime: HTML defines structure, CSS defines presentation, JavaScript defines behaviour. Together they get parsed, laid out, painted, and made interactive.

HTML — structure

A tree of elements. Semantic tags (<header>, <nav>, <article>, <section>, <footer>) encode meaning beyond layout. Screen readers, search engines, and your future self all benefit.

Rule: never reach for <div> when a more specific element exists. <button>, not <div onclick>.

CSS — presentation

Selectors target elements; the cascade resolves conflicts. Modern CSS has flexbox and grid for layout (don't use floats anymore), custom properties (--var) for theming, and container queries for responsive components.

Box model: every element is a box made of content, padding, border, margin. box-sizing: border-box is the sane default — width includes padding and border.

JavaScript — behaviour

A single-threaded event loop. Synchronous code blocks the UI; async code (promises, await) yields back to the loop so the browser can render and respond.

The DOM is the browser's runtime tree of elements. JS reads and mutates it. Modern frameworks (React, Vue, Svelte) abstract this — you describe the UI declaratively and the framework reconciles the DOM for you.

The render pipeline

1. Parse HTML → DOM tree.
2. Parse CSS → CSSOM tree.
3. Combine → Render tree (DOM + visible styles).
4. Layout — compute geometry: where each box sits.
5. Paint — fill pixels.
6. Composite — assemble layers (transforms, fixed positioning) onto the screen.

Slow rendering usually means slow layout (changing geometry forces re-flow of descendants). Animate transform and opacity — those skip layout and paint, only re-composite.

Performance basics

• Compress and lazy-load images.
• Inline critical CSS; defer the rest.
• Use preconnect for known third-party origins.
• Avoid layout thrash: read all measurements, then write all mutations.
• Measure Core Web Vitals: LCP (largest paint), INP (interaction latency), CLS (layout shift).

Accessibility (a11y)

Not optional. Cheap to do well from the start, expensive to retrofit:

• Semantic HTML does 80% of the work.
• All interactive elements reachable by keyboard.
• Visible focus styles.
• Sufficient colour contrast (WCAG AA: 4.5:1 for body text).
• alt on every meaningful image; empty alt="" on decorative ones.

Frameworks vs vanilla

Frameworks help when state is complex and the UI updates frequently. They hurt when the page is mostly static or content-driven. The Top Living and SDDO sites in these notes are vanilla HTML+CSS+JS — appropriate for content-heavy, low-state projects.

The fastest framework is no framework. The most maintainable framework is the one the team already knows. Choose accordingly.

What to remember at exam time

• HTML/CSS/JS = structure/presentation/behaviour.
• Box model components in order.
• Render pipeline steps in order, and which mutations cause which step.
• Semantic HTML is the foundation of accessibility.