Full-Stack Web Engineering Guide 2026 · dependency-based curriculum
Professional learning guide · Research checked 30 Aug 2026

Full-Stack Web Engineering Roadmap

This guide shows what to learn first, next, and later. Start with the web basics. Then learn JavaScript, React, and Next.js. After that, learn Node.js, APIs, and databases. Then learn tests, security, and deployment. At the end, learn system design and show one strong project.

JavaScript 25-part roadmap lockedOfficial-doc alignedLearn → Build → Exit criteriaFrameworks after fundamentals
Executive Summary

What to Learn, in the Correct Order

Main rule: learn the easy base first. Do not learn React before HTML, CSS, and JavaScript. Do not learn Next.js before React. Do not learn TypeScript or Node.js before JavaScript. Do not learn an ORM before SQL. Each step makes the next step easier.

1 · FoundationEnvironment → Web → Git → HTML → CSS → JS → Browser APIs → TS
2 · FrontendReact → Next.js → accessibility & UI quality
3 · Backend + DataNode → APIs → SQL → PostgreSQL → data access → auth
4 · QualityIntegration → testing → security → design → reliability
5 · ProductionLinux → Docker → CI/CD → AWS → observability
6 · ProfessionalSystem design → SDLC → AI workflow → project → job evidence

Foundation outcome

  • Build a responsive site without a framework
  • Write clear JavaScript and solve small problems
  • Use DOM, events, fetch, and browser APIs
  • Add safer types with TypeScript

Application outcome

  • Build React UI with clear state and data flow
  • Build a Next.js app with server and client parts
  • Build a Node API with PostgreSQL
  • Check login and access rules on the server

Engineering outcome

  • Show test proof
  • Use OWASP security checks
  • Keep code in clear modules
  • Measure speed and reliability before you decide

Production outcome

  • Run the app with Docker and CI/CD
  • Learn cloud identity, network, servers, and data
  • Use logs, metrics, traces, and alerts
  • Explain your design and trade-offs
Study Standard

How to Use This Guide

Every module in this guide works the same way. Watching a video is not enough. You must be able to use the skill, not just watch it.

Learn

  • Learn the main ideas and words
  • Write small code examples by hand
  • Check new or strange behavior in the official docs

Build

  • Build one small project or feature
  • Test the normal case and the error cases
  • Check it with DevTools, logs, and tests

Exit

  • Can explain the idea in your own words
  • Can build a basic version from an empty file
  • Can find a common bug

Retain

  • Write short notes. Do not copy the docs
  • Practice again later. Solve problems
  • Go back to an old project. Use a new idea in it
Understand → Build → Break → Debug → Test → Explain → Reuse
Professional Context

Engineering Workflow

Use this flow from day one. Use it together with the topics in this guide, not instead of them.

Requirement → Acceptance Criteria → Design → Implement → Test → Review → Release → Observe → Improve
Rule: “It works” is not enough proof. Good proof means: the feature meets the need, edge cases are checked, tests pass, security is checked, deployment is clear, and you can explain the change.
Phase 1 · Web & Programming FoundationsLearn the platform, the language, the browser, and your tools. Do this before any framework.
01

Development Environment & Command Line

Before you write code, learn to use your computer well. Learn files, terminal commands, your editor, and package tools.

Learn

  • Files, folders, paths, extensions
  • Terminal: pwd/cd/ls/mkdir/cp/mv/rm basics
  • Editor, extensions, integrated terminal
  • Browser DevTools: Elements, Console, Network
  • Node/npm install idea and version checks
  • Environment variables concept

Build / Practice

  • Create a project folder only from terminal
  • Open it in editor, run a simple JS file
  • Inspect a public webpage in DevTools

Exit Criteria

  • Can move through files without the GUI
  • Can run commands and read errors
  • Can find browser console/network proof
02

Web Fundamentals

Learn how a browser turns a URL into a web page. This helps you understand both frontend and backend work.

Learn

  • Client, server, request, response
  • URL, origin, domain, DNS, IP, port
  • HTTP methods, headers, body, status-code classes
  • HTTPS/TLS concept
  • Cookies, sessions and same-origin concept
  • CORS: browser policy vs server configuration
  • Cache basics and browser Network tab

Build / Practice

  • Trace one request in DevTools
  • Identify method, headers, status and payload
  • Explain browser → server → response flow

Exit Criteria

  • Can distinguish 401/403/404/500
  • Can explain cookie vs request body
  • Can diagnose basic CORS/network failures
03

Git & Version Control

Learn Git early. Every project after this will use Git to save history, try new ideas, and work with a team.

Learn

  • Repository, working tree, staging area, commit
  • init/clone/status/add/commit/log/diff
  • .gitignore
  • Branches, merge and conflict basics
  • Remote, fetch, pull, push
  • Undo/revert basics
  • Pull request concept and reviewable changes

Build / Practice

  • Put every mini-project in Git
  • Create feature branch and merge it
  • Recover from one intentional mistake

Exit Criteria

  • Can read diff before commit
  • Can work without committing secrets/build files
  • Can explain branch → PR → merge workflow
04

HTML — Document Structure & Semantics

HTML is not a framework. It is the base of every web page. Learn HTML well before you learn JSX in React or Next.js.

Learn

  • Document structure, head/body, metadata
  • Semantic landmarks: header/nav/main/section/article/footer
  • Headings, paragraphs, lists, links
  • Images, audio/video basics and alt text
  • Forms: label, input, select, textarea, button
  • Native validation and form semantics
  • Tables for tabular data
  • ARIA awareness: native HTML first
  • Basic SEO metadata and document outline

