Web Development Learning Roadmap

Career Opportunities

• Frontend Developer
• Full Stack Developer
• UI/UX Developer
• JavaScript Engineer
• React Developer
• Next.js Developer
• Web Performance Engineer
• DevOps Engineer

Step 1: Internet Fundamentals

Understand how the web works before building on it — protocols, DNS, browsers, and hosting

Time: 2 weeks | Level: beginner

• How the Internet Works (required) — Understand the physical and logical infrastructure — ISPs, routers, packets, and the client-server model
  • The internet is a network of networks connected via routers and ISPs
  • Data travels in packets using the TCP/IP protocol stack
  • Clients (browsers) request resources from servers
• HTTP & HTTPS (required) — The protocol that powers the web — request/response cycle, methods, status codes, and TLS encryption
  • HTTP uses methods (GET, POST, PUT, DELETE) to interact with resources
  • Status codes (200, 301, 404, 500) communicate outcomes
  • HTTPS adds TLS encryption for security
• Domain Names & DNS (required) — How human-readable domains are translated to IP addresses via the Domain Name System
  • DNS resolves domain names (google.com) to IP addresses
  • DNS records include A, CNAME, MX, and TXT types
  • Domain registrars manage domain ownership
• How Browsers Work (required) — The rendering pipeline — parsing HTML, building the DOM, CSSOM, layout, paint, and compositing
  • Browsers parse HTML into a DOM tree and CSS into a CSSOM
  • The render tree combines DOM + CSSOM for layout and paint
  • JavaScript can block rendering — script placement matters
• Web Hosting Basics (required) — Types of hosting — shared, VPS, cloud, and static hosting platforms like Vercel and Netlify
  • Static sites can be hosted free on Vercel, Netlify, or GitHub Pages
  • Dynamic apps need server hosting (VPS, cloud platforms)
  • Understand the difference between shared, VPS, and cloud hosting
• TCP/IP & Network Layers (recommended) — The protocol suite that powers internet communication — transport, network, and application layers
  • TCP ensures reliable, ordered data delivery
  • IP handles addressing and routing of packets
  • UDP provides faster but unreliable transport (used in video/gaming)
• CDNs (Content Delivery Networks) (recommended) — How CDNs cache and distribute content across global edge servers to reduce latency
  • CDNs serve static assets from servers geographically close to users
  • Reduces latency and server load significantly
  • Popular CDNs: Cloudflare, AWS CloudFront, Fastly
• What are APIs? (optional) — Understanding Application Programming Interfaces — REST, endpoints, and how frontends talk to backends
  • APIs define how software components communicate
  • REST APIs use HTTP methods on URL endpoints
  • APIs return data in JSON or XML format

Step 2: HTML

The backbone of every webpage — semantic structure, forms, multimedia, and accessibility

Time: 3 weeks | Level: beginner

• Semantic HTML5 Elements (required) — Use header, nav, main, section, article, aside, footer for meaningful document structure
  • Use semantic tags to convey meaning, not just <div> for everything
  • Semantic HTML improves SEO, accessibility, and maintainability
  • Use <main> once per page, <section> for thematic groups, <article> for self-contained content
• Forms & Input Types (required) — Form elements, input types (text, email, date, range), validation attributes, and form submission
  • Use appropriate input types for built-in validation and mobile keyboards
  • Use required, pattern, minlength, maxlength for validation
  • Always associate labels with inputs using the for attribute
• Tables, Lists & Structure (required) — Ordered/unordered lists, description lists, and accessible data tables with proper headers
  • Use <table> for tabular data only, never for layout
  • Use <thead>, <tbody>, <th> with scope for accessible tables
  • Choose <ul>, <ol>, or <dl> based on content semantics
• Links & Navigation (required) — Anchor tags, relative vs absolute URLs, navigation patterns, and link accessibility
  • Use descriptive link text — never 'click here'
  • Understand relative, absolute, and fragment URLs
  • Use target='_blank' with rel='noopener noreferrer' for security
• Images, Video & Audio (required) — Embedding media with <img>, <video>, <audio>, responsive images with srcset, and lazy loading
  • Always provide alt text for images for accessibility
  • Use srcset and sizes for responsive images
  • Use loading='lazy' for images below the fold
