On this page 10 sections
- 01Stage 1: HTML and CSS (4 to 6 weeks)
- 02Stage 2: JavaScript (8 to 10 weeks)
- 03Stage 3: Git, GitHub and tools (1 to 2 weeks)
- 04Stage 4: A front-end framework (6 to 8 weeks)
- 05Stage 5: Back end (8 to 10 weeks)
- 06Stage 6: Databases (3 to 4 weeks)
- 07Stage 7: Deployment and the real world (ongoing)
- 08Optional but valuable
- 09Your portfolio by the end
- 10Frequently asked questions
Short answer: Learn web development in this order: HTML and CSS → JavaScript → Git → a front-end framework (React) → a back end (Node.js or PHP) → databases (SQL) → deployment and hosting. Build a real project at every stage. With steady practice, most people become job-ready in 9 to 15 months.
There are a thousand roadmaps with a hundred boxes each. That is overwhelming and mostly unnecessary. This is the shorter path I recommend to students who ask me how I learned to build client websites.
Stage 1: HTML and CSS (4 to 6 weeks)
The skeleton and skin of every website.
- Semantic HTML: headings, sections, forms, images, links
- CSS: the box model, Flexbox, Grid, responsive design with media queries
- Accessibility basics: alt text, labels, contrast
Build: a responsive landing page and a copy of a site you admire. I did exactly that in recreating the Clay homepage.
Stage 2: JavaScript (8 to 10 weeks)
The language that makes pages interactive.
- Variables, functions, arrays, objects, loops
- The DOM: selecting elements, events, updating the page
- Fetch and APIs, JSON, promises and async/await
- Modern syntax: modules, destructuring, arrow functions
Build: a weather app using a public API, a quiz, and an interactive form with validation.
Stage 3: Git, GitHub and tools (1 to 2 weeks)
- Commits, branches, pull requests (beginner guide)
- A good editor setup (VS Code), browser DevTools, npm
Stage 4: A front-end framework (6 to 8 weeks)
React is still the most in-demand. Learn components, props, state, hooks, routing and fetching data. Then consider Next.js for full websites. Read React vs Next.js to see the difference.
Add TypeScript once React feels comfortable.
Build: a dashboard or a small e-commerce front end.
Stage 5: Back end (8 to 10 weeks)
Pick one:
- Node.js with Express or a framework. Same language as the front end.
- PHP with Laravel or WordPress. Huge freelance market.
- Python with Django or FastAPI. Great if you also like AI.
Learn routing, REST APIs, authentication, validation and error handling.
Stage 6: Databases (3 to 4 weeks)
- SQL: tables, relations, joins, indexes
- One relational database: PostgreSQL or MySQL
- Basics of an ORM
Build: a full-stack app with login, roles and CRUD, like a booking system.
Stage 7: Deployment and the real world (ongoing)
- Domains, DNS and hosting (guide)
- Deploying to platforms like Vercel, Netlify or a VPS
- Environment variables and secrets
- Performance and Core Web Vitals
- Security basics and HTTPS
- SEO fundamentals (SEO for beginners)
Optional but valuable
- WordPress and plugin development (great for freelancing)
- Testing (unit and end-to-end)
- Docker and CI/CD
- Using AI coding tools responsibly
Your portfolio by the end
- A responsive landing page
- A JavaScript app using an API
- A React project
- A full-stack app with a database and login
- One real website for a real client or organization
Put them on a portfolio website and you are ready to apply or freelance.
Frequently asked questions
Should I learn front end or back end first?
Front end first. You see results immediately, which keeps you motivated, and it teaches you how the web works before you build servers.
Is web development still worth learning with AI?
Yes. AI speeds up coding, but businesses still need people who can design, build, debug, secure and maintain real products.
Do I need a degree to become a web developer?
No. Many web developers are self-taught. A strong portfolio matters most for freelancing and startups.
How long does it take to learn web development?
Roughly 9 to 15 months of consistent practice to become job-ready, and you keep learning for your whole career.