Build / Practice

  • Multi-page content site
  • Accessible registration/contact form
  • Keyboard-only navigation test

Exit Criteria

  • Uses semantic element by meaning, not appearance
  • Form inputs have correct labels
  • Page works without CSS/JavaScript
05

CSS — Layout, Responsive Design & Visual System

Learn CSS rules and layout first. Learn this before Tailwind or another CSS framework. If you skip this, CSS bugs become guesswork.

Learn

  • Selectors, cascade, inheritance, specificity
  • Box model, display and normal flow
  • Units, sizing, overflow
  • Typography, color, background and borders
  • Flexbox and Grid
  • Positioning, stacking context and z-index
  • Pseudo-classes/elements and focus states
  • Responsive design, media queries, fluid sizing
  • CSS custom properties
  • Transitions, animation basics, and reduced motion

Build / Practice

  • Responsive dashboard or landing page
  • Mobile, tablet, and desktop layouts
  • Reusable spacing, type, and color tokens

Exit Criteria

  • Can build layout without a UI framework
  • Can debug overflow, flex, and grid issues
  • Focus and responsive states are usable
06

JavaScript Core + Logic Building

This part has 25 steps. Keep the order. It teaches JavaScript, interview basics, logic, and problem solving in one clear path.

JavaScript Core + Logic Building · Final 25-Part Roadmap

Rule: for every part, do this: Concept → Example → Dry Run → Practice → Logic Problem → Interview Question. A part is done only when you can write small code without help, guess its output, find a mistake in it, and explain it in your own words.
Order of importance: Parts 1–11 are everyday JavaScript. Parts 12–17 are deep, interview-level JavaScript. Parts 18–20 are async and runtime. Parts 21–25 are logic and problem solving. Rare, advanced features are not part of this main path.
01. Variables02. Data Types03. Operators04. Type Conversion, Coercion & Truthy/Falsy05. Conditions06. Loops07. Functions08. Arrays09. Objects10. Strings & Common Methods11. Destructuring + Spread + Rest12. Scope13. Hoisting + Temporal Dead Zone14. Closure15. this + Call + Apply + Bind16. Primitive vs Reference + Copying17. Prototype + Class + OOP18. Error Handling19. Asynchronous JavaScript20. JavaScript Execution Context + Event Loop21. Problem Solving Fundamentals22. Logic Building Patterns23. Array & String Problem Solving24. Object-Based Problem Solving25. Algorithms & Problem-Solving Foundations

Phase A · Everyday JavaScript

Parts 1–11 are used a lot in real code. Learn how data moves through functions, arrays, and objects. Do not only memorize syntax.

01Variables
  1. What is a variable
  2. Variable declaration
  3. Variable initialization
  4. let
  5. const
  6. var
  7. Declaration vs initialization
  8. Reassignment
  9. Redeclaration
  10. let vs const vs var
  11. Variable naming rules
  12. camelCase convention
  13. Common variable mistakes
02Data Types
  1. What is a data type
  2. Primitive data types
  3. Non-primitive data types
  4. String
  5. Number
  6. Boolean
  7. Undefined
  8. Null
  9. BigInt
  10. Symbol basics
  11. Object
  12. typeof operator
  13. Dynamic typing
  14. null vs undefined
  15. Primitive vs object type
03Operators
  1. Arithmetic operators
  2. + operator
  3. - operator
  4. * operator
  5. / operator
  6. % modulus
  7. ** exponentiation
  8. Assignment operators
  9. Comparison operators
  10. >, <, >=, <=
  11. == vs ===
  12. != vs !==
  13. Logical AND &&
  14. Logical OR ||
  15. Logical NOT !
  16. Increment ++
  17. Decrement --
  18. Ternary operator
  19. Nullish coalescing ??
  20. Operator precedence
  21. Short-circuit evaluation
04Type Conversion, Coercion & Truthy/Falsy
  1. Explicit type conversion
  2. Implicit type coercion
  3. String()
  4. Number()
  5. Boolean()
  6. parseInt()
  7. parseFloat()
  8. Number conversion rules
  9. Boolean conversion rules
  10. Truthy values
  11. Falsy values
  12. false
  13. 0
  14. Empty string ""
  15. null
  16. undefined
  17. NaN
  18. NaN concept
  19. Number.isNaN()
  20. == coercion behavior
  21. Common coercion interview questions
05Conditions
  1. What is conditional logic
  2. if
  3. else
  4. else if
  5. Nested if
  6. Multiple conditions
  7. Logical operators in conditions
  8. switch
  9. case
  10. default
  11. break in switch
  12. Ternary conditions
  13. Short-circuit conditions
  14. Choosing if vs switch
  15. Common condition-based problems
06Loops
  1. What is iteration
  2. for loop
  3. while loop
  4. do...while
  5. for...of
  6. for...in
  7. Loop initialization
  8. Loop condition
  9. Loop update
  10. Nested loops
  11. break
  12. continue
  13. Infinite loops
  14. Loop dry run
  15. Choosing the correct loop
  16. Counting with loops
  17. Accumulating values with loops
  18. Pattern-based loop problems
07Functions
  1. What is a function
  2. Why functions are used
  3. Function declaration
  4. Function expression
  5. Arrow function
  6. Anonymous function
  7. Parameters
  8. Arguments
  9. Return statement
  10. Return value
  11. Default parameters
  12. Rest parameters
  13. Local variables
  14. Function calling
  15. First-class functions
  16. Callback functions
  17. Higher-order functions
  18. Passing functions as arguments
  19. Returning functions
  20. IIFE basics
  21. Recursion basics
  22. Pure function basics
  23. Function interview patterns
