Your Learning Path

Where You Are Now

Having completed this roadmap you now know:

HTML — semantic markup, forms, accessibility
CSS — box model, flexbox, grid, animations, responsive design
JavaScript — ES6+, DOM, events, async/await, fetch, localStorage
10 complete projects demonstrating practical skills
Git and GitHub — version control and collaboration

This is the foundation. You are ready to learn a JavaScript framework. Here is a recommended sequence for what comes next.

Phase 1 — React (2–3 months)

React is by far the most in-demand frontend framework. Most job listings for frontend developers require React experience.

Learn these React concepts in order:

JSX syntax — HTML inside JavaScript
Components — functions that return JSX
Props — passing data from parent to child
useState — local component state
useEffect — side effects (data fetching, subscriptions)
Event handling in React
Conditional rendering and lists
Lifting state up — sharing state between components
useContext — global state without prop drilling
React Router — client-side navigation

Project to build:

Rebuild your Todo App (Project 03) in React. Then build a new project: a GitHub User Search that fetches users from the GitHub API and shows their repos.

Resources:

React official documentation (react.dev) — the best starting point
Scrimba's free React course

Phase 2 — TypeScript (1–2 months)

TypeScript adds static type checking to JavaScript. It catches a huge category of bugs before you run the code and makes large codebases much easier to maintain. It is quickly becoming a requirement at professional teams.

Key TypeScript concepts:

Basic types: string, number, boolean, any, unknown, never
Type annotations and type inference
Interfaces and type aliases
Union and intersection types
Generics — reusable typed functions and components
TypeScript with React — typing props, state, and events

Learn TypeScript by adding it to an existing React project, not as a standalone exercise. The best way to learn TS is to use it.

Phase 3 — Next.js (1–2 months)

Next.js is a React framework that adds server-side rendering, file-based routing, API routes, and optimised image handling. Most React jobs now use Next.js or a similar meta-framework.

Key Next.js concepts:

File-based routing (App Router or Pages Router)
Server Components vs Client Components
Data fetching — fetch in server components, use hook
Static generation vs server-side rendering
API routes
Image and font optimisation
Deployment on Vercel

Phase 4 — Testing (ongoing)

Testing is a professional skill that significantly differentiates candidates. Companies value developers who write tested code.

Types of tests (learn in this order):

Unit tests — test individual functions in isolation (Vitest or Jest)
Component tests — test React components (React Testing Library)
End-to-end tests — simulate a real user clicking through the app (Playwright or Cypress)

Key principle:

Write tests that test behaviour, not implementation. "Clicking Submit submits the form" is a better test than "the submitHandler function is called". Tests should break when the user-visible behaviour changes, not when you rename a variable.

Other Technologies Worth Learning

CSS-adjacent (pick based on job requirements)

Tailwind CSS — utility-first CSS framework, very popular
Sass/SCSS — CSS with variables, nesting, and mixins (older but common)
CSS Modules — scoped CSS for React components

State management (learn when you need it)

Zustand — lightweight, simple, popular with React
Redux Toolkit — powerful, verbose, common in larger codebases
TanStack Query — for server state (caching API responses)

Backend basics (makes you much more useful)

Node.js & Express — basic REST API
SQL basics (PostgreSQL)
Prisma — type-safe database ORM for Node.js

How to Choose What to Learn Next

The best answer is: look at job listings for roles you want. Sort by what appears most frequently. Learn what is required, then what is "nice to have". Do not learn everything on this page before applying — start applying once you know HTML/CSS/JS/React + have projects.

The biggest mistake is spending another year learning before applying for jobs. Companies hire juniors. You do not need to be an expert. You need to demonstrate that you can learn and contribute. That is it.

Your Learning Path After This Roadmap