Features
What's inside
AI Profile AnalysisScore & ReportRoadmap & TrendsAI Resume BuilderJob MatchingHow it works →Sample report →
Resources
Free resources
Career roadmapsGuidesBlogChangelog
Pricing
All roadmaps

Career roadmap

Frontend Developer Roadmap

HTML and CSS through TypeScript, React, and production UI engineering — accessibility and performance included.

For: Beginners and designers moving into frontend engineering5 stagesUpdated 2026-07

Timeframes assume a typical part-time pace. Faster or slower is fine — the order is what matters.

01

Web fundamentals

Weeks 1–6

Semantic HTML, real CSS layout, and enough vanilla JavaScript to manipulate a page without a framework.

Semantic HTMLCSS Flexbox & GridJavaScript DOMGit & GitHubResponsive design
  • You can build a responsive multi-page site with no framework
  • You can read browser devtools instead of guessing
02

TypeScript & React

Weeks 7–14

Componentized UI with typed props and state. Learn React's mental model properly — rendering, effects, and composition.

TypeScriptReact componentsHooks & stateReact Router / App RouterTailwind CSS
  • You can build a multi-view app with typed components
  • You know why an effect runs and how to stop it
03

Data & testing

Weeks 15–20

Real apps talk to servers and get tested. Fetching, caching, forms, and component tests that catch regressions.

Data fetching & cachingForms & validationState managementTesting LibraryError handling
  • You can wire a UI to a real API with loading and error states
  • Your components have tests that fail when behavior breaks
04

Performance & accessibility

Weeks 21–25

What separates senior-looking frontend work: fast loads, keyboard navigation, and interfaces everyone can use.

Core Web VitalsCode splittingARIA & keyboard navImage optimizationLighthouse audits
  • Your flagship project scores green on Lighthouse
  • Your UI works with a keyboard and a screen reader
05

Portfolio & applications

Weeks 26–30

Ship one polished, deployed product with a live URL, then build the resume and profile around it.

DeploymentREADME writingPortfolio curationInterview prep
  • A deployed product recruiters can click, not clone
  • Pinned repos that show range: app, components, experiments

Keep reading

GitHub

Make your GitHub survive a recruiter's 90-second review

Recruiters spend about 90 seconds on your GitHub before forming a verdict. Here's exactly where those seconds go — and how to win each one.

Career

Landing your first dev job without professional experience

The proof-of-work strategy for breaking the no-experience loop: what to build, how to present it, and where the hidden hiring signals are.

Get the version of this roadmap built from your repos

DevProfile analyzes your code, finds where you actually are on this path, and orders the next steps by score impact.

Analyze my profile — freeHow the roadmap works