08Arrays
  1. What is an array
  2. Creating arrays
  3. Array indexes
  4. Accessing elements
  5. Updating elements
  6. Array length
  7. Nested arrays
  8. push()
  9. pop()
  10. shift()
  11. unshift()
  12. slice()
  13. splice()
  14. concat()
  15. includes()
  16. indexOf()
  17. lastIndexOf()
  18. join()
  19. reverse()
  20. sort()
  21. forEach()
  22. map()
  23. filter()
  24. find()
  25. findIndex()
  26. some()
  27. every()
  28. reduce()
  29. Array.isArray()
  30. Array iteration
  31. Array method chaining
  32. Common array interview problems
09Objects
  1. What is an object
  2. Creating objects
  3. Properties
  4. Key-value pairs
  5. Dot notation
  6. Bracket notation
  7. Adding properties
  8. Updating properties
  9. Deleting properties
  10. Nested objects
  11. Object methods
  12. Computed properties
  13. Property shorthand
  14. Object.keys()
  15. Object.values()
  16. Object.entries()
  17. Object.assign()
  18. hasOwnProperty()
  19. in operator
  20. Looping through objects
  21. Objects inside arrays
  22. Arrays inside objects
  23. Common object interview problems
10Strings & Common Methods
  1. What is a string
  2. Single quotes
  3. Double quotes
  4. Template literals
  5. String interpolation
  6. String length
  7. Character access
  8. Strings are immutable
  9. toUpperCase()
  10. toLowerCase()
  11. trim()
  12. trimStart()
  13. trimEnd()
  14. includes()
  15. startsWith()
  16. endsWith()
  17. indexOf()
  18. lastIndexOf()
  19. slice()
  20. substring()
  21. replace()
  22. replaceAll()
  23. split()
  24. concat()
  25. repeat()
  26. String comparison
  27. Common string problems
11Destructuring + Spread + Rest
  1. Array destructuring
  2. Object destructuring
  3. Default values
  4. Renaming destructured values
  5. Nested destructuring
  6. Skipping array elements
  7. Destructuring function parameters
  8. Spread syntax ...
  9. Spread with arrays
  10. Spread with objects
  11. Copying arrays using spread
  12. Copying objects using spread
  13. Merging arrays
  14. Merging objects
  15. Rest syntax
  16. Rest parameters
  17. Rest with arrays
  18. Rest with objects
  19. Spread vs rest

Phase B · Deep JavaScript + Interview Core

Parts 12–17 cover scope, hoisting, closures, this, and classes. These parts explain why JavaScript acts in its own way.

12Scope
  1. What is scope
  2. Global scope
  3. Function scope
  4. Block scope
  5. Lexical scope
  6. Scope chain
  7. Inner scope
  8. Outer scope
  9. Variable shadowing
  10. let scope
  11. const scope
  12. var scope
  13. Scope with functions
  14. Scope with blocks
  15. Common scope interview questions
13Hoisting + Temporal Dead Zone
  1. What is hoisting
  2. Variable hoisting
  3. var hoisting
  4. let hoisting
  5. const hoisting
  6. Function declaration hoisting
  7. Function expression hoisting
  8. Arrow function hoisting
  9. undefined during hoisting
  10. Temporal Dead Zone (TDZ)
  11. Why let/const behave differently
  12. Hoisting execution examples
  13. Common hoisting interview questions
14Closure
  1. What is closure
  2. Lexical environment
  3. Outer functions
  4. Inner functions
  5. Remembering outer variables
  6. Returning inner functions
  7. Private variables using closures
  8. Data hiding
  9. Closure with callbacks
  10. Closure inside loops
  11. Closure with counters
  12. Practical closure use cases
  13. Common closure interview problems
15this + Call + Apply + Bind
  1. What is this
  2. How this is determined
  3. this in global context
  4. this inside regular functions
  5. this inside object methods
  6. this inside arrow functions
  7. Lexical this
  8. this inside nested functions
  9. this inside callbacks
  10. this inside classes
  11. call()
  12. apply()
  13. bind()
  14. Setting this manually
  15. Function borrowing
  16. call vs apply
  17. call vs bind
  18. apply vs bind
  19. Common this interview questions
16Primitive vs Reference + Copying
  1. Primitive values
  2. Reference values
  3. Value assignment
  4. Reference assignment
  5. Comparing primitive values
  6. Comparing objects
  7. Mutation
  8. Immutability
  9. Reference sharing
  10. Shallow copy
  11. Deep copy
  12. Spread copy
  13. Object.assign()
  14. Array copy
  15. Nested object copy problem
  16. structuredClone()
  17. JSON stringify/parse cloning
  18. Limitations of JSON cloning
  19. Stack vs heap basic concept
  20. Common reference interview questions
17Prototype + Class + OOP
  1. Object-oriented programming basics
  2. Constructor functions
  3. new keyword
  4. Prototype
  5. prototype property
  6. Prototype chain
  7. Prototypal inheritance
  8. ES6 classes
  9. class syntax
  10. constructor()
  11. Instance
  12. Instance methods
  13. Static methods
  14. extends
  15. super
  16. Inheritance
  17. Encapsulation basics
  18. Polymorphism basics
  19. Getters
  20. Setters
  21. Private fields basics
  22. Class vs constructor function
  23. Class vs prototype
  24. Common OOP interview questions

Phase C · Errors, Async & Runtime

Parts 18–20 cover errors, Promises, async/await, and the event loop. These are key to understanding how real apps behave.