• SEO & Meta Tags (required) — Title tags, meta descriptions, Open Graph tags, structured data, and search engine optimization basics
  • Every page needs a unique <title> and <meta description>
  • Open Graph tags control social media sharing previews
  • Use heading hierarchy (h1 → h6) correctly for SEO
• Accessibility (a11y) (required) — ARIA roles, screen reader compatibility, focus management, keyboard navigation, and WCAG guidelines
  • Use native HTML elements before reaching for ARIA
  • Ensure all interactive elements are keyboard-navigable
  • Maintain 4.5:1 color contrast ratio (WCAG AA)
  • Test with screen readers (VoiceOver, NVDA)
• HTML Best Practices (recommended) — Document structure, doctype, charset, viewport meta, and writing clean, maintainable HTML
  • Always declare <!DOCTYPE html> and charset UTF-8
  • Include the viewport meta tag for responsive design
  • Keep HTML semantic and minimal — avoid div soup
• HTML5 APIs (optional) — Canvas, Drag & Drop, Geolocation, Web Storage, and other native browser APIs exposed via HTML
  • Canvas API enables 2D drawing and pixel manipulation
  • Drag & Drop API provides native drag interactions
  • Geolocation API accesses user location (with permission)

Step 3: CSS

Style and layout the web — from box model to Grid, responsive design, animations, and modern CSS architecture

Time: 4 weeks | Level: beginner

• Selectors & Specificity (required) — Element, class, ID, attribute, pseudo-class, pseudo-element selectors and specificity calculation
  • Specificity is calculated as (ID, Class, Element) — higher wins
  • Combinators: descendant, child (>), adjacent (+), general (~)
  • Avoid !important — fix specificity issues instead
• Box Model (required) — Content, padding, border, margin, box-sizing, and understanding how elements take up space
  • Use box-sizing: border-box universally
  • Margin collapses vertically between adjacent elements
  • Padding adds space inside the border, margin adds space outside
• Display & Positioning (required) — Block, inline, inline-block, none, static, relative, absolute, fixed, and sticky positioning
  • position: relative creates a positioning context for children
  • position: absolute removes element from flow, positions relative to nearest positioned ancestor
  • position: sticky toggles between relative and fixed based on scroll
• Flexbox Layout (required) — One-dimensional layout — flex containers, items, alignment, wrapping, ordering, and gap
  • justify-content controls main-axis, align-items controls cross-axis
  • flex: 1 makes items grow equally to fill space
  • Use gap instead of margins for consistent spacing
• CSS Grid Layout (required) — Two-dimensional layout — grid templates, areas, auto-placement, minmax(), repeat(), and responsive grids
  • Use grid-template-areas for readable, named layouts
  • auto-fill + minmax() creates responsive grids without media queries
  • Grid is for 2D layouts, Flexbox for 1D — use both
• Responsive Design (required) — Mobile-first approach, media queries, viewport units, fluid typography, and breakpoint strategy
  • Start mobile-first with min-width media queries
  • Use relative units (rem, em, %, vw) instead of px
  • Set the viewport meta tag for proper mobile rendering
• Colors & Backgrounds (required) — Color formats (hex, rgb, hsl, oklch), gradients, background images, blend modes, and filters
  • HSL is the most intuitive color format for adjustments
  • Use CSS gradients (linear, radial, conic) for design effects
  • oklch and color-mix() are the future of CSS color
• Typography & Web Fonts (required) — Font properties, web fonts, @font-face, variable fonts, and fluid typography with clamp()
  • Use system font stacks for performance, web fonts for brand
  • clamp() creates fluid font sizes without media queries
  • Variable fonts reduce file size with adjustable weight/width
• CSS Custom Properties (required) — CSS variables (--var), theming, dark mode, and dynamic styling with custom properties
  • Define variables on :root for global use
  • Variables cascade and can be overridden per element
  • Perfect for theming and dark/light mode switching
• Animations & Transitions (recommended) — CSS transitions, @keyframes animations, transform, timing functions, and performance considerations
  • Only animate transform and opacity for 60fps performance
  • Use transition for state changes, @keyframes for complex sequences
  • will-change hints the browser to optimize specific properties
• CSS Architecture (BEM) (recommended) — BEM naming convention, organizing stylesheets, avoiding specificity wars, and scalable CSS strategies
  • BEM uses Block__Element--Modifier naming for flat specificity
  • Keep selectors shallow — avoid nesting beyond 2-3 levels
  • Organize CSS by component, not by property type
