Full Stack Developer Roadmap

A step-by-step Full Stack Developer roadmap: the full stack, the skills to learn in order and the best places to learn each step.

The stack, end to end

  • Fundamentals: HTTP and HTTPS, DNS, Browsers, Client and server, Git, GitHub, Branching and merging, Pull requests
  • Frontend: HTML, Semantic markup, Forms, Accessibility basics, CSS, Flexbox, CSS Grid, Responsive design, Tailwind CSS, JavaScript, DOM and events, Promises and async/await, ES modules, Fetch API, TypeScript, Interfaces and types, Generics, React, Components and props, State and hooks, React Router, Data fetching
  • Backend: Node.js, npm, Asynchronous programming, Environment variables, Express.js, Routing and middleware, Validation, Error handling, REST API design, JSON, HTTP methods and status codes, API documentation, Authentication, JWT and sessions, Password hashing, OWASP Top 10, Input validation
  • Database: SQL, SELECT and WHERE, JOINs, GROUP BY and aggregates, INSERT, UPDATE, DELETE, MongoDB, Mongoose, Aggregation pipeline, Indexes, Data modelling
  • DevOps: Docker, Dockerfile, Docker Compose, Container networking, CI/CD, GitHub Actions, Automated deployment, Secrets management
  • Get hired: Portfolio projects, Technical resume, Interview preparation

  1. How the internet and the web work

    Suggested pace: Start here

    Before writing code, understand what happens when you open a web page: browsers, servers, DNS, HTTP requests and responses, and what a URL is made of. Everything else you learn sits on top of this.

    Skills

    • HTTP and HTTPS
    • DNS
    • Browsers
    • Client and server

    Tips

    • Open your browser developer tools, go to the Network tab and watch the requests a page makes.

    Where to learn

  2. Version control with Git and GitHub

    Suggested pace: Next

    Git records the history of your code and lets teams work on the same project. Learn to commit, branch, merge, resolve conflicts and open a pull request on GitHub. Almost every software job expects it.

    Skills

    • Git
    • GitHub
    • Branching and merging
    • Pull requests

    Tips

    • Put every practice project on GitHub. It doubles as your portfolio.

    Where to learn

  3. HTML: structure of a web page

    Suggested pace: Then

    HTML describes the content of a page: headings, paragraphs, links, images, lists, forms and tables. Learn semantic tags and accessibility basics so pages make sense to people, search engines and screen readers.

    Skills

    • HTML
    • Semantic markup
    • Forms
    • Accessibility basics

    Tips

    • Build a simple page with no styling first. If it reads well plain, the structure is right.

    Where to learn

  4. CSS: layout and design

    Suggested pace: After that

    CSS controls how a page looks: colours, fonts, spacing, Flexbox and Grid layouts and responsive design for phones and desktops. Add a utility framework such as Tailwind once the basics are clear.

    Skills

    • CSS
    • Flexbox
    • CSS Grid
    • Responsive design
    • Tailwind CSS

    Tips

    • Test every page at phone width first. Most visitors are on phones.

    Where to learn

  5. JavaScript

    Suggested pace: Later

    JavaScript makes pages interactive and also runs on servers. Learn the language properly: types, functions, scope, objects and arrays, the DOM, events, promises and async/await, and modules.

    Skills

    • JavaScript
    • DOM and events
    • Promises and async/await
    • ES modules
    • Fetch API

    Tips

    • Build small things (a to-do list, a quiz, a weather widget) before jumping to a framework.

    Where to learn

  6. TypeScript

    Suggested pace: Later

    TypeScript adds types to JavaScript so many mistakes are caught before the code runs. It is now common in frontend and Node.js teams. Learn basic types, interfaces, generics and how to type API data.

    Skills

    • TypeScript
    • Interfaces and types
    • Generics

    Tips

    • Turn a small JavaScript project into TypeScript to learn quickly.

    Where to learn

  7. React

    Suggested pace: Later

    React builds interfaces from reusable components. Learn components, props, state, hooks, forms, routing and how to fetch and show data from an API.

    Skills

    • React
    • Components and props
    • State and hooks
    • React Router
    • Data fetching

    Tips

    • Build one project with real data and several pages, for example a job board or a recipe finder.

    Where to learn

  8. Node.js

    Suggested pace: Later

    Node.js runs JavaScript on the server. Learn modules, the file system, environment variables, asynchronous code, and building a server that talks to a database.

    Skills

    • Node.js
    • npm
    • Asynchronous programming
    • Environment variables

    Tips

    • Keep secrets such as API keys in environment variables, never in code you commit.

    Where to learn

  9. Express and building a web server

    Suggested pace: Later

    Express is the most common Node.js web framework. Learn routing, middleware, request validation, error handling and serving JSON to a frontend.

    Skills

    • Express.js
    • Routing and middleware
    • Validation
    • Error handling

    Tips

    • Return the right HTTP status codes. Clear errors save hours of debugging.

    Where to learn

  10. REST APIs

    Suggested pace: Later

    An API lets a frontend, a phone app or another system talk to your backend. Learn resources and HTTP methods, status codes, pagination, versioning and how to document an API. Add GraphQL later if you need it.

    Skills

    • REST API design
    • JSON
    • HTTP methods and status codes
    • API documentation

    Tips

    • Test every endpoint with a tool such as Postman before building a frontend on it.

    Where to learn

  11. SQL basics

    Suggested pace: Later

    SQL is how you ask a relational database questions. Learn SELECT, WHERE, ORDER BY, GROUP BY, aggregate functions, joins and how to create, insert, update and delete data.

    Skills

    • SQL
    • SELECT and WHERE
    • JOINs
    • GROUP BY and aggregates
    • INSERT, UPDATE, DELETE

    Tips

    • Practise on real-looking data. Write the query by hand before using any tool that writes it for you.

    Where to learn

  12. MongoDB and document databases

    Suggested pace: Later

    MongoDB stores flexible JSON-like documents. Learn collections, queries, indexes, the aggregation pipeline and how to model data when relations are not enforced for you.

    Skills

    • MongoDB
    • Mongoose
    • Aggregation pipeline
    • Indexes
    • Data modelling

    Tips

    • Design documents around how the app reads them, and remember that indexes matter just as much as in SQL.

    Where to learn

  13. Authentication and web security

    Suggested pace: Later

    Learn how logins work (hashed passwords, sessions, tokens), how to restrict who can see what, and the common web attacks: injection, cross-site scripting and broken access control.

    Skills

    • Authentication
    • JWT and sessions
    • Password hashing
    • OWASP Top 10
    • Input validation

    Tips

    • Never store plain-text passwords, and never trust data coming from the browser.

    Where to learn

  14. Docker and containers

    Suggested pace: Later

    A container packages an app with everything it needs so it runs the same everywhere. Learn images, containers, volumes, networks, Dockerfiles and Docker Compose.

    Skills

    • Docker
    • Dockerfile
    • Docker Compose
    • Container networking

    Tips

    • Containerise one of your own projects end to end.

    Where to learn

  15. CI/CD and automation

    Suggested pace: Later

    Continuous integration runs your tests on every change, and continuous delivery deploys safely. Learn pipelines, build artifacts, secrets and a simple release process, for example with GitHub Actions.

    Skills

    • CI/CD
    • GitHub Actions
    • Automated deployment
    • Secrets management

    Tips

    • Make a pipeline that runs tests on every push to your project.

    Where to learn

  16. Build your portfolio, resume and interview skills

    Suggested pace: When you are ready

    Employers want proof. Finish two or three projects you can show and explain, put them on GitHub, write a clear resume that matches the jobs you apply for, and practise the interview questions for the role.

    Skills

    • Portfolio projects
    • Technical resume
    • Interview preparation

    Tips

    • Describe what you built, why, and what you would improve. That is what interviewers ask about.

    Build your resume · Check your resume (ATS) · Interview questions · Salaries · Browse jobs

Frequently asked questions

Where should I start with Full Stack Developer?

Start at step 1 and work down in order, because later steps build on earlier ones. If you are signed in, the roadmap compares your resume with each step and marks where you could start.

Do I need a degree to work as a Full Stack Developer?

It depends on the employer and the country. Many employers accept proven skills and projects, while others ask for a degree. Read the adverts for the roles you want and ask the employer if it is unclear.

How do I know I am ready to apply?

When you can build a small project from start to finish without copying a tutorial, and explain why you made your choices. Apply while you keep learning; you do not need to know everything.