Stage 0 — Foundations (1-2 weeks)
- HTML semantics + accessibility basics.
- CSS — Flexbox, Grid, custom properties.
- Browser DevTools mastery.
- Git + GitHub.
Stage 1 — JavaScript Core (3-4 weeks)
- Variables (
let/const), data types. - Operators, control flow.
- Functions — declarations, expressions, arrow, default args, rest/spread.
- Closures, scope, hoisting.
this,bind,call,apply.- Arrays + iteration methods (
map,filter,reduce,flatMap). - Objects — destructuring, spread, optional chaining, nullish coalescing.
- ES Modules —
import/export.
Project: Vanilla JS to-do list with localStorage.
Stage 2 — Async JS (2 weeks)
- Promises —
then,catch,finally. async/await.Promise.all,Promise.allSettled,Promise.race.fetch+ AbortController.- Event loop, microtask vs macrotask.
Project: Public-API client with retries + timeouts + error handling.
Stage 3 — The DOM (2 weeks)
- Selection (
querySelector,querySelectorAll). - Manipulation — create, append, remove.
- Events — bubbling, capturing, delegation.
- Forms — validation, FormData.
Project: Interactive form with client-side validation + AJAX submit.
Stage 4 — TypeScript (2 weeks)
- Basic types — primitives, arrays, tuples, enums.
- Functions — parameter and return types, overloads.
- Interfaces vs type aliases.
- Generics.
- Utility types —
Partial,Pick,Omit,Record. tsconfig.jsonstrict mode.
Stage 5 — Frontend Framework — React (6-8 weeks)
- JSX, components, props.
- Hooks —
useState,useEffect,useMemo,useCallback,useRef,useReducer,useContext. - Custom hooks.
- React Router.
- Forms — controlled / uncontrolled / React Hook Form.
- Data fetching — TanStack Query (a.k.a. React Query) or SWR.
- State — Zustand / Redux Toolkit / Jotai.
- Styling — Tailwind / CSS Modules / shadcn/ui.
- Testing — Vitest + Testing Library.
Project: Full-featured dashboard with auth, lists, forms, and protected routes.
Stage 6 — Build Tools + Bundling (1 week)
- Vite (modern default).
- Webpack (legacy but still common).
- Code splitting + lazy loading.
- Environment variables.
Stage 7 — Backend with Node (4-6 weeks)
- Node basics — events, streams, fs, http.
- Express or Fastify or Hono.
- Prisma or Drizzle as ORM.
- PostgreSQL.
- REST APIs — routing, validation (Zod), error handling.
- Authentication — JWT, sessions, NextAuth.js.
- Background jobs — BullMQ + Redis.
Project: REST API powering your React dashboard.
Stage 8 — Full-Stack Meta Framework (4 weeks)
Pick ONE to go deep:
- Next.js — App Router + Server Components + Server Actions.
- Remix — web-fundamentals-first, nested routing.
- SvelteKit — if you want to step outside React.
Stage 9 — Production Skills (ongoing)
- Deployment — Vercel / Netlify / Cloudflare Pages / VPS + Docker.
- Monitoring — Sentry.
- Analytics — Plausible / PostHog.
- CI/CD — GitHub Actions.
- Performance — Lighthouse, Core Web Vitals.
Stage 10 — Specialise (pick one)
- Frontend platform (Storybook, design systems, accessibility).
- Performance (Core Web Vitals, RUM).
- Animation (Framer Motion, GSAP, WebGL).
- Backend (DB design, queues, caching, scale).
- Mobile (React Native / Expo).
Capstone Projects
- A full SaaS — auth, payments (Stripe), email, admin dashboard.
- A live-collab app — websockets, optimistic updates, conflict resolution.
- Open-source contribution to a React/Node library you use.
Time investment
Full-time: 5-7 months to job-ready.
Part-time (10 hr/week): 12-14 months.