• Sass / CSS Preprocessors (recommended) — Sass variables, nesting, mixins, partials, and when preprocessors are still useful
  • Sass adds nesting, mixins, and partials to CSS workflows
  • Modern CSS (variables, nesting) replaces many Sass features
  • SCSS syntax is most popular — looks like regular CSS
• Tailwind CSS (recommended) — Utility-first CSS framework — classes, customization, responsive variants, and component extraction
  • Utility classes compose directly in HTML — no context switching
  • Customize via tailwind.config for brand colors, fonts, spacing
  • Extract repeated patterns into components, not @apply
• Container Queries (optional) — Style components based on their container size instead of viewport — the future of responsive components
  • Use container-type: inline-size on a parent to enable queries
  • @container queries style children based on parent width
  • Enables truly reusable responsive components

Step 4: JavaScript

The programming language of the web — from variables and functions to async programming and the DOM

Time: 6 weeks | Level: intermediate

• Variables & Data Types (required) — let, const, var — strings, numbers, booleans, null, undefined, symbols, and type coercion
  • Use const by default, let when reassignment is needed, never var
  • Understand primitive vs reference types
  • Know type coercion rules (== vs ===)
• Functions & Scope (required) — Function declarations, expressions, arrow functions, parameters, closures, and lexical scope
  • Arrow functions don't have their own 'this' binding
  • Closures capture variables from their outer scope
  • Use default parameters and rest/spread syntax
• Control Flow & Loops (required) — if/else, switch, ternary, for, while, for...of, for...in, and iteration patterns
  • Use for...of for arrays, for...in for object keys
  • Optional chaining (?.) and nullish coalescing (??) reduce verbosity
  • Prefer array methods (.map, .filter) over manual loops
• Arrays & Array Methods (required) — map, filter, reduce, find, some, every, flat, spread, destructuring — functional array operations
  • map() transforms, filter() selects, reduce() accumulates
  • Use destructuring for clean variable extraction
  • Spread [...arr] creates shallow copies
• Objects & Prototypes (required) — Object literals, methods, this, prototype chain, classes, inheritance, and object destructuring
  • Objects are collections of key-value pairs
  • The prototype chain powers JavaScript inheritance
  • Classes are syntactic sugar over prototypes
• DOM Manipulation (required) — Selecting elements, modifying content and styles, creating/removing nodes, and traversing the DOM tree
  • querySelector and querySelectorAll select elements with CSS selectors
  • Use textContent over innerHTML for security (XSS prevention)
  • createElement + appendChild for dynamic content creation
• Events & Event Handling (required) — addEventListener, event bubbling/capturing, delegation, preventDefault, and custom events
  • Use addEventListener instead of inline event handlers
  • Event delegation handles events on dynamic/many child elements efficiently
  • Events bubble up — stopPropagation() and preventDefault() control flow
• ES6+ Modern Features (required) — Template literals, destructuring, spread/rest, modules, optional chaining, nullish coalescing, and more
  • Template literals enable string interpolation and multi-line strings
  • Destructuring extracts values from arrays/objects concisely
  • Optional chaining (?.) safely accesses nested properties
• Async JavaScript (required) — Callbacks, Promises, async/await, Promise.all, error handling, and the event loop
  • Promises represent eventual completion or failure of async operations
  • async/await is syntactic sugar that makes async code look synchronous
  • Use Promise.all() for parallel async operations
• Error Handling & Debugging (required) — try/catch/finally, custom errors, debugging with DevTools, breakpoints, and console methods
  • Always catch errors in async code (try/catch or .catch())
  • Use the DevTools debugger — breakpoints beat console.log
  • Create custom Error classes for domain-specific errors
• Fetch API & HTTP Requests (recommended) — Making HTTP requests with fetch(), handling responses, headers, CORS, and working with JSON
  • fetch() returns a Promise — always check response.ok
  • Use response.json() to parse JSON bodies
  • Understand CORS and why browsers block cross-origin requests
• Web Storage & Browser APIs (recommended) — localStorage, sessionStorage, IndexedDB, and other browser storage mechanisms
  • localStorage persists across sessions, sessionStorage clears on tab close
  • Store only strings — use JSON.stringify/parse for objects
  • IndexedDB for larger, structured data storage
