Write semantic HTML
Build accessible page structure with meaningful HTML elements.
Frontend Developer Career Path
Build core web skills in a guided order, practice as you go, and finish with a portfolio project you can share.
YOUR PROGRESS
0 of 12 steps complete
Progress is saved for this browser session. Log in to keep it with your account.
THE ROADMAP
Learn it. Build it. Ship it.
Follow the stages in order or explore a topic that interests you. Mark each step complete when you’re ready to move on.
01
STAGE 1
Web foundations
Structure pages and create responsive layouts.
Style with modern CSS
Use selectors, the box model, typography, and custom properties.
Create responsive layouts
Use Flexbox, Grid, and media queries to support different screens.
02
STAGE 2
JavaScript essentials
Add behavior and work with data from the browser.
Learn JavaScript fundamentals
Practice values, functions, arrays, objects, and control flow.
Work with the DOM and events
Make interfaces interactive by responding to user actions.
Handle asynchronous JavaScript
Understand promises, async functions, and fetching data.
03
STAGE 3
Build for real users
Create accessible, reusable, and performant interfaces.
Build reusable UI components
Break interfaces into consistent, maintainable pieces.
Make accessible interfaces
Improve keyboard support, semantics, contrast, and form labels.
Understand frontend performance
Learn practical ways to keep pages responsive and fast.
04
STAGE 4
Ship your work
Use your tools and skills to complete a portfolio project.
Use Git in your workflow
Track changes and prepare a project for collaboration.
Explore frontend developer tools
Get familiar with tools that help you build and debug.
Build a responsive portfolio
Bring your skills together in a portfolio project you can share.