18Error Handling
  1. What is an error
  2. Syntax error
  3. Runtime error
  4. Logical error
  5. ReferenceError
  6. TypeError
  7. RangeError basics
  8. try
  9. catch
  10. finally
  11. throw
  12. Error object
  13. error.message
  14. error.name
  15. error.stack
  16. Creating custom errors
  17. Handling errors properly
  18. Debugging basics
  19. Common error interview questions
19Asynchronous JavaScript
  1. Synchronous JavaScript
  2. Asynchronous JavaScript
  3. Blocking vs non-blocking concept
  4. Callback
  5. Callback nesting
  6. Callback hell
  7. Promise
  8. Promise states
  9. Pending
  10. Fulfilled
  11. Rejected
  12. resolve()
  13. reject()
  14. then()
  15. catch()
  16. finally()
  17. Promise chaining
  18. Returning values from promises
  19. Error handling with promises
  20. async functions
  21. await
  22. async/await flow
  23. try/catch with async/await
  24. Promise.all()
  25. Promise.allSettled()
  26. Promise.race()
  27. Promise.any() basics
  28. Sequential vs parallel async tasks
  29. Common async interview questions
20JavaScript Execution Context + Event Loop
  1. JavaScript engine basics
  2. Execution context
  3. Global execution context
  4. Function execution context
  5. Creation phase
  6. Execution phase
  7. Variable environment
  8. Lexical environment basics
  9. Call stack
  10. Stack frames
  11. Memory heap basics
  12. JavaScript single-threaded behavior
  13. Runtime environment concept
  14. Event loop
  15. Callback queue
  16. Task queue
  17. Microtask queue
  18. Macrotask queue
  19. Promise microtasks
  20. setTimeout behavior
  21. Execution order
  22. Microtask vs macrotask
  23. Call stack + event loop relationship
  24. Common event loop interview problems

Phase D · Logic Building + Problem Solving

Parts 21–25 teach you how to break down a problem, find patterns, work with arrays and objects, and solve interview problems.

21Problem Solving Fundamentals
  1. Understanding the problem
  2. Identifying input
  3. Identifying output
  4. Identifying limits
  5. Breaking problem into smaller parts
  6. Thinking step-by-step
  7. Writing pseudocode
  8. Dry running
  9. Testing manually
  10. Finding edge cases
  11. Handling empty input
  12. Handling duplicate values
  13. Handling negative values
  14. Handling invalid cases
  15. Solving without coding first
  16. Brute-force thinking
  17. Improving a solution
  18. Debugging wrong logic
  19. Comparing multiple approaches
  20. Building logical thinking habits
22Logic Building Patterns
  1. Counter pattern
  2. Accumulator pattern
  3. Flag pattern
  4. Min tracking
  5. Max tracking
  6. Previous value tracking
  7. Current value tracking
  8. Searching pattern
  9. Filtering pattern
  10. Transformation pattern
  11. Comparison pattern
  12. Frequency counting
  13. Duplicate detection
  14. Unique value detection
  15. Nested loop thinking
  16. Multiple conditions
  17. State tracking
  18. Running total
  19. Early return pattern
  20. Breaking large logic into functions
23Array & String Problem Solving
  1. Traversing arrays
  2. Traversing strings
  3. Sum problems
  4. Average problems
  5. Minimum value
  6. Maximum value
  7. Second largest value
  8. Searching values
  9. Counting values
  10. Counting characters
  11. Counting words
  12. Frequency problems
  13. Duplicate detection
  14. Duplicate removal
  15. Unique values
  16. Reverse array
  17. Reverse string
  18. Palindrome problems
  19. Anagram basics
  20. Comparing arrays
  21. Comparing strings
  22. Filtering data
  23. Transforming data
  24. Sorting-based problems
  25. Nested array problems
  26. Flattening basics
  27. Chunking basics
  28. Rotating arrays basics
  29. Common interview-style array problems
24Object-Based Problem Solving
  1. Frequency maps
  2. Key-value lookup
  3. Counting using objects
  4. Character frequency with objects
  5. Word frequency with objects
  6. Grouping data
  7. Mapping IDs to values
  8. Lookup tables
  9. Objects inside arrays
  10. Arrays inside objects
  11. Array of objects problems
  12. Finding objects by property
  13. Filtering objects
  14. Sorting arrays of objects
  15. Grouping arrays of objects
  16. Transforming object data
  17. Nested object traversal
  18. Object + array combined logic
  19. Data aggregation
  20. Common object interview problems
25Algorithms & Problem-Solving Foundations
  1. What is an algorithm
  2. Why algorithms matter
  3. Time complexity basics
  4. Space complexity basics
  5. Big O notation
  6. O(1)
  7. O(n)
  8. O(n²)
  9. O(log n) basics
  10. Linear search
  11. Binary search
  12. Basic sorting concepts
  13. Bubble sort concept
  14. Selection sort concept
  15. Insertion sort concept
  16. Recursion
  17. Base case
  18. Recursive case
  19. Frequency counter pattern
  20. Multiple pointers
  21. Two pointers
  22. Sliding window basics
  23. Brute force
  24. Optimized solution thinking
  25. Comparing algorithm efficiency
  26. Choosing the right approach
  27. Interview problem-solving flow
07

Browser JavaScript & Web APIs

After core JavaScript, learn how JavaScript controls a web page in the browser. This step prepares you for React.

Learn

  • DOM tree, document/window, element selection
  • Create, update, and remove DOM nodes and attributes
  • Events, addEventListener, bubbling, and delegation
  • Forms, FormData, and client-side validation
  • ES modules in browser
  • JSON parse/stringify for data exchange
  • Fetch API, Request/Response, and HTTP errors
  • AbortController and cancel basics
  • localStorage/sessionStorage and storage limits
  • URL, timers, and common browser APIs
  • DevTools debugging and network inspection