• Modules & Import/Export (recommended) — ES modules, named/default exports, dynamic imports, and module bundling concepts
  • Use named exports for multiple values, default for main export
  • Dynamic import() enables code splitting and lazy loading
  • Modules have their own scope — no global pollution
• Regular Expressions (optional) — Pattern matching, character classes, quantifiers, groups, and practical regex for validation
  • Use regex for validation (email, phone) and search/replace
  • Test patterns interactively at regex101.com
  • Named groups (?<name>) improve readability
• Functional Programming (optional) — Pure functions, immutability, composition, higher-order functions, and declarative patterns
  • Pure functions have no side effects and return consistent outputs
  • Immutability prevents bugs from shared mutable state
  • Compose small functions instead of writing monolithic ones

Step 5: Version Control & Tooling

Git, GitHub, package managers, linters, and build tools — the professional developer toolkit

Time: 2 weeks | Level: intermediate

• Git Basics (required) — init, add, commit, status, log, diff — the core workflow of tracking changes locally
  • Stage changes with git add, snapshot them with git commit
  • Write clear, descriptive commit messages
  • Use git log and git diff to review history and changes
• Branching & Merging (required) — Create branches for features, merge strategies, resolving conflicts, and rebasing
  • Branches isolate feature work from the main codebase
  • Merge brings branches together — resolve conflicts carefully
  • Rebase creates a cleaner linear history but rewrites commits
• GitHub & Pull Requests (required) — Remote repositories, push/pull, forking, pull requests, code review, and GitHub features
  • Push local branches to GitHub and open Pull Requests for review
  • PRs enable code review, discussion, and CI checks before merging
  • Use Issues to track bugs and features
• npm & Package Management (required) — Installing packages, package.json, scripts, semantic versioning, and npm vs yarn vs pnpm
  • package.json defines project dependencies and scripts
  • Understand semantic versioning (^major.minor.patch)
  • Use npm scripts for build, test, and dev workflows
• ESLint & Prettier (required) — Automated code linting and formatting — catch bugs and enforce consistent style
  • ESLint catches bugs and enforces code quality rules
  • Prettier auto-formats code — no more style debates
  • Configure both to work together without conflicts
• Vite (Build Tool) (required) — Modern build tool with instant dev server, HMR, and optimized production builds using Rollup
  • Vite uses native ES modules for instant dev server startup
  • Hot Module Replacement (HMR) updates code without full reload
  • Vite has replaced Webpack as the standard for new projects
• Git Workflows (recommended) — GitFlow, trunk-based development, feature branches, and team collaboration patterns
  • Trunk-based development keeps branches short-lived
  • Feature branches isolate work until ready for review
  • Choose a workflow that matches your team size and release cadence
• GitHub Actions (CI/CD) (optional) — Automated workflows for testing, building, and deploying code on every push or PR
  • Workflows run on events (push, PR) defined in YAML files
  • Automate tests, linting, and deployment on every commit
  • Use marketplace actions for common tasks

Step 6: TypeScript

Add static types to JavaScript — catch bugs at compile time, improve DX, and write more maintainable code

Time: 3 weeks | Level: intermediate

• Types & Interfaces (required) — Defining shapes with type aliases and interfaces — when to use each and how they differ
  • Use interfaces for object shapes (extendable), types for unions/intersections
  • Both define contracts that TypeScript enforces at compile time
  • Prefer interfaces for public APIs — they produce better error messages
• Type Inference & Annotations (required) — How TypeScript infers types automatically and when you need to add explicit annotations
  • TypeScript infers types from initial values — don't annotate the obvious
  • Annotate function parameters and return types for clarity
  • Use 'as const' for literal type narrowing
• Generics (required) — Write reusable, type-safe functions and components that work with any type
  • Generics parameterize types — like function arguments but for types
  • Use constraints (extends) to limit what types are accepted
  • Generic components in React accept flexible prop types
• Union & Intersection Types (required) — Combine types with | (union) and & (intersection) for flexible, precise type definitions
  • Union types (A | B) accept either type — narrow with type guards
  • Intersection types (A & B) combine all properties from both types
  • Discriminated unions use a shared literal field for safe narrowing
