PHP
CSS3
HTML
Phase 1 · foundations
Internet, HTML, CSS, JavaScript — weeks 1–6

How internet works

core
  • HTTP/HTTPS, methods, status codes
  • DNS, browser rendering, client/server
  • REST concepts, endpoints

HTML5 & accessibility

  • semantic, forms, validation
  • media, lazy loading, ARIA
  • meta tags, SEO, Open Graph

CSS — layout & design

  • box model, flexbox, grid
  • responsive, variables, BEM
  • animations, micro-interactions

JavaScript (core & advanced)

  • closures, prototypes, classes
  • promises, event loop, fetch
  • DOM, localStorage, modules
portfolio to-do app weather app
Phase 2 · frontend (React + TypeScript)

Git & GitHub

branching, PRs, merge conflicts, CI/CD basics

React (hooks + ecosystem)

components, state, effects, router, custom hooks
zustandreduxreact query

Styling & UI

Tailwind, CSS modules, shadcn/ui, MUI

TypeScript + tooling

interfaces, generics, Vite, ESLint, env
e‑commercegithub search
Phase 3 & 4 · backend & full‑stack

Node.js + Express

REST API, middleware, error handling, versioning

Auth & security

JWT, OAuth2, sessions, bcrypt, RBAC, CORS

SQL (Postgres) + Prisma

joins, indexes, transactions, Prisma schema

Next.js (App Router)

SSR, server components, actions, API routes
SaaS starterchat
Phase 5 · DevOps & deployment

Docker

multi‑stage builds, compose, volumes, networking

CI/CD (GitHub Actions)

pipelines, automated tests, deploy staging/prod

Cloud & monitoring

Vercel, AWS, Render, Sentry, Prometheus
Phase 6 & 7 · testing & advanced

Testing

Vitest, RTL, Playwright, coverage, TDD

System design

microservices, message queues, sharding, CAP

Security & perf

OWASP, Core Web Vitals, CQRS, DDD
structured weekly roadmap
PhaseTimelineMain topicsDeliverable
Phase 1Weeks 1‑6HTML, CSS, JS, internet3 vanilla projects
Phase 2Weeks 7‑16React, TS, Git, state, Tailwind3 React apps
Phase 3Weeks 17‑28Node, Express, Postgres, auth, RedisREST API + DB
Phase 4Weeks 29‑36Next.js, GraphQL, Stripe, S3, WebSocketfull stack SaaS
Phase 5Weeks 37‑44Docker, CI/CD, cloud deploy, monitoringlive app + CI/CD
Phase 6Weeks 45‑50Unit, integration, E2E testing80%+ coverage
Phase 7Weeks 51‑60System design, security, architectureportfolio capstone

industry capstone: full‑stack SaaS

multi‑tenant project manager (simplified Jira) · real‑time · Stripe · S3 · RBAC

Next.js 14 TypeScript Tailwind shadcn/ui Prisma + PostgreSQL Socket.io AWS S3 Stripe GitHub Actions
explore capstone structure

non‑negotiable

  • Git fluency (branch, PR, merge)
  • React + TypeScript
  • REST APIs, SQL, auth (JWT)
  • deployment basics, CI/CD

top free resources

  • javascript.info
  • react.dev / nextjs.org/learn
  • TypeScript handbook
  • "Designing Data-Intensive Apps"
70/30 rule · build > watch