Frontend
HTML, CSS, JavaScript, React — everything between the browser and the user.
Between the Code and the Screen
The browser isn't a canvas you paint on — it's a machine that assembles a page out of three inputs, in a fixed order. Learn what it does with your files and HTML and CSS stop being incantations.
- The Assembly Line: From URL to PixelsYou typed an address and a page appeared. Between those two events runs a machine with a fixed order of operations — and most of the bugs you'll spend years chasing live at one of its stations.
- Labelled Boxes: HTML Is Meaning, Not LooksEvery tag you choose is a label that machines will read — the browser, a screen reader, a search crawler, next year's you. "It looks the same" is the most expensive sentence in frontend.
- The Courtroom: Why Your CSS "Doesn't Work"You wrote the rule, the browser ignored it, you added !important and moved on. It wasn't ignored — it lost a case decided by a procedure you can learn in an afternoon.
- The Current: Flow, Flex and GridA page isn't a canvas you place things on — it's a current that arranges them. Learn to describe relationships instead of coordinates and the layout survives content you didn't plan for.
A Page That Holds Up
A layout that works on your laptop, with your data, for your eyes, isn't finished. Four things that separate a demo from something real people can actually use.
- Water in a Glass: One Page, Every ScreenA page is responsive by default — you have to work to break it. Most of this skill is not adding cleverness but removing the assumptions you made about a screen you happened to own.
- The Turnstile: Forms, and Where Products Lose PeopleEverything a product promises gets cashed in at a form. It's also the one place where a small mistake makes a person give up entirely — and the platform already solved most of it for free.
- The Second Interface: Accessibility in CodeYour page ships with two interfaces — the one on screen and the one machines read aloud. The second is generated by your code whether you thought about it or not.
- The Second Month: Styles That Don't RotCSS is easy for three weeks and unbearable by month three. Not because people write it badly — because nothing in the language stops a stylesheet from becoming a place where deletion is a gamble.
The Language
JavaScript in the order that makes it make sense: what kind of language it is, how to move data through it, how it touches the page, how it waits — and how to find out why it broke.
- Ten Days in 1995: The Language and Its ScarsJavaScript was designed in about ten days and can never break old pages. Almost every strange thing about it follows from those two facts — which turns a pile of trivia into one explanation.
- The Conveyor: Transforming Data Instead of Commanding ItNearly all frontend work is one shape: a list of objects arrives from a server and has to become something on screen. Learn to describe that transformation as a pipeline and most of your code stops being bookkeeping.
- The Living Tree: The DOM and EventsThis is the layer where a page stops being a document and starts being a program — and the layer every framework you'll ever use is quietly standing on.
- One Lane: How JavaScript Waits Without StoppingYou asked the server for data and printed the result: undefined. Nothing was broken — you read the answer before it arrived, and that one misunderstanding is the whole subject.
- The X-Ray: DevTools and the MethodFaced with a bug, there are two possible people: the one who changes something and reloads, and the one who states a hypothesis and checks it. The gap between them is a career.
The Application
Where a page turns into a program: packages and a build step, the problem frameworks actually solve, components, state, and the server on the other end.
- The Toolchain: Modules, Packages and the Build StepOne day the project is a file and a script tag; the next it's a package manifest, four hundred folders of dependencies and a config nobody can read. Every piece of that exists to solve a problem — learn the problems and it stops being arbitrary.
- The Puppeteer: What Frameworks Actually SolveFrameworks aren't a fashion or a shortcut. They remove one specific job — keeping the screen and the data in agreement — and you can only see why that job is worth removing if you've done it by hand.
- Lego, Not Sculpture: Thinking in ComponentsSplitting an interface into pieces looks like a formatting decision and is actually the design of a small language your team will speak for years.
- One Source of Truth: StateThe screen says three items; the list shows four. Nothing is broken — the number was stored separately from the list, and two copies of a fact will always find a way to disagree.
- The Other End of the Wire: Data, Routes and Where Code RunsTwo questions decide the shape of a real application: how a person moves between screens, and at what moment the HTML gets built. Frameworks come and go; those two questions don't.
The Craft
What separates code that works from code someone can live with — types, speed, and the practice loop that keeps you growing after this roadmap ends.
- The Net: Types as Documentation That Can't LieEvery function you write already has a type — you just kept it in your head, where nothing checks it and it slowly becomes untrue.
- The Budget: Why It Feels SlowIt's instant on your machine. Your machine is a fast laptop on office wifi with a warm cache and twelve test records — and none of those things is true for the person you built it for.
- Building the Hands: How to Practise FrontendTwenty articles in, you know what the machine does and why. That knowledge is worth almost nothing until it lives in your hands — and this is the article about the distance between the two.