1
Step 1 · 4 weeks
Web foundations
Build a semantic, responsive page with forms and keyboard navigation.
Your practice outcome: Build a responsive page, navigate it with Tab and keep the code in Git.
htmlcssaccessibilitygit
Smart and actionable recommendation
Your career path and learning roadmap
Set your goal, available time and current skills. Zerango ranks the best-fit path and organizes each learning step with recommended courses.
Learning resources35
Top recommendations11
Weekly hours6
Recommended paths — select one to explore its roadmap
Recommended roadmap
3 learning sessions and 2 practice blocks per weekFrontend Developer
I’m Zerango. Finish each step with a small working outcome before moving on.
Durations are estimates scaled to your weekly hours, including practice and review.
2
Step 2 · 5 weeks
Typed component UI
Practice functions, async requests, component state and typed props.
Your practice outcome: Build a searchable React list with explicit data types.
javascripttypescriptreact
3
Step 3 · 4 weeks
Server and client boundaries
Use App Router pages, loading states and server data access in a small app.
Your practice outcome: Publish a server-backed detail page with loading and error states.
nextjsdatabasesecurity
4
Step 4 · 3 weeks
Test and publish
Test a main user task, check keyboard access and document a deployed project.
Your practice outcome: Test one main user task and give someone the deployed URL and setup guide.
testingportfolioperformance
This is Zerango’s adapted learning sequence informed by the sources below. Durations are estimates, not an employment guarantee.
roadmap.sh · Frontend DeveloperOfficial learning referenceReviewed: October 17, 2026
Courses for this path
Resources respect your selected language and budget.
MDN · English
MDN Learn Web Development
Start with web standards, semantic HTML, CSS and JavaScript in MDN's learning curriculum.
DevelopmentBeginner
web.dev · English
Learn Accessibility
A practical introduction to semantic content, keyboard access, accessible forms and inclusive interfaces.
DesignBeginner
React · English
React Quick Start
Learn components, JSX, props, events and shared state through the official React introduction.
DevelopmentBeginner