Build / Practice

  • Vanilla JS CRUD/todo app
  • Use a public JSON API with fetch
  • Form validation plus loading, error, and empty states

Exit Criteria

  • Can build interactive UI without React
  • Understands how events move
  • Can trace fetch request/response failures
08

TypeScript — Type-Safe JavaScript

TypeScript does not replace JavaScript. It checks types on top of JavaScript. Learn it after your JavaScript is strong.

Learn

  • Type annotations and inference
  • Primitive, object, array, and function types
  • type vs interface
  • Union, intersection, and literal types
  • Narrowing and type guards
  • unknown vs any; never basics
  • Generics
  • Utility types and keyof/typeof basics
  • Optional, readonly, and nullability
  • Modules and declaration basics
  • tsconfig and strict mode
  • Compile-time types vs runtime validation

Build / Practice

  • Convert vanilla JS app to strict TS
  • Type API data and functions
  • Handle unknown external data safely

Exit Criteria

  • Does not use any as a shortcut
  • Can narrow unions safely
  • Knows when runtime validation is still needed
Phase 2 · Frontend Application EngineeringReact needs HTML, CSS, JavaScript, browser APIs, and TypeScript. Next.js needs React.
09

React — Component & State Model

Learn React to build UI from components and state. Do not use it as a shortcut before you know the DOM.

Learn

  • Components, JSX, props, and composition
  • Conditional rendering and list keys
  • Events and state
  • State as a snapshot; update patterns
  • Update objects and arrays safely
  • Controlled forms
  • Lifting state and one source of truth
  • Reducer and Context when the app gets complex
  • Refs
  • Effects for outside systems, not normal data flow
  • Custom hooks
  • React DevTools and component debugging

Build / Practice

  • Search/filter CRUD UI
  • Form with validation and derived state
  • API-backed React app

Exit Criteria

  • Can decide what should be state
  • Can share state without duplicate data
  • Does not use effects for values it can calculate during render
10

Next.js — React Application Framework

Learn Next.js after React. Learn routes, server parts, client parts, data loading, and deployment. Use the current App Router model.

Learn

  • App Router project structure
  • Pages, layouts, and nested routes
  • Linking and navigation
  • Server vs Client Components
  • Server-side data fetching
  • Caching and revalidation basics
  • Server Actions and form changes
  • Route Handlers for HTTP endpoints
  • loading, error, and not-found boundaries
  • Metadata/SEO
  • Environment variables and secrets
  • Authentication and deployment basics

Build / Practice

  • Dashboard with protected routes
  • Server-loaded list + form mutation
  • Loading/error/not-found handling

Exit Criteria

  • Can explain why a component is server or client
  • Can choose where data should load
  • Does not expose server secrets to the client bundle
11

Frontend Quality & Accessibility

Accessibility is not the last step. Practice it from the start, with HTML. This module turns it into a quality check for your React or Next.js UI.

Learn

  • Semantic HTML first; ARIA only when needed
  • Keyboard navigation and visible focus
  • Accessible names, labels and error messaging
  • Focus management after dynamic changes
  • Color contrast and reduced motion awareness
  • Responsive behavior and touch target usability
  • Loading, empty, error, forbidden, submitting and success states
  • WCAG 2.2 awareness and automated/manual checks

Build / Practice

  • Audit your React/Next feature by keyboard
  • Run accessibility tooling + manual checks
  • Fix focus/error-state problems

Exit Criteria

  • Core flow usable without mouse
  • Form errors are understandable
  • Dynamic UI does not lose focus/context
Phase 3 · Backend & Data EngineeringJavaScript runtime → HTTP/API → relational data → authentication → end-to-end integration.
12

Node.js Runtime & npm

Node.js runs JavaScript outside the browser. Learn modules, async I/O, and processes before you use a backend framework.

Learn

  • Node vs browser runtime
  • npm/package.json/scripts/lockfile
  • ESM and CommonJS basics
  • process, environment variables, and arguments
  • fs/path basics
  • Async I/O and event-loop basics
  • Node HTTP server basics
  • Streams and buffers basics
  • Error handling and process lifecycle
  • Debugging and built-in test runner basics

Build / Practice

  • CLI utility reading/writing files
  • Small HTTP server without framework
  • Environment-based config

Exit Criteria

  • Can explain Node vs browser APIs
  • Can read package.json and npm scripts
  • Knows why blocking CPU work makes a server slow
13

Backend & API Engineering

After Node basics, pick one HTTP framework. You do not need Express, Fastify, and Nest all at once. Learn the ideas first.

Learn

  • Routes/endpoints and HTTP methods
  • Request params/query/headers/body
  • Keep route code and business logic separate
  • Middleware, pipes, and guards basics
  • Input validation and safe output
  • Correct status codes and clear errors
  • Pagination, filtering, and sorting
  • One place to handle errors
  • Configuration and secret boundaries
  • Structured logging and request IDs
  • OpenAPI/API docs basics
  • REST basics; version only when needed

Build / Practice

  • CRUD API with checked inputs
  • Error format + pagination
  • OpenAPI/README endpoint contract

Exit Criteria

  • API is predictable for clients
  • Business rules are not hidden in route handlers
  • Invalid input fails safely and clearly
14

SQL Fundamentals

Learn tables and SQL before you learn an ORM. When you understand the database itself, you understand what the ORM is really doing.

