Frontend Developer Roadmap — From Beginner to Hireable
Frontend developer roadmap from beginner to hireable: HTML, CSS, JavaScript, React and a live app. Kaidoro adapts the plan to your skills and deadline.
This is a starting point — make it yours
Use this goal to build your own roadmap — tailored to you and starting fresh.
The web platform
The three languages everything else is built on. Skipping this is why people plateau in React.
Build a static personal page with semantic HTML and CSS~8h
No frameworks, no build step. Use real semantic elements —
header,nav,main,article.Done when: it validates, is readable without CSS, and works on a phone.
Lay out a page with Flexbox and Grid~8h
Rebuild a real site's layout from scratch. Learn when each tool is the right one — Flexbox for one dimension, Grid for two.
Done when: you can build a responsive card grid without looking anything up.
Learn modern JavaScript properly~14h
const/let, arrow functions, destructuring, spread, array methods (map,filter,reduce), promises,async/await, modules.Done when: you can explain what
mapreturns without running it.Build an interactive app with no framework~10h
A todo list or quiz using only DOM APIs. Painful on purpose — it's what makes React's value obvious rather than magical.
Done when: state changes update the DOM correctly, including deletions.
React
Components, state and data flow — the model, not just the syntax.
Learn components, props and state~10h
Build small pieces: a counter, a toggle, a list with a filter.
Done when: you can explain why mutating state directly doesn't re-render.
Handle side effects and data fetching~10h
useEffectand its dependency array, loading and error states, cleanup.Done when: you can fetch from an API and handle all three states without a race condition.
Add routing and shared state~8h
React Router for pages, Context or a store for state several components need.
Done when: a multi-page app keeps state across navigation.
Build a real multi-page app~20h
Something with genuine data — a film browser, a recipe app, a habit tracker. Must handle loading, errors and empty states.
Done when: a stranger could use it without you explaining anything.
Tooling and TypeScript
The parts of the job that aren't writing components.
Learn Git properly~6h
Branching, merging, resolving conflicts, writing readable commit messages, opening a pull request.
Done when: you can recover from a bad merge without deleting the folder.
Add TypeScript to your React app~12h
Typing props, state, events and API responses. Start with
strict: falseand tighten.Done when: the build passes with
strict: trueand noany.Write tests for your components~8h
React Testing Library. Test what the user sees, not implementation details.
Done when: your tests still pass after an internal refactor.
Ship it
An app nobody can visit is hard to talk about in an interview.
Deploy to a live URL~4h
Vercel or Netlify, connected to your GitHub repo so pushes deploy automatically.
Done when: you can send someone a link.
Make it fast and accessible~8h
Run Lighthouse. Fix images, bundle size, colour contrast, keyboard navigation, and missing labels.
Done when: accessibility scores above 95 and you can use the whole app with only a keyboard.
Write a README that sells it~3h
What it does, why you built it, the interesting technical decision, a screenshot, a live link.
Done when: someone can understand the project in 30 seconds.