Why this guide exists
Most "web dev roadmaps" online are either overwhelming walls of technology, or dangerously oversimplified. This one is neither. It's the path I wish I had when I started — straight, ordered, and with enough context to know why you're learning each thing.
Stage 1: The foundation (weeks 1–4)
HTML — the structure of everything
HTML is not a programming language. It's a markup language that tells the browser what things are: headings, paragraphs, images, links, buttons. Before you write a single line of CSS or JavaScript, get comfortable with:
- Document structure:
<!DOCTYPE html>,<html>,<head>,<body> - Semantic elements:
<header>,<main>,<article>,<section>,<footer> - Forms:
<input>,<select>,<textarea>,<button> - Accessibility basics:
altattributes,aria-label, proper heading hierarchy
Your first project: Build a personal profile page. No CSS, just clean semantic HTML. Get used to thinking in content before design.
CSS — making things look good
CSS is where most beginners either fall in love with web dev or give up. Don't give up. Focus on these in order:
- The box model (margin, padding, border, width/height)
- Flexbox — for one-dimensional layouts
- CSS Grid — for two-dimensional layouts
- Custom properties (CSS variables)
- Responsive design with media queries
Your first project: Style your HTML profile page. Make it look like something you'd actually share.
Stage 2: Making things interactive (weeks 5–10)
JavaScript — the behaviour layer
JavaScript makes your pages respond to users. Learn it in this order:
- Variables, data types, operators
- Functions and scope
- DOM manipulation (
querySelector,addEventListener) - Arrays and objects
fetch()and async/await for API calls- ES6+ syntax (arrow functions, destructuring, spread, template literals)
Avoid jumping to frameworks before you're comfortable writing vanilla JS. It'll make everything else make more sense.
Stage 3: Vue and Nuxt (weeks 11–20)
Vue 3 — the reactive framework
Vue is the most approachable JavaScript framework for beginners. Start with:
- The Options API to understand the concepts
- Then move to the Composition API with
<script setup> - Reactivity:
ref(),reactive(),computed() - Components, props, emits
- Vue Router for client-side navigation
Nuxt 4 — the full-stack layer
Once you know Vue, Nuxt gives you everything else: SSR, file-based routing, SEO, API routes, and more. Key concepts:
- File-based routing (
pages/directory) useAsyncDataanduseFetchfor data fetching- Nuxt Content for Markdown-driven pages
- Server routes in
server/api/ - Environment config with
useRuntimeConfig
Stage 4: Going full-stack (weeks 21–30)
- Databases: start with SQLite or PostgreSQL
- ORMs: Drizzle or Prisma
- Authentication:
nuxt-auth-utilsor Lucia - Deployment: Vercel, Netlify, or NuxtHub
Tools to learn alongside
- Git and GitHub — from day one, no exceptions
- VS Code with Volar extension
- Chrome DevTools — your best debugging friend
- Postman for testing APIs
The honest truth
The roadmap above will take you 6–12 months if you're consistent. That means 1–2 hours daily, building something real at each stage. Don't rush to "learn everything" — go deep on each piece before moving on.
The web is learnable. You just have to start.