Web Dev Roadmap

June 28, 2026

Someone asked me how to get into making websites, and I put this together for them.

A learning roadmap for getting into web development — roughly in order. 🚀

Phase 1 — Your tools: VS Code + Git basics

Start here before writing a single line of code. Getting comfortable with your environment first saves a lot of frustration later.

VS Code — download this, it'll be your home base. Do the built-in Interactive Playground (Help → Interactive Editor Playground) on day one. Learn the Command Palette (Cmd+Shift+P) early — it lets you find anything without memorizing shortcuts.
learngitbranching.js.org — the best way to understand Git without your eyes glazing over. It visualizes what's actually happening as you type commands.
GitHub Skills — GitHub's own interactive intro. Gets you making real commits and pull requests in an actual repo.
Oh Shit, Git!?! — bookmark this now. You'll need it when something goes sideways (it will).

Phase 2 — HTML, CSS, and your first taste of programming

This is where it starts getting fun. You'll build real things you can open in a browser.

The Odin Project — this is the backbone of your whole journey. Free, project-based, takes you from zero to full-stack. Start at the Foundations path. Don't skip the projects — that's the whole point.
MDN Web Docs — keep this open in a tab always. It's the authoritative reference for HTML, CSS, and JavaScript. Ignore W3Schools.
CSS-Tricks Flexbox & Grid guides — CSS is where most beginners get stuck. These two guides specifically are the clearest explanations on the internet.
Scrimba — interactive screencasts where you can edit the instructor's code inline. Really good for visual learners.
Your first project: build a personal portfolio page. It'll use everything you're learning, and you'll actually care how it looks.

Phase 3 — The command line and going deeper with Git

Once you're comfortable in VS Code and have some HTML/CSS under your belt, the terminal stops being scary.

The Missing Semester of Your CS Education — MIT course, free. Lecture 1 alone is worth your time. Best on-ramp to the shell that exists.
tldr.sh — simplified command references. Way more approachable than man pages for beginners.
explainshell.com — paste any command and it breaks down every flag. Invaluable for stuff you copy-paste from Stack Overflow without knowing what it does.
Pro Git Ch. 1–3 — free book, goes deeper on Git now that you have context. The first three chapters cover 90% of what you'll use day-to-day.
Bonus hook: once you're comfortable in the terminal, try ffmpeg for batch video processing. One-liners that do in seconds what takes minutes in a GUI. You'll get why the CLI matters fast.

Phase 4 — Building a real web app with React

This is where everything clicks into place. Don't rush here — solid HTML/CSS/JS fundamentals first makes React make sense.

javascript.info — before touching React, spend time here. Best standalone JavaScript resource on the internet. Modern, thorough, well-paced.
The Odin Project — Full Stack JavaScript path — continues naturally from Foundations into React. Stay on the same track you started.
React's official docs — the new docs are excellent and tutorial-first. The "Tic Tac Toe" tutorial is the canonical starting point.
freeCodeCamp — good for drilling syntax and filling gaps alongside Odin. Use it as a supplement, not your primary track.

The most important thing: avoid tutorial purgatory — the trap of watching and reading forever without building anything. Every phase above has you making real things. When in doubt, build something, even if it's ugly. That's how it sticks.