Mostly harmless, conspicuously useful

The Hitchhiker's Guide to Becoming a Frontend Engineer

A frontend engineer builds the part of the system the customer can see, which is a perfectly safe arrangement until the customer can see it on a browser you do not own, on a device you did not test, over a network that has decided to be a network. You translate "make it nice" into markup, styles, scripts, components, states, and the quiet assumption that the DOM is stable, a position the DOM holds only between redesigns and never during them. You learn that an interface is a promise to a keyboard user today and a screen-reader user tomorrow, that a cache will lie with the sincerity of a friend protecting your feelings, and that a bundle that ships a megabyte of JavaScript to display a date has prioritised the framework over the date. The work travels from one button that works for one user to an interface that works across browsers, devices, assistive technologies, and the user who is not on Chrome and has never been on Chrome and is doing fine. This guide moves from writing a semantic page to setting frontend platform strategy across teams, with practical stops at the DOM, accessibility, state, performance, security, and the recurring discovery that the layout was always broken; it was merely waiting for a viewport to make it official. The grand objective is a usable interface at a defensible load time; the daily evidence is usually a build that does not require a rollback, a lighthouse score that survives a real device, and a release whose broken state was caught by a component test rather than a customer.

Level 1 · Novice

Read the DOM before trusting the framework to remember what a user is

You inspect markup, styles, the devtools, and a rendering timeline without shipping to production, learning how a polite component can hide a button from a keyboard before the page finishes painting.

You begin with read-only artifacts: a page's HTML, its CSS, the browser's developer tools, a network panel, and a rendered DOM tree. HTML is the markup that gives a document its structure and meaning; CSS is the styling that decides how that structure is presented. The DOM is the browser's live model of the document, which the browser edits, reflows, and occasionally repaints with the diligence of a clerk who has never heard of vacation. You review these with designers, an accessibility-aware reviewer, and an experienced engineer so everyone can trace how a design becomes pixels before anyone ships a layout that hides the primary action from anyone not using a mouse.

Suppose a team wants to add a "submit" button. In a sandbox with no production access, you read the markup, inspect the computed styles, check the tab order, and note that the button is a `<div>` with a click handler and no role, no name, and no keyboard story. You record the gap, the focus outline the designer removed for aesthetics, and the single selector the framework inserted between the user and their goal. One brisk walkthrough is a sighting, not a design; but it prevents the team from launching a button that is visible to half the audience and theoretical to the rest.

Words from the spaceship manual, translated

DOM: The browser's live, editable model of the document, built from HTML and modified by scripts. It is the tree your code climbs, and the browser will reflow it whenever a style changes, with the patience of a system following orders.
Semantic HTML: Markup that uses elements for their meaning — `<button>`, `<nav>`, `<main>` — rather than their default appearance. It is the difference between a heading that announces itself and a `<div>` that merely looks tall.
Computed style: The final set of CSS values the browser applies to an element after all rules, inheritance, and the cascade have had their say. It is the truth, and the stylesheet is a rumour until the browser resolves it.
Reflow: The browser's recalculation of element layout when the DOM or styles change. It is honest work, and like all honest work it takes time, which is why a hundred reflows on scroll is a performance review of your enthusiasm.