Full Stack Web Developer Roadmap

How the Web Actually Works beginner: What happens between typing a URL and a page appearing, before writing a single line of code.

• Client & Server: The two sides of every web request and response.
• HTTP Requests: How a browser asks a server for a page or data.
• DNS & Domains: How a domain name turns into the address of a real server.

HTML & Semantic Markup beginner: Structuring a web page's content in a way browsers, and screen readers, can actually understand.

• HTML Document Structure: The basic skeleton every HTML page is built from.
• Semantic Elements: Tags like header, nav and article that describe content meaning.
• Forms & Inputs: Collecting user input directly in HTML.
• Accessibility Basics: Making pages usable for people relying on assistive technology.

CSS & Layout Systems beginner: Controlling how a page actually looks, from single elements to full page layout.

• The Box Model: How width, padding, border and margin combine for every element.
• Flexbox: A one-dimensional layout system for aligning items in a row or column.
• CSS Grid: A two-dimensional layout system for full page structure.
• Responsive Design: Making layouts adapt to different screen sizes.

JavaScript Language Fundamentals beginner: The core language mechanics every framework and backend tool in this roadmap sits on top of.

• Variables & Data Types: How JavaScript stores and categorizes values.
• Functions: Reusable blocks of logic that take input and return output.
• Arrays & Objects: JavaScript's core structures for lists and key-value data.
• Control Flow: Conditionals and loops that direct a program's execution.

DOM Manipulation beginner: Making a page interactive by changing what's on screen in response to user actions.

• Selecting Elements: Finding specific HTML elements from JavaScript.
• Event Listeners: Running code in response to clicks, input and other events.
• Updating the DOM: Changing page content and structure dynamically.

Asynchronous JavaScript intermediate: How JavaScript handles things that take time, like fetching data, without freezing the page.

• Callbacks: Functions passed to run once an async operation finishes.
• Promises: Objects representing a future value from an async operation.
• Async/Await: Syntax that makes asynchronous code read like synchronous code.
• The Event Loop: How JavaScript handles async tasks despite being single-threaded.

Modern JavaScript (ES6+) intermediate: The syntax features that show up constantly in real codebases and frameworks.

• Arrow Functions: A shorter function syntax with different this behavior.
• Destructuring: Extracting values from arrays or objects into variables.
• Modules (import/export): Splitting code across files and sharing functionality.
• Spread & Rest Operators: Expanding or collecting values in arrays, objects and function calls.

Git & GitHub Fundamentals beginner: Tracking changes to your code and collaborating, the way every real development team works.

• Commits & Branches: Saving snapshots of code and working on changes in isolation.
• Merging & Pull Requests: Combining work from different branches and getting it reviewed.
• Remote Repositories: Syncing local code with a shared repository on GitHub.

Developer Environment & Package Managers beginner: Setting up the tools every JavaScript project actually depends on.

• npm & Package.json: Managing a project's dependencies and scripts.
• Node Version Management: Running different Node.js versions across different projects.
• Browser DevTools: Inspecting, debugging and profiling a page directly in the browser.

React Fundamentals intermediate: Building UI out of reusable, composable components instead of manually manipulating the DOM.

• Components & JSX: React's building blocks and its HTML-like syntax extension.
• Props: Passing data from a parent component into a child.
• State with useState: Data a component tracks and re-renders in response to.
• Conditional & List Rendering: Showing different UI based on data or state.

React Hooks & Side Effects intermediate: Handling data fetching, subscriptions and other effects that happen outside rendering.

• useEffect: Running code in response to component render or data changes.
• Custom Hooks: Extracting and reusing stateful logic across components.
• useContext: Sharing state across components without passing props manually.

State Management & Routing intermediate: Managing state across a whole app and letting users navigate between pages.

• Client-Side Routing: Navigating between views without a full page reload.
• Global State Management: Sharing state across many components without prop drilling.
• Form Handling & Validation: Managing user input and checking it's correct before submission.