• Utility Types (required) — Partial, Required, Pick, Omit, Record, Exclude, ReturnType and other built-in type helpers
  • Partial<T> makes all properties optional — great for update functions
  • Pick<T, K> and Omit<T, K> extract or exclude specific properties
  • Record<K, V> creates an object type with known key and value types
• Type Guards & Narrowing (required) — typeof, instanceof, in operator, custom type predicates, and exhaustive checking with never
  • Type guards narrow union types within conditional blocks
  • Custom type predicates (is keyword) create reusable guards
  • Exhaustive checks with never ensure all cases are handled
• Enums & Literal Types (recommended) — String/numeric enums, const enums, literal types, and when to use each approach
  • Prefer string literal unions ('a' | 'b') over enums for simplicity
  • const enums are inlined at compile time — zero runtime cost
  • Use enums when you need reverse mapping or computed values
• tsconfig & Project Setup (recommended) — Configuring strict mode, module resolution, paths, and common compiler options
  • Enable strict mode for maximum type safety
  • Configure path aliases (@/) for clean imports
  • Understand module vs moduleResolution options
• Advanced Patterns (optional) — Conditional types, mapped types, template literal types, and infer keyword for type-level programming
  • Conditional types (T extends U ? X : Y) enable type-level logic
  • Mapped types transform existing types property by property
  • Template literal types construct string types dynamically

Step 7: React

The most popular UI library — components, hooks, state management, routing, and modern React patterns

Time: 8 weeks | Level: advanced

• JSX & Components (required) — JSX syntax, function components, component composition, and thinking in components
  • Components are functions that return JSX (UI description)
  • JSX is syntactic sugar for React.createElement calls
  • Components must return a single root element (use fragments <>)
• Props & State (required) — Passing data with props, managing local state with useState, and understanding re-rendering
  • Props flow down (parent → child), state is local to a component
  • setState triggers a re-render with the new state value
  • Never mutate state directly — always create new references
• Core Hooks (required) — useState, useEffect, useRef, useMemo, useCallback — the essential hooks API
  • useEffect handles side effects (data fetching, subscriptions, DOM)
  • useRef persists values across renders without causing re-renders
  • Hooks must be called at the top level — never inside conditions or loops
• Rendering & Lifecycle (required) — How React renders, commit phase, reconciliation, keys, and understanding when components re-render
  • React re-renders when state changes or parent re-renders
  • Keys help React identify which list items changed
  • The virtual DOM diffs minimize actual DOM updates
• React Router (required) — Client-side routing — routes, nested layouts, dynamic parameters, navigation, and loaders
  • Define routes declaratively with Route components or objects
  • useParams() extracts dynamic URL segments
  • Nested routes enable shared layouts across pages
• Forms & Controlled Components (required) — Controlled vs uncontrolled inputs, form handling, validation, and form libraries (React Hook Form)
  • Controlled inputs have their value driven by React state
  • React Hook Form reduces re-renders with uncontrolled refs internally
  • Use Zod or Yup with form libraries for schema validation
• Context API (required) — Share state across the component tree without prop drilling — createContext, Provider, useContext
  • Context avoids prop drilling for global data (theme, auth, locale)
  • Context changes re-render ALL consumers — don't overuse it
  • Split contexts by domain to minimize unnecessary re-renders
• Custom Hooks (required) — Extract and share stateful logic across components with reusable custom hooks
  • Custom hooks encapsulate reusable stateful logic (useLocalStorage, useFetch)
  • Name custom hooks with 'use' prefix — enables linting rules
  • Hooks compose — build complex hooks from simpler ones
• State Management (recommended) — When Context isn't enough — Redux Toolkit, Zustand, Jotai, and choosing the right solution
  • Zustand is the lightest option — simple API, minimal boilerplate
  • Redux Toolkit is the standard for large, complex state
  • Most apps don't need global state — start with local state + context
• Data Fetching (TanStack Query) (recommended) — Server state management — caching, refetching, pagination, and optimistic updates
  • TanStack Query handles caching, deduplication, and background refetching
  • Separates server state from client state cleanly
  • Provides loading, error, and success states automatically
• Performance Optimization (recommended) — React.memo, useMemo, useCallback, code splitting, lazy loading, and profiling with DevTools
  • React.memo prevents re-renders when props haven't changed
  • useMemo caches expensive computations, useCallback caches functions
  • Use React DevTools Profiler to identify rendering bottlenecks