Learn

  • Tables, rows, columns and relational thinking
  • CREATE/ALTER basics
  • INSERT, SELECT, UPDATE, DELETE
  • WHERE, ORDER BY, LIMIT/OFFSET
  • INNER/LEFT JOIN
  • GROUP BY, aggregates and HAVING
  • Subqueries and CTE basics
  • Transactions concept
  • Indexes concept and query cost awareness

Build / Practice

  • Design small relational dataset
  • Write joins and aggregate reports
  • Wrap multi-step write in transaction

Exit Criteria

  • Can write common queries without ORM
  • Can explain join result
  • Knows why transaction is needed
15

PostgreSQL & Data Modeling

After SQL, learn PostgreSQL. Learn table design, data rules, indexes, and how to run a real database.

Learn

  • Data types and good type choice
  • Primary/foreign keys
  • NOT NULL, UNIQUE, and CHECK rules
  • One-to-one, one-to-many, and many-to-many
  • Normal tables and when to combine data
  • Transactions and isolation basics
  • Indexes: single and composite basics
  • EXPLAIN and query-plan basics
  • JSONB awareness, not default table design
  • Backup, restore, and connection basics

Build / Practice

  • Schema for users, projects, or orders
  • Add rules that block bad data
  • Compare query plan with and without an index

Exit Criteria

  • Database protects important rules
  • Can explain relationships and indexes
  • Can explain the transaction boundary
16

Data Access, ORM & Migrations

An ORM saves time. It does not replace SQL. Pick one ORM. Learn to check the SQL it creates.

Learn

  • Repository/data-access boundary
  • Schema/model mapping
  • Relations and transactions
  • Migrations and migration history
  • Seed/test data
  • N+1 query problem
  • Raw SQL when the ORM is not enough
  • Connection pooling basics
  • Safe production migration and rollback basics

Build / Practice

  • Connect API to PostgreSQL
  • Create and apply migration
  • Inspect generated SQL for one complex query

Exit Criteria

  • Can debug ORM problem at SQL level
  • No schema change without migration
  • Understands multi-step writes in a transaction
17

Authentication & Authorization

A login screen is not full security. First check who the user is. Then check what the user can do.

Learn

  • Authentication vs authorization
  • Password hashing and safe credential storage
  • Cookie/session model
  • Token/JWT model and trade-offs
  • OAuth 2.0 / OpenID Connect basics
  • Role-based and owner-based access rules
  • Tenant/user scoping
  • Secure cookie flags and session expiry
  • Password reset and email verification basics
  • MFA awareness
  • Server-side checks: never trust hidden UI

Build / Practice

  • Sign in/sign out flow
  • Protected API route
  • Owner and tenant access tests

Exit Criteria

  • Can explain 401 vs 403
  • Cannot access another user's resource by ID change
  • Auth state expires and revokes clearly
18

Full-Stack Integration

Here, you connect frontend, backend, database, and login in one feature. This is your first real full-stack proof.

Learn

  • UI form → request → validation → service → DB → response → UI
  • Shared API rules without tight links
  • What the client checks and what the server checks
  • Credentials, cookies, and CORS in a real flow
  • Loading, empty, error, forbidden, submitting, and success states
  • Optimistic update only when rollback is clear
  • File upload basics and size/type limits
  • Debug across Network → server logs → DB

Build / Practice

  • Authenticated CRUD feature end-to-end
  • Search/filter/pagination
  • Trace one failure across all layers

Exit Criteria

  • Can find the bug layer quickly
  • UI states match server results
  • Data stays saved and permissions stay correct
Phase 4 · Engineering QualityA feature that “works” is not enough. It must be safe to trust and easy to keep working.
19

Testing Strategy

A high test number is not the real goal. The real goal is to test the important, risky parts of your app.

Learn

  • Unit tests for isolated logic
  • Integration tests for API + DB boundaries
  • End-to-end tests for critical user journeys
  • Regression test for fixed bugs
  • Test data/factories and DB isolation
  • Mock external boundaries, not everything
  • Frontend interaction/accessibility checks
  • Deterministic tests and useful assertions
  • Coverage as signal, not target by itself

Build / Practice

  • Test business calculation/validation
  • Test protected API with real test DB
  • E2E login → create → view flow

Exit Criteria

  • Critical rules fail tests when broken
  • Bug fix gets regression proof
  • Tests are stable and readable
20

Application Security

Security starts when you design your app. Use OWASP Top 10:2025 and ASVS as checklists.

Learn

  • Broken access control and least privilege
  • Security misconfiguration
  • Dependency and supply-chain risks
  • Cryptography and secret-handling basics
  • Stop injection with parameterized queries
  • Secure design and threat modeling basics
  • Authentication failure patterns
  • Safe update pipeline basics
  • Security logging and alerts
  • Safe error handling
  • XSS, CSRF, CORS, and security headers
  • Rate limits and abuse controls

Build / Practice

  • Threat-model one feature
  • Access-control negative tests
  • Dependency, secret, and security-header check

Exit Criteria

  • Cannot bypass access by changing the client
  • Secrets are not stored in source or client code
  • Security failures are logged safely
21

Software Design & Maintainability

Memorizing many design patterns will not make code easy to change. Clear structure and readable code will.

Learn

  • Separate different jobs in code
  • Keep related code together; avoid tight links
  • Small focused functions/modules
  • Business logic vs UI, API, and data code
  • Dependency direction
  • Configuration and side-effect boundaries
  • Error model and validation boundaries
  • Refactoring with tests
  • Composition before unnecessary inheritance
  • Modular monolith as a good starting architecture
  • Use patterns only when they solve repeated problems