Next.js Fundamentals intermediate: The React framework that adds file-based routing, rendering strategies and backend integration.

• File-Based Routing: Pages and routes defined automatically by the file system.
• Server vs Client Components: Where a component actually renders and why it matters.
• Data Fetching in Next.js: Loading data on the server before a page is sent to the browser.
• API Routes: Building backend endpoints directly inside a Next.js project.

Node.js Fundamentals intermediate: Running JavaScript outside the browser to build servers and backend logic.

• The Node.js Runtime: How Node executes JavaScript outside a browser environment.
• Modules & the File System: Organizing backend code and reading or writing files.
• npm Ecosystem for Backend: The common packages a Node backend typically relies on.

Express.js Fundamentals intermediate: The minimal, widely used framework for building a Node.js server and routing requests.

• Routes & Middleware: Handling requests and running logic before a response is sent.
• Request & Response Objects: Reading incoming data and sending data back to a client.
• Error Handling: Catching and responding to failures without crashing the server.

REST API Design intermediate: Structuring endpoints the way clients actually expect a web API to behave.

• HTTP Methods & Status Codes: GET, POST and friends, and what each response code communicates.
• Resource-Based Routing: Structuring endpoints around the data they represent.
• API Versioning: Evolving an API without breaking existing clients.

Relational Databases & SQL intermediate: Storing and querying structured data, the foundation most real applications are built on.

• Tables & Relationships: How relational data is structured and connected.
• SQL Queries: Selecting, filtering and joining data with SQL.
• Database Design & Normalization: Structuring tables to avoid redundant or inconsistent data.

ORMs & Query Builders intermediate: Working with a database from JavaScript code instead of writing raw SQL everywhere.

• ORM Models & Migrations: Defining a database schema in code and evolving it over time.
• Prisma: A modern, type-safe ORM widely used in Node.js and Next.js apps.

NoSQL Basics with MongoDB intermediate: Storing flexible, document-shaped data when a rigid relational schema doesn't fit.

• Documents & Collections: MongoDB's equivalent of rows and tables.
• When to Use NoSQL: Situations where a document database fits better than relational.

Authentication Fundamentals intermediate: Letting users securely sign up, log in and stay logged in.

• Password Hashing: Storing passwords safely so they can't be reversed if leaked.
• Sessions vs JWTs: Two different ways to keep a user authenticated across requests.
• OAuth & Social Login: Letting users log in through Google, GitHub and similar providers.

Web Security Basics intermediate: The common vulnerabilities that show up in beginner projects and how to avoid them.

• SQL Injection: Malicious input manipulating a database query.
• XSS (Cross-Site Scripting): Malicious scripts injected into a page other users view.
• CORS: Controlling which origins are allowed to call your API.

Unit Testing Fundamentals intermediate: Verifying individual pieces of code work correctly, in isolation, before they're combined.

• Test Structure (Arrange, Act, Assert): The standard pattern most unit tests follow.
• Mocking: Faking dependencies so a test only checks the code under test.
• Testing React Components: Verifying components render and behave correctly.

End-to-End Testing advanced: Simulating a real user clicking through the actual application to catch integration bugs.

• E2E Test Scenarios: Writing tests that follow a real user flow through the app.
• Playwright/Cypress Basics: Common tools for automating browser-based end-to-end tests.

Deploying to Vercel intermediate: Getting a Next.js or React app live on the internet with minimal configuration.

• Git-Based Deployments: Automatically deploying on every push to a connected repository.
• Environment Variables: Managing secrets and config separately from code.
• Preview Deployments: Getting a live URL for every branch or pull request.

Deploying a Backend to AWS advanced: Getting a Node.js API and database running on cloud infrastructure beyond a simple platform.

• EC2 & Basic Compute: Running a server on a virtual machine in the cloud.
• Managed Databases (RDS): A cloud provider handling database hosting and maintenance.
• Basic CI/CD for Deployment: Automating tests and deployment on every code change.