• Component Patterns (recommended) — Compound components, render props, higher-order components, and composition patterns
  • Composition (children prop) is preferred over inheritance
  • Compound components share implicit state (like <Select> + <Option>)
  • Render props and HOCs are legacy — prefer hooks for logic reuse
• Styling in React (recommended) — CSS Modules, Tailwind CSS, styled-components, CSS-in-JS, and choosing a styling approach
  • Tailwind CSS is the most popular choice for React projects
  • CSS Modules provide scoped styles without runtime cost
  • styled-components/emotion offer dynamic styles but add bundle size
• Suspense & Error Boundaries (optional) — Declarative loading states with Suspense, catching errors with Error Boundaries, and lazy()
  • Suspense shows a fallback UI while async content loads
  • lazy() code-splits components — loaded only when rendered
  • Error Boundaries catch rendering errors and show fallback UI
• React Server Components (optional) — The new paradigm — server-rendered components with zero client JS, data fetching on the server
  • Server Components render on the server — zero client JS
  • Use 'use client' directive for interactive components
  • Data fetching happens directly in Server Components — no useEffect

Step 8: Next.js & Full-Stack React

The React framework for production — SSR, SSG, API routes, and full-stack TypeScript applications

Time: 4 weeks | Level: advanced

• App Router & File-Based Routing (required) — File-system routing, layouts, loading states, error handling, and route groups
  • Folders define routes, page.tsx renders the UI
  • layout.tsx wraps pages and persists across navigations
  • loading.tsx and error.tsx provide automatic loading/error UI
• Server-Side Rendering (SSR) (required) — Dynamic rendering on each request — when to use it, data fetching, and streaming
  • SSR generates HTML on every request — always fresh data
  • Use for personalized or frequently changing content
  • Streaming SSR sends HTML progressively with Suspense
• Static Site Generation (SSG) (required) — Pre-render pages at build time for maximum performance — generateStaticParams and static exports
  • Static pages are generated once at build time — fastest possible
  • Use generateStaticParams for dynamic routes with known paths
  • ISR (Incremental Static Regeneration) rebuilds pages on a schedule
• API Routes & Server Actions (required) — Build backend endpoints with route handlers and mutate data with server actions
  • route.ts files in app/api/ create REST API endpoints
  • Server Actions allow forms to call server functions directly
  • No need for a separate backend for many use cases
• Data Fetching Patterns (required) — Fetching data in Server Components, caching strategies, revalidation, and parallel data loading
  • Fetch data directly in Server Components — no useState/useEffect
  • Next.js extends fetch() with caching and revalidation options
  • Use parallel fetching to avoid request waterfalls
• Dynamic Routing (required) — Dynamic segments [slug], catch-all routes [...slug], optional catch-all, and route parameters
  • [slug] captures a single dynamic segment
  • [...slug] catches all nested segments
  • generateStaticParams pre-renders dynamic routes at build time
• Middleware (recommended) — Run code before requests — authentication checks, redirects, rewrites, and geolocation
  • Middleware runs at the edge — before the request reaches your routes
  • Use for auth checks, redirects, A/B testing, and rate limiting
  • Defined in middleware.ts at the project root
• Image & Font Optimization (recommended) — next/image for responsive images, next/font for zero-layout-shift fonts, and performance wins
  • next/image auto-optimizes, resizes, and lazy-loads images
  • next/font loads fonts with zero layout shift
  • Both significantly improve Core Web Vitals
• Authentication (NextAuth) (recommended) — Auth.js (NextAuth) for OAuth, email, and credential-based authentication in Next.js
  • Auth.js supports OAuth providers (Google, GitHub), email, and credentials
  • Session management works with both JWT and database strategies
  • Protect routes with middleware or server-side session checks
• Deployment (Vercel) (recommended) — Deploy to Vercel with zero config, environment variables, preview deployments, and custom domains
  • Vercel deploys Next.js with zero configuration
  • Every push creates a preview deployment for review
  • Set environment variables in the Vercel dashboard

Step 9: Backend Development

Server-side programming with Node.js — APIs, databases, authentication, and full-stack architecture

Time: 6 weeks | Level: advanced