Build / Practice

  • Refactor one large feature into clear modules
  • Move business logic out of controller/component
  • Document one design decision

Exit Criteria

  • You know where to make a change
  • Core rules can be tested without booting the full app
  • Can explain why the boundary exists
22

Performance & Reliability

Do not guess when code is slow. Measure it. Find the slow part. Fix it. Measure again.

Learn

  • Response time, traffic capacity, and resource use
  • Frontend payload, render, and network basics
  • API timing and database query timing
  • Indexes and N+1 diagnosis
  • Pagination and batching
  • Caching and invalidation trade-offs
  • Timeouts, retries, and backoff
  • Idempotency: safe retry without duplicate writes
  • Health/readiness checks
  • Load testing basics
  • Failure modes and graceful fallback

Build / Practice

  • Measure a slow endpoint
  • Improve query or network bottleneck
  • Add timeout, retry, or idempotency when needed

Exit Criteria

  • Has before/after measurements
  • Can explain failure behavior
  • No retry plan that repeats unsafe writes
Phase 5 · Delivery & Production OperationsLocal application → repeatable build → safe deployment → observable production system.
23

Linux & Runtime Operations

To fix problems on real servers and containers, you need basic Linux skills.

Learn

  • Filesystem and paths
  • Users/groups and permissions
  • Processes, signals and exit codes
  • Ports and basic network inspection
  • Environment variables
  • stdout/stderr and log files
  • CPU/memory/disk inspection basics
  • SSH concept and safe remote access
  • Package/service manager awareness

Build / Practice

  • Run Node app as process
  • Find which process owns a port
  • Inspect logs and stop process safely

Exit Criteria

  • Can investigate “app not running” basics
  • Understands permission errors
  • Can inspect runtime environment safely
24

Docker & Containers

A container packages your app so it can run anywhere. Think of it as a process with its own files and network, not just “a small virtual machine.”

Learn

  • Image vs container
  • Dockerfile and image layers
  • Build cache and .dockerignore
  • Ports and networking
  • Environment/config
  • Volumes and persistence
  • Docker Compose for multi-container local stack
  • Multi-stage builds
  • Health checks and non-root awareness
  • Registry/image publishing concept

Build / Practice

  • Containerize app
  • Compose app + PostgreSQL
  • Rebuild after dependency/source change

Exit Criteria

  • Fresh machine can run stack predictably
  • Database data persists intentionally
  • Secrets are not baked into image
25

CI/CD & Release Workflow

Do not deploy by hand every time. Deployment should be a clear process you can repeat, check, and undo.

Learn

  • CI trigger and pipeline stages
  • Install from lockfile
  • Lint/typecheck/test/build gates
  • Artifacts/images
  • Secrets in CI
  • Environment-specific configuration
  • Database migration sequencing
  • Deployment strategy basics
  • Rollback/revert
  • Protected branches/review gates

Build / Practice

  • PR pipeline: lint + typecheck + tests
  • Build/publish container
  • Deploy test environment and rollback once

Exit Criteria

  • Broken build cannot deploy silently
  • Secrets not printed in logs
  • Rollback path is tested, not assumed
26

AWS Foundations

Knowing service names is not enough. Learn how identity, network, servers, data, storage, and traffic really work together.

Learn

  • IAM: users/roles/policies/least privilege
  • Region/AZ and availability concepts
  • VPC/subnet/security-group basics
  • Compute options and deployment target
  • Managed PostgreSQL/RDS concept
  • S3/object storage
  • Load balancer and DNS/TLS concepts
  • Secrets/config management
  • Scaling and backup basics
  • Cost visibility and tagging awareness
  • AWS Well-Architected six pillars awareness

Build / Practice

  • Deploy app + managed database
  • Store uploaded/static files correctly
  • Restrict permissions and network exposure

Exit Criteria

  • Can draw traffic path
  • Knows which identity can access what
  • Has backup/recovery and cost awareness
27

Observability & Production Operations

You cannot fix real bugs by guessing. Use logs, metrics, and traces to see what the app is doing.

Learn

  • Structured logs and log levels
  • Request/correlation IDs
  • Metrics: latency, traffic, errors, saturation
  • Distributed tracing basics
  • Dashboards and useful alerts
  • SLI/SLO basics
  • Health checks
  • Incident triage and timeline
  • Review after an incident and next actions
  • Avoid sensitive data in logs

Build / Practice

  • Log requests/errors with correlation ID
  • Dashboard basic latency/error metrics
  • Simulate failure and investigate

Exit Criteria

  • Can answer “what failed and where?” from logs and metrics
  • Alerts match real user or system impact
  • Incident review creates clear follow-up work
Phase 6 · Scale, Team Delivery & Career ProofIndividual feature building → larger-system reasoning → professional communication → evidence.
28

System Design & Software Architecture

Good system design is not copying diagrams. It means you design from real needs, real data, and real limits.

Learn

  • What the system must do and how well it must work
  • Traffic, data size, read, and write estimates
  • API and data-model choices
  • Horizontal and vertical scaling basics
  • Cache, CDN, queue, and object storage
  • Data consistency, concurrent users, and safe retries
  • Failure modes and backups
  • Database scaling basics
  • Module and service boundaries
  • Modular monolith vs microservices trade-offs
  • ADR: context, options, decision, result
  • Security, reliability, performance, and cost trade-offs

Build / Practice

  • Design your flagship app at 10× scale
  • Write one ADR
  • Explain bottleneck → next step

Exit Criteria

  • Starts simple and scales with proof
  • Can explain trade-offs, not just components
  • Failure and recovery behavior is clear
