All Roadmaps/Frontend
Core

Frontend Roadmap

Build fast, accessible, and delightful user interfaces. This path covers HTML/CSS fundamentals through advanced React patterns, TypeScript, performance optimization, and the modern frontend ecosystem.

16 skill nodes~100 hours10 core · 6 optional

Path Overview

Foundation
4
Intermediate
5
Advanced
4
Expert
3
CoreOptional

Skill Tree

Frontend skill progression

Expand any node to see its description and learning resources. Use the checkbox to track your progress.

Core skill — essential for this pathOptional — explore when readyClick node to expand · checkbox to track
1

Foundation

4 core · 0 optional

HTML & Semantic Markup
html
CSS & Layout Systems
css
JavaScript (ES6+)
javascript
Git & Collaboration
tooling
next level
2

Intermediate

4 core · 1 optional

React (Hooks & Patterns)
framework
TypeScript
typescript
State Management
architecture
Accessibility (a11y)
accessibility
Testing (Vitest + RTL)
optional
testing
next level
3

Advanced

1 core · 3 optional

Performance & Web Vitals
performance
Next.js / SSR Frameworks
optional
framework
CSS Architecture
optional
cssarchitecture
Animation & Motion
optional
animation
next level
4

Expert

1 core · 2 optional

Build Tools & Bundlers
optional
tooling
Design Systems
optional
architecture
Frontend Architecture
architecture

Ready to go deeper?

Explore all 9 career paths or read mindset articles to complement your technical skills.