Web Development Learning Roadmap

The Web Developer roadmap, step by step

11 stages and 117 topics, about 44 weeks in all. It starts at beginner level with Internet Fundamentals and ends at advanced level with DevOps & Deployment. It prepares you for roles such as Frontend Developer, Full Stack Developer, UI/UX Developer.

1. 1

   Stage 1: Internet Fundamentals

   2 weeks, Beginner, 8 topics

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

   • How the Internet WorksUnderstand 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 & HTTPSThe 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 & DNSHow 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 WorkThe 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 BasicsTypes 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
2. 2

   Stage 2: HTML

   3 weeks, Beginner, 9 topics

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

   • Semantic HTML5 ElementsUse 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 TypesForm 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 & StructureOrdered/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 & NavigationAnchor 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 & AudioEmbedding 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 TagsTitle 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)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)

   Projects for this stage

   • Personal Portfolio: Build a semantic HTML portfolio with proper headings, nav, and sections
   • Survey Form: Create an accessible form with validation using native HTML attributes
3. 3

   Stage 3: CSS

   4 weeks, Beginner, 14 topics

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

   • Selectors & SpecificityElement, 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 ModelContent, 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 & PositioningBlock, 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 LayoutOne-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 LayoutTwo-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 DesignMobile-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 & BackgroundsColor 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 FontsFont 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 PropertiesCSS 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

   Projects for this stage

   • Responsive Landing Page: Build a mobile-first landing page using Flexbox, Grid, and media queries
   • CSS Art: Create a visual illustration using only CSS shapes, gradients, and transforms
4. 4

   Stage 4: JavaScript

   6 weeks, Intermediate, 15 topics

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

   • Variables & Data Typeslet, 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 & ScopeFunction 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 & Loopsif/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 Methodsmap, 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 & PrototypesObject 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 ManipulationSelecting 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 HandlingaddEventListener, 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 FeaturesTemplate 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 JavaScriptCallbacks, 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 & Debuggingtry/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

   Projects for this stage

   • Interactive Todo App: Build a todo app with DOM manipulation, local storage, and event handling
   • Weather Dashboard: Fetch data from a weather API and display it with dynamic DOM updates
5. 5

   Stage 5: Version Control & Tooling

   2 weeks, Intermediate, 8 topics

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

   • Git Basicsinit, 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 & MergingCreate 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 RequestsRemote 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 ManagementInstalling 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 & PrettierAutomated 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)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
6. 6

   Stage 6: TypeScript

   3 weeks, Intermediate, 9 topics

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

   • Types & InterfacesDefining 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 & AnnotationsHow 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
   • GenericsWrite 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 TypesCombine 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 TypesPartial, 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 & Narrowingtypeof, 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
7. 7

   Stage 7: React

   8 weeks, Advanced, 15 topics

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

   • JSX & ComponentsJSX 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 & StatePassing 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 HooksuseState, 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 & LifecycleHow 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 RouterClient-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 ComponentsControlled 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 APIShare 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 HooksExtract 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

   Projects for this stage

   • E-commerce Product Page: Build a product page with cart, filters, and dynamic data
   • Real-time Chat App: Build a chat UI with WebSocket integration and React state
8. 8

   Stage 8: Next.js & Full-Stack React

   4 weeks, Advanced, 10 topics

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

   • App Router & File-Based RoutingFile-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)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)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 ActionsBuild 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 PatternsFetching 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 RoutingDynamic 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
9. 9

   Stage 9: Backend Development

   6 weeks, Advanced, 12 topics

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

   • Node.js FundamentalsThe 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.jsThe 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 DesignRESTful 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)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 & MongooseDocument 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 & SQLRelational 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 & JWTUser 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 & ValidationInput 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)

   Projects for this stage

   • REST API: Build a complete CRUD API with Express, MongoDB, and JWT authentication
   • Full-Stack App: Connect a Next.js frontend to a Node.js backend with database
10. 10

    Stage 10: Testing & Performance

    3 weeks, Advanced, 8 topics

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

    • Unit Testing (Vitest/Jest)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 TestingTest 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)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 VitalsLCP, 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 & DevToolsAudit 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
11. 11

    Stage 11: DevOps & Deployment

    3 weeks, Advanced, 9 topics

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

    • CI/CD PipelinesContinuous 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 ProductionMulti-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 PlatformsAWS, 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 ProxyWeb 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 CertificatesRegister 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 & SecretsManaging 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