29

Team Delivery, Requirements & SDLC

This is the non-coding part of the job. Solve the right problem, explain changes clearly, and release safely.

Learn

  • User/problem statement
  • Scope, limits, and acceptance criteria
  • Break work into reviewable tasks
  • Estimate work and explain uncertainty
  • PR description and code review
  • Technical docs and README
  • Status and blocker updates
  • Release notes and migration notes
  • Incident communication and learning
  • Ownership after release

Build / Practice

  • Write acceptance criteria before a feature
  • PR-style summary + test proof
  • Short architecture/release note

Exit Criteria

  • Another engineer can review or change your feature
  • Risk and test proof are visible
  • Blockers are shared early and clearly
30

AI-Assisted Engineering

AI can help you work faster. But you are still responsible for correct and safe code.

Learn

  • Give requirements, limits, and useful context
  • Use AI for drafts, explanations, tests, and refactor ideas
  • Inspect diffs; do not accept large changes blindly
  • Check APIs and library versions in official docs
  • Run code, tests, typecheck, and security checks
  • Do not paste secrets or private data unless needed
  • Ask for edge cases and failure modes
  • Keep a human decision note for big design changes

Build / Practice

  • AI-assisted feature with a written check list
  • Reject or fix one wrong AI suggestion
  • Compare AI draft with official docs

Exit Criteria

  • Can explain every merged change
  • AI output has a separate check
  • Tool does not replace your fundamentals
31

AI Application Engineering (optional path)

After your core skills are strong, learn AI features only if your project needs them.

Learn

  • Model API and capability choice
  • Prompt and instruction boundaries
  • Structured outputs
  • Tool/function calling
  • Embeddings/RAG basics
  • Grounding and source display
  • Small eval sets and regression checks
  • Prompt injection and data leak awareness
  • Latency, cost, and fallback behavior
  • Human review for high-impact actions
  • Logs and observability without sensitive data

Build / Practice

  • One bounded AI feature
  • Small eval set with pass/fail criteria
  • Failure/fallback path

Exit Criteria

  • Quality is measured, not only “looks good”
  • Permissions are checked outside model text
  • Cost, latency, and failures are visible
32

Flagship Full-Stack Project

Use everything from this guide in one project. One deep, well-built project is better than many small demos.

Core Scope

  • Responsive accessible UI
  • React/Next.js frontend
  • Node API and business logic
  • PostgreSQL + migrations
  • Authentication + access rules
  • Search/filter/pagination
  • Useful error/loading/empty states

Engineering Proof

  • Unit/integration/E2E tests
  • Security checklist and negative auth tests
  • Docker + CI/CD
  • Cloud deployment
  • Logs/metrics
  • Architecture diagram + ADR

Presentation Proof

  • Clear README and setup
  • Live demo/screenshots
  • Data model/API docs
  • Trade-offs and known limits
  • One production-style incident/debug story
33

Job-Ready Evidence

Reading every topic is not enough to be job-ready. You need proof: you can build things, fix things, and explain things on your own.

Scope Control

Learn Later — Not Needed for Core Full-Stack Skill

TopicKnow nowLearn deeply when
KubernetesContainer orchestration ideaYou run many services and need orchestration.
Terraform / IaCInfrastructure-as-code ideaYou manage cloud setup many times.
Kafka / RabbitMQQueue/event ideasYou need async jobs, retries, or events.
GraphQLAPI alternative awarenessYour product needs it.
MicroservicesTrade-offs and service boundariesSeparate scale, teams, or deployments are real needs.
Advanced DSAFinish JS Part 25 firstYour interview target needs trees, graphs, or DP.
Reference

Core Technical Terms

TermMeaning in this guide
HTTPHow browsers and APIs send requests and get responses.
DOMThe browser's object model of an HTML page.
APIA clear way for software parts to talk to each other.
RESTA common HTTP API style based on resources.
DB / SQLDatabase / language used to read and change relational data.
ORMA tool that maps code objects to database tables and queries.
AuthN / AuthZAuthentication = who you are. Authorization = what you can access or do.
CI/CDAutomated checks and deployment flow.
ObservabilitySeeing app behavior through logs, metrics, and traces.
SLI / SLOReliability signal / reliability target.
ADRArchitecture Decision Record: context, options, decision, result.
RAGRetrieval-Augmented Generation: find useful sources before model output.
Research Basis

Official Sources Used to Validate the Learning Order

Framework versions change over time. When you reach a module, check the official docs again to make sure everything is still correct.

MDN CurriculumCore front-end skills and recommended learning scope.
MDN Core Learning ModulesHTML, CSS, JavaScript, accessibility and frameworks.
React LearnComponents, interactivity, state management and escape hatches.
Next.js Getting StartedPrerequisites and App Router learning path.
TypeScript HandbookTypeScript after JavaScript; everyday type-system foundation.
Node.js LearnRuntime, npm, async I/O, HTTP, files, debugging and testing.
PostgreSQL TutorialRelational concepts, SQL, joins, foreign keys and transactions.
OWASP Top 10:2025Current web-application security awareness categories.
OWASP ASVSVerification-oriented secure development requirements.
W3C WCAG 2.2Current accessibility standard and supporting guidance.
Pro GitCore version-control workflow, branching and remotes.
Docker Get StartedImages, containers, Dockerfiles, Compose and runtime concepts.
AWS Well-Architected FrameworkOperational excellence, security, reliability, performance, cost and sustainability.
Full-Stack Web Engineering Guide · Dependency-based professional edition · Research checked 30 Aug 2026