Not a list of logos. Every stage tells you what to learn, why it matters, how to know you've learned it, and what to build with it. Learn the concepts, not the tools.
Free, no sign-up
By Mostafa Mohamed Abdalla, Frontend Team Lead & Senior Software Engineer · Last reviewed
Required for everyone, whatever framework you choose later.
HTTP, DNS, hosting, and what the browser does with your code.
4 topics4 must-know~1 weeks at ~2h/day
Semantic structure, forms, and the native elements that do the work for you.
4 topics3 must-know~2 weeks at ~2h/day
Layout, responsive design, and the CSS features that replaced half of your JavaScript.
6 topics5 must-know~5 weeks at ~2h/day
The language and the browser: syntax, data, the DOM, events, and debugging.
4 topics4 must-know~5 weeks at ~2h/day
Behind the scenes: scope, closures, this, prototypes, the event loop, and async.
3 topics2 must-know~4 weeks at ~2h/day
Version control and collaborating like a team does. Start using it from day one.
2 topics2 must-know~1.5 weeks at ~2h/day
The default for professional frontend work. Types as documentation and as a safety net.
3 topics2 must-know~3 weeks at ~2h/day
npm, pnpm, and friends, Vite, linters, and formatters: the machinery around your code.
4 topics4 must-know~1.5 weeks at ~2h/day
Building for keyboards, screen readers, and everyone. Increasingly a legal requirement.
3 topics2 must-know~2 weeks at ~2h/day
Pick one framework and go deep. Do one track, not all three.
Then follow just one of these tracks:
React 19 in depth, server state, forms, and Next.js for production apps.
8 topics6 must-know~10 weeks at ~2h/day
Signals, dependency injection, RxJS, and Angular SSR for enterprise-grade apps.
7 topics5 must-know~10 weeks at ~2h/day
The Composition API, Pinia, and Nuxt for full-stack Vue apps.
4 topics4 must-know~9 weeks at ~2h/day
What turns 'I can build it' into 'I can ship it and keep it running'.
Tailwind, component libraries, design tokens, and working with designers.
3 topics2 must-know~2 weeks at ~2h/day
CSR, SSR, SSG, ISR, streaming, and getting found on Google.
2 topics2 must-know~1.5 weeks at ~2h/day
REST, GraphQL, real-time, and streaming, from the client's point of view.
3 topics1 must-know~2 weeks at ~2h/day
Unit, component, and end-to-end tests that give you confidence, not busywork.
2 topics2 must-know~2 weeks at ~2h/day
Core Web Vitals, images, fonts, bundles, and measuring before optimising.
3 topics2 must-know~2 weeks at ~2h/day
XSS, CSRF, CORS, CSP, auth tokens, and the OWASP Top 10 for frontend developers.
4 topics3 must-know~1.5 weeks at ~2h/day
Not to become a backend developer: to work confidently with one, and ship full products alone.
4 topics1 must-know~4 weeks at ~2h/day
Automated checks, preview deploys, and shipping safely, every day.
4 topics2 must-know~1.5 weeks at ~2h/day
Learn with AI, work with AI, review AI code, and build AI features.
5 topics3 must-know~2 weeks at ~2h/day
Depth, leadership, and turning your skills into a job.
Web Components, PWAs, service workers, and Web Workers.
3 topicsOpen-ended~2 weeks at ~2h/day
Architecture, system design, i18n, monorepos, and leading other developers.
5 topics3 must-know~8 weeks at ~2h/day
Turn what you built into proof, and proof into offers.
3 topics3 must-know~4 weeks at ~2h/day
Mobile, desktop, 3D, and a second framework: where to go once you're solid.
4 topicsOpen-ended
The fastest path is not learning everything. These are common time sinks for beginners.
Studying about two hours a day, most people become job-ready for junior roles in 9 to 12 months: foundations, one framework track, testing, and deployment. Full-time study can halve that. The full roadmap to senior level takes years of real work, not just study.
No. Focus on the topics marked 'Must know' first. 'Learn next' topics usually come on the job, and 'Optional' topics depend on your goal or company. You also only need one framework track, not all three.
React has the most jobs worldwide. Angular is very strong in enterprise and in some markets. Look at 20 job posts in the market you want to work in, then pick one and commit. The concepts transfer.
Yes, but the bar moved. AI writes code quickly; companies need people who can judge that code, own the product experience, and handle accessibility, performance, and security. Strong fundamentals matter more than before, not less.
No. Many frontend developers are self-taught. A strong portfolio, a clean GitHub, and good interview preparation matter more for most companies.
You need backend literacy, not mastery: HTTP, authentication, API design, and enough Node.js and SQL to build a small full-stack app. That makes you far more independent and is increasingly expected.
Every topic links to official documentation, and the page shows the date it was last reviewed. It is updated as the ecosystem changes.
Everything on this page is free and complete: you can follow it alone and get hired. Mentorship is for when you want someone to look at your real work, adjust the plan to your life, and keep you moving.
Not sure you need it? You probably don't yet. Start with the roadmap, and apply when you get stuck or want faster feedback. The intro call is where we decide together whether mentorship is the right step.