“Full stack” can sound like “learn everything”. It is not. A full stack developer can take a feature from the database to the browser and ship it — which requires solid fundamentals in a handful of areas, learned in an order where each step makes the next one easier. This roadmap is that order.
Time estimates are rough. They assume about 10–15 focused hours a week. Some people move faster, some slower — progress is measured in projects you finish, not weeks on a calendar.
Stage 0: Foundations (2–3 weeks)
Before any framework, get comfortable with the environment you will work in every day:
- Command line basics: navigating folders, running scripts, environment variables.
- Git: commit, branch, merge, pull requests. Put every project on GitHub from the start.
- How the web works: HTTP requests and responses, status codes, DNS, what a browser does with HTML.
Stage 1: HTML and CSS (4–6 weeks)
Semantic HTML and modern CSS are underrated. Learn:
- Semantic elements (
header,nav,main,article) and accessible forms with labels. - The box model, Flexbox and CSS Grid.
- Responsive design with media queries and a mobile-first approach.
- Basic accessibility: colour contrast, keyboard focus, alt text.
Project: rebuild a landing page you like, responsively, without a CSS framework.
Stage 2: JavaScript properly (6–8 weeks)
This is the most important stage. Rushing into a framework without JavaScript fundamentals is the most common reason people get stuck later.
- Variables, types, functions, arrays and objects.
- Scope, closures and
this. - The DOM and events.
- Asynchronous JavaScript: callbacks, promises,
async/await,fetch. - Modules and a basic build tool.
async function loadArticles() {
const res = await fetch("/api/articles?limit=10");
if (!res.ok) throw new Error(`Request failed: ${res.status}`);
const { data } = await res.json();
return data.map(({ id, title }) => ({ id, title }));
}Project: a small app that calls a public API, shows loading and error states and works on mobile.
Stage 3: A frontend framework — React (6–8 weeks)
With JavaScript in place, React clicks much faster.
- Components, props and state; lifting state up.
- Effects and data fetching (and when not to use an effect).
- Routing and forms.
- A meta-framework such as Next.js once basics are solid.
- TypeScript: start using it here; it pays off quickly.
Project: a multi-page app with routing, forms and data from an API.
Stage 4: Backend fundamentals — Node.js (6–8 weeks)
Staying in JavaScript for your first backend reduces context switching. (Java, Python or Go are equally valid later — the concepts transfer.)
- Building a REST API with Express or Fastify.
- Request validation, error handling and logging.
- Authentication: sessions versus tokens, password hashing, never storing plain passwords.
- Environment configuration and secrets.
Stage 5: Databases (4–6 weeks)
- SQL first: tables, relationships, joins, indexes and transactions with PostgreSQL.
- Using an ORM or query builder — after you understand the SQL it generates.
- When a document database or a cache (Redis) makes sense.
Project: connect your React app to your own API and database. Users should be able to sign up, create, edit and delete their own data. This is your first true full stack project.
Stage 6: Testing, deployment and the cloud (4–6 weeks)
- Unit and integration tests for your API; a few end-to-end tests for critical flows.
- Docker for a reproducible environment.
- CI with GitHub Actions: run tests on every pull request.
- Deploying to a platform or a basic cloud setup, with HTTPS, a managed database and monitoring.
Stage 7: Depth and specialisation (ongoing)
Once you can ship end to end, deepen one side: frontend performance and accessibility, or backend architecture, queues and system design. Employers value “full stack with a strength” more than “a little of everything”.
The roadmap at a glance
| Stage | Focus | Proof of skill |
|---|---|---|
| 0 | Terminal, Git, HTTP | Every project on GitHub |
| 1 | HTML, CSS, accessibility | Responsive landing page |
| 2 | JavaScript fundamentals | API-driven app |
| 3 | React + TypeScript | Multi-page app with forms |
| 4 | Node.js APIs, auth | Secure REST API |
| 5 | SQL, ORMs, caching | Full stack CRUD app |
| 6 | Tests, Docker, CI, deploy | Live, monitored project |
Common traps to avoid
- Watching tutorials without building anything of your own.
- Switching languages or frameworks every few weeks.
- Skipping JavaScript fundamentals to “get to React”.
- Building ten small clones instead of two complete, polished projects.
- Ignoring deployment — a project nobody can open is hard to show to employers.
Pick the next stage, choose one project, and finish it. Then do the next one. That is the whole roadmap.
Comments