Development Roadmap
Frontend Developer
A frontend developer builds the part of a product people actually touch. The sequence is HTML and semantic markup, then CSS and layout, then JavaScript properly, then one framework such as React, then the professional layer — accessibility, performance and testing — that separates a hobbyist from someone employable.
By the end: Build accessible, fast, production-quality interfaces and ship them.
The Frontend Developer Roadmap
Markup and Styling~1 month
Build a static page that is correct, responsive and readable by a screen reader.
HTML and semantics
The right element for the job. Semantics drive accessibility and SEO — a page of divs throws both away.
CSS fundamentals
Cascade, specificity, inheritance and the box model — the four things behind every "why is it doing that".
Flexbox and grid
Modern layout. Once these click, you stop reaching for hacks you found on a forum.
Responsive and mobile-first
Start narrow and add breakpoints upward. Most visitors are on a phone with a worse network than yours.
Custom properties and theming
CSS variables for tokens, and a dark mode that does not double your stylesheet.
JavaScript~2 months
Make a page do something, without a framework, so you understand what one adds.
Language core
Scope, closures, `this`, and the array methods that replace most loops you would write.
DOM and events
Query, mutate and delegate. Frameworks hide this, and hidden things break confusingly.
Async and the event loop
Promises, async/await, and why a long loop freezes the page.
Consuming APIs
Fetch, JSON, loading and error states — the states most tutorials quietly skip.
Browser storage
Cookies, localStorage and sessionStorage: which to use, and which is readable by any script on the page.
TypeScript
Types on top of the JavaScript you now know. Standard in nearly every frontend job posting.
A Framework~2 months
Build a multi-screen app with state that survives navigation.
React fundamentals
Components, props, hooks and the rendering model. Build three small apps before adding anything.
State management
Local, then lifted, then context, then a store — in that order, and only as far as you need.
Server state and caching
Remote data is not app state. A query library handles caching, retries and revalidation for you.
Forms and validation
Controlled inputs, schema validation and error messages a human can act on.
A meta-framework
Next.js: file routing, server components and rendering strategies that change what ships to the browser.
Rendering strategies
Client, server, static and streaming — and which one a given page actually wants.
Tooling and Quality~1 month
Work the way a team works.
Git and collaboration
Branches, pull requests, review and resolving a conflict without panic.
Build tools
Vite or Webpack — enough to debug a build, not to write one from scratch.
Linting and formatting
ESLint and Prettier, decided once and enforced in CI so reviews are about logic.
Testing
Component tests for behaviour and a few end-to-end tests for the paths that must never break.
Browser devtools
Network, performance and the element inspector. The fastest debugging skill you can acquire.
The Professional Layer~1 month
What separates someone who can build a UI from someone who should be paid to.
Accessibility
Keyboard navigation, focus management, contrast and ARIA used sparingly. Often a legal requirement, always the right thing.
Performance and Core Web Vitals
LCP, INP and CLS. Images, fonts and bundle size are where nearly all of it is won.
SEO fundamentals
Titles, metadata, structured data and rendering that a crawler can read.
Frontend security
XSS, CSRF, CSP and why user-supplied HTML is never safe by default.
Design systems
OptionalTokens, components and documentation, so a growing UI stays coherent.
Portfolio and Job Hunt~1 month
Turn the skills into an offer.
Build three real projects
One consuming a live API, one with meaningful state, one fast and accessible. Depth beats a list of clones.
Deploy everything
A live URL and a readable repository. Unvisitable work does not count as evidence.
Interview preparation
JavaScript trivia, React behaviour, and a coding screen that is usually easier than you fear.
Resume and application
Get through the automated filter, then say what you built and what it changed.
Frequently Asked Questions
Do I need to learn JavaScript before React?
Yes, and skipping this is the single most common mistake. React is JavaScript — closures, array methods, destructuring, promises and modules all appear in the first hour. People who start at React end up debugging JavaScript they never learned, which is far harder than learning it directly.
Is CSS still worth learning deeply with Tailwind around?
Yes. Tailwind is a naming layer over CSS — flexbox, grid, stacking contexts, specificity and the cascade are exactly the same underneath. Every hard layout bug is a CSS bug regardless of how the classes are written.
React, Vue or Angular?
React has the largest job market by a wide margin, so it is the default. Vue is the gentlest to learn, and Angular dominates in large enterprises. Learn one properly; the second takes about two weeks because the concepts are shared.
What does a frontend portfolio need?
Three or four projects that each demonstrate something different: one that consumes a real API, one with meaningful state, one that is genuinely accessible and fast, and ideally one you built for a real person. A wall of clone apps says less than a single finished product with real users.