roadmaps / web-developer
How to become a web developer
A practical, stage-by-stage path from complete beginner to hireable full-stack web developer — what to learn, in what order, with free resources at every step.
› Work the stages in order — the fundamentals (HTML, CSS, JavaScript) carry everything after them.
› Every resource is free. Build small projects at each stage; you learn web dev by making things.
› Don't chase every framework. Get solid at the basics, learn one framework well, and ship a portfolio.
Web development is one of the most accessible ways into tech — you see your results instantly in the browser, everything you need to learn is free, and it's judged on what you can build, not your degree. The path is well-trodden: learn the fundamentals, pick a framework, add a backend, and prove it with projects. These eight stages take you from your first HTML tag to a portfolio that gets interviews.
STAGE 01 / 08
HTML & CSS
Every website is built on HTML (structure) and CSS (style). Start here: semantic HTML, the box model, flexbox and grid for layout, and responsive design so your pages work on any screen. Build a few static pages until you can lay out anything you can imagine.
These fundamentals matter more than any framework — a developer who truly understands CSS layout is rare and valuable.
- roadmap.sh — Full-Stack roadmap ↗An interactive visual map of the full web-dev journey — a great big-picture companion to this page.roadmap.sh
- The Odin Project ↗A completely free, project-based full-stack curriculum — the community favorite for self-taught developers.theodinproject.com
- → Our Front-End resource listMDN, the canonical Flexbox/Grid guides, and structured curricula.studylistsvault.com
STAGE 02 / 08
JavaScript
JavaScript is the language of the web — it makes pages interactive and runs everywhere, front end and back. Learn it properly: variables, functions, arrays and objects, the DOM, events, and async (promises, fetch). This is the biggest stage; take your time and build interactive projects.
A strong grasp of vanilla JavaScript makes every framework easy later. Don't skip it to jump to React.
STAGE 03 / 08
Git & developer tooling
Before you go further, learn the tools of the trade. Git and GitHub are how developers version and share code — non-negotiable for any job. Get comfortable with the terminal, your editor (VS Code), the browser dev tools, and the npm ecosystem.
Put every project on GitHub from now on. Your commit history and repos become part of your portfolio.
STAGE 04 / 08
A frontend framework
Modern interactive apps are built with a framework. React is the most in-demand and the safest first choice; Vue and Angular are strong alternatives. Learn components, state, props, hooks, and how to fetch and display data. Build a real app — a dashboard, a to-do app with persistence, anything with moving parts.
One framework, learned well, is far better than a shallow tour of three.
STAGE 05 / 08
Backend & APIs
To be full-stack, you need the server side. Learn how to build an API — routes, handling requests, authentication, and returning JSON. Node.js + Express is the natural first stack for web developers since it's the same language as the frontend. Learn what a REST API is and how the front and back ends talk.
Connect your frontend app to a backend you built, and you've made a real full-stack application.
STAGE 06 / 08
Databases
Real apps store data. Learn SQL and a relational database (PostgreSQL) — SELECTs, JOINs, and schema design — plus how to connect it to your backend. Understand the difference between relational (SQL) and document (NoSQL, e.g. MongoDB) databases and when to use each.
Add persistence to your full-stack project so users' data survives a refresh, and you've covered the core of web development.
STAGE 07 / 08
Deployment & DevOps basics
A project isn't real until it's live. Learn to deploy — put a frontend on a static host, a backend and database on a platform, connect a domain, and set up a basic CI/CD pipeline so pushes deploy automatically. A little Docker knowledge goes a long way here too.
Being able to ship your own app end-to-end, from code to a public URL, is exactly what employers want to see.
STAGE 08 / 08
Portfolio & the job hunt
Now make it count. Build 2–3 portfolio projects that show range — a full-stack app with auth and a database, something with a nice UI, maybe an API. Polish them, deploy them, and write clear READMEs. Quality beats quantity: three finished, deployed projects beat ten half-built ones.
Then prepare for the hunt: a simple portfolio site, a sharp résumé and GitHub, and practice for technical interviews (JavaScript questions, plus data structures and algorithms). You're ready when you can build and ship a real app and talk through how it works.