• Node.js Fundamentals (required) — The JavaScript runtime — modules, event loop, file system, streams, and the Node.js ecosystem
  • Node.js runs JavaScript outside the browser using V8
  • The event loop enables non-blocking I/O — single-threaded but concurrent
  • CommonJS (require) vs ES Modules (import) — prefer ESM
• Express.js (required) — The most popular Node.js framework — routing, middleware, error handling, and API development
  • Middleware functions process requests in a pipeline
  • Use Router for modular route organization
  • Centralized error handling with error middleware
• REST API Design (required) — RESTful conventions — resource naming, HTTP methods, status codes, pagination, and versioning
  • Use nouns for endpoints (/users, /posts), HTTP methods for actions
  • Return appropriate status codes (201 Created, 404 Not Found)
  • Implement pagination, filtering, and sorting for list endpoints
• Databases (SQL vs NoSQL) (required) — Understanding relational vs document databases, when to use each, and core database concepts
  • SQL (PostgreSQL, MySQL) — structured data with relationships
  • NoSQL (MongoDB) — flexible schemas, document-based
  • Choose based on data structure, relationships, and query patterns
• MongoDB & Mongoose (required) — Document database — CRUD operations, schemas, indexes, aggregation, and Mongoose ODM
  • MongoDB stores data as flexible JSON-like documents
  • Mongoose adds schema validation and helper methods on top of MongoDB
  • Use indexes for query performance on frequently searched fields
• PostgreSQL & SQL (required) — Relational database — SQL queries, joins, indexes, migrations, and Prisma/Drizzle ORMs
  • SQL uses SELECT, INSERT, UPDATE, DELETE with typed schemas
  • JOINs combine data across related tables
  • Prisma provides type-safe database access with auto-generated types
• Authentication & JWT (required) — User authentication with JSON Web Tokens, password hashing (bcrypt), and session management
  • JWTs encode user claims and are verified with a secret key
  • Always hash passwords with bcrypt — never store plaintext
  • Use refresh tokens for long-lived sessions, short-lived access tokens
• API Security & Validation (required) — Input validation (Zod), rate limiting, CORS, helmet, and protecting against common attacks
  • Validate ALL input with Zod or Joi — never trust client data
  • Use rate limiting to prevent abuse and DDoS
  • Set CORS headers and use helmet for HTTP security headers
• GraphQL Basics (recommended) — Query language for APIs — schemas, resolvers, queries, mutations, and when to use over REST
  • Clients request exactly the data they need — no over/under-fetching
  • Schema defines types, queries, and mutations
  • Best for complex data graphs with many relationships
• WebSockets & Real-Time (recommended) — Bi-directional real-time communication — Socket.io, use cases, and scaling considerations
  • WebSockets maintain persistent connections for real-time data
  • Use for chat, notifications, live dashboards, and collaborative editing
  • Socket.io adds reconnection, rooms, and broadcasting
• Caching (Redis) (recommended) — In-memory caching for performance — Redis data structures, TTL, and caching strategies
  • Cache database queries and API responses for faster reads
  • Set TTL (time-to-live) to auto-expire stale cache entries
  • Redis supports strings, lists, sets, and sorted sets
• Docker Basics (recommended) — Containerize your applications — Dockerfiles, images, containers, docker-compose, and dev environments
  • Docker packages your app with its dependencies in a container
  • Dockerfile defines how to build your image step by step
  • docker-compose orchestrates multi-container apps (app + db + redis)

Step 10: Testing & Performance

Ship with confidence — unit testing, integration testing, E2E testing, and web performance optimization

Time: 3 weeks | Level: advanced

• Unit Testing (Vitest/Jest) (required) — Test individual functions and components in isolation — assertions, mocks, and test organization
  • Test pure functions and component behavior, not implementation
  • Use describe/it blocks for organized test structure
  • Vitest is faster than Jest and compatible with Vite projects
• Integration Testing (required) — Test how components and modules work together — API integration, database queries, and middleware
  • Test user interactions and component integration, not internal state
  • React Testing Library renders components and queries the DOM
  • Test the behavior users see, not the implementation details
• E2E Testing (Playwright) (required) — Test complete user flows in a real browser — page navigation, form submission, and cross-browser testing
  • Playwright tests run in real browsers (Chrome, Firefox, Safari)
  • Test critical user paths: signup, login, checkout, etc.
  • Use locators based on text/role/test-id — avoid CSS selectors
• Core Web Vitals (required) — LCP, INP, CLS — the metrics Google uses for search ranking and what they measure
  • LCP (Largest Contentful Paint) — main content load time < 2.5s
  • INP (Interaction to Next Paint) — responsiveness < 200ms
  • CLS (Cumulative Layout Shift) — visual stability < 0.1
• Lighthouse & DevTools (required) — Audit performance, accessibility, and SEO with Lighthouse and the Chrome Performance tab
  • Lighthouse audits give actionable recommendations for improvement
  • Performance tab shows a flame chart of rendering and scripting
  • Network tab reveals slow requests, large bundles, and missing caching
• Code Splitting & Lazy Loading (recommended) — Split bundles for faster initial loads — dynamic imports, React.lazy, and route-based splitting
  • Dynamic import() loads modules only when needed
  • Route-based splitting loads each page's JS independently
  • Analyze bundle size with tools like webpack-bundle-analyzer
• Accessibility Testing (recommended) — Automated and manual accessibility testing with axe, Lighthouse, and screen reader validation
  • Automated tools catch ~30% of issues — manual testing catches the rest
  • Tab through your app to verify keyboard navigation works
  • Test with screen readers (VoiceOver on Mac, NVDA on Windows)
• Error Tracking & Monitoring (optional) — Track errors in production with Sentry, monitor performance with analytics, and set up alerts
  • Sentry captures runtime errors with stack traces and context
  • Set up alerts for error spikes and performance regressions
  • Source maps enable readable stack traces in production

Step 11: DevOps & Deployment

Ship and scale your applications — CI/CD, containers, cloud platforms, and production operations

Time: 3 weeks | Level: advanced

• CI/CD Pipelines (required) — Continuous Integration and Deployment — automated testing, building, and deploying on every commit
  • CI runs tests on every push — catch bugs before merging
  • CD auto-deploys to staging/production after tests pass
  • GitHub Actions, GitLab CI, and CircleCI are popular CI/CD platforms
• Docker in Production (required) — Multi-stage builds, optimizing images, docker-compose for production, and container registries
  • Multi-stage builds reduce final image size dramatically
  • Use .dockerignore to exclude node_modules and build artifacts
  • Push images to registries (Docker Hub, GitHub Container Registry)
• Cloud Platforms (required) — AWS, GCP, Azure — compute, storage, databases, and choosing the right services for your app
  • Use managed services (RDS, S3, Lambda) over self-managed when possible
  • Vercel/Railway for full-stack apps, AWS/GCP for complex infrastructure
  • Understand the shared responsibility model for security
• Nginx & Reverse Proxy (required) — Web server configuration — serving static files, reverse proxying, SSL termination, and load balancing
  • Nginx reverse proxies requests from port 80/443 to your app
  • Configure SSL/TLS certificates for HTTPS
  • Set up gzip compression and caching headers
• Domains & SSL Certificates (required) — Register domains, configure DNS records, set up SSL with Let's Encrypt, and custom domain deployment
  • Point A/CNAME records from your registrar to your hosting
  • Use Let's Encrypt for free, auto-renewing SSL certificates
  • Certbot automates certificate issuance and renewal
• Environment Variables & Secrets (required) — Managing configuration, .env files, secret managers, and keeping credentials secure
  • Never commit secrets to git — use .env files (in .gitignore)
  • Use platform secret managers (Vercel, AWS SSM) for production
  • Prefix NEXT_PUBLIC_ only for values safe to expose to the browser
• Monitoring & Logging (recommended) — Application logging, structured logs, monitoring dashboards, and alerting for production issues
  • Structured logging (JSON) enables searching and filtering
  • Monitor key metrics: response time, error rate, CPU/memory
  • Set up alerts for anomalies — don't wait for users to report issues
• Kubernetes Basics (optional) — Container orchestration — pods, deployments, services, scaling, and when you actually need K8s
  • Kubernetes orchestrates containers across multiple machines
  • Most teams don't need K8s — start with simpler deployment options
  • Use managed K8s (EKS, GKE) if you do need it
• Serverless Functions (optional) — Run code without managing servers — AWS Lambda, Vercel Functions, and event-driven architecture
  • Serverless scales automatically — pay only for execution time
  • Cold starts can add latency — keep functions small
  • Great for APIs, webhooks, and background processing