Becoming a web developer: a realistic roadmap for beginners
What order to learn things in, how long each step takes, and where people get stuck. Why starting with a framework backfires, and why deployment is the most skipped step — along with frequently asked questions.
Most people starting out approach this from the wrong angle: they learn a framework, finish the tutorial, and then when they sit down to write their own project, they can't do anything. The issue isn't talent, it's the order.
This post outlines a recommended order. It also answers the question "how much is enough?" for each step, because the time you lose isn't spent on unknown topics—it's spent on topics that have no clear endpoint.
Note: Who is this for?
Anyone starting from scratch or struggling to piece together scattered knowledge. The timeframes assume you aren't studying full-time and can dedicate about 2–3 hours a day.
Phase 0 — How does the internet work? (1 week)
Before writing code, understand what a request actually is. This is a one-week job, and skipping it costs you at every step down the road. Everyone who doesn't understand CORS errors, confuses 401 and 403, or says "I deployed it to the server but it doesn't work" missed this foundation.
What to learn: Client-server relationship, what DNS does, HTTP methods (GET/POST/PUT/DELETE), status codes, headers, cookies.
How much is enough: If you can open the browser's network tab and explain step-by-step what happens when a page loads, you're good.
Related post: HTTP status codes — ultimate reference
Phase 1 — HTML and CSS (3–4 weeks)
Don't learn HTML as "memorizing tags"; learn it semantically. Using <nav>, <article>, or <button> instead of <div> isn't just cosmetic: screen readers, keyboard navigation, and search engines all rely on this distinction.
In CSS, there are really only two core topics—the rest is detail: the box model and layout (Flexbox + Grid). Until you wrap your head around these, you won't be able to implement any design system.
How much is enough: When you can build a design just by looking at it, without copy-pasting, and it doesn't break on mobile.
Warning: Don't get stuck here
Don't skip to a CSS framework (like Tailwind or Bootstrap) before this phase. Using Tailwind without understanding the box model leads to memorizing classes and scratching your head when they don't work. Learning Tailwind takes two days once you actually know CSS.
Phase 2 — JavaScript (6–10 weeks)
It's completely normal for this phase to take a while, and trying to rush through it is the most expensive mistake you can make.
The language itself: variables, scope, functions, arrays and objects, map/filter/reduce, destructuring, modules.
Asynchronous JavaScript: Promises, async/await, fetch. I'm calling this out specifically because when you move to the backend, everything relies on this.
DOM: Selecting elements, listening to events, changing content. You won't use this directly once you move to React, but you can only understand what React is doing under the hood if you know this.
How much is enough: When you can write a page that fetches data from an API, lists it on screen, filters it, and handles error states—all without a framework.
Related post: Best resources and roadmap for learning JavaScript
Phase 3 — Git (1 week, then forever)
If you learn Git just as a "code backup" tool, you'll hit a brick wall the moment you run into your first merge conflict. Spend a week on it, then use it in every project.
What to learn: commit, branch, merge, conflict resolution, git log, git revert. You don't need to know rebase at the start.
Related post: Git basics: introduction to version control
Phase 4 — A framework, just one (6–8 weeks)
I recommend React and Next.js—most job postings in Turkey ask for them, and the ecosystem is the largest here. But sticking to one is far more important than which one you choose. Anyone who starts with Vue and switches to Svelte three weeks later ends up learning neither.
What to learn: Component-driven thinking, props, state, lists, forms, data fetching, routing.
How much is enough: When you can build a custom idea—not copied from a tutorial—from start to finish.
Tip: When to use a UI library?
At the end of this phase. Using pre-built components at the start delays your learning of how to actually build components. After that, choosing one is a major decision: Choosing a React UI library
Phase 5 — Backend and databases (6–8 weeks)
After learning frontend, the most natural transition is to Node.js: you get to use the same language without the burden of learning a second one. If you're using Next.js, you're already writing backend logic anyway using Route Handlers and Server Actions.
What to learn: Writing endpoints, data validation, authentication, relational database basics (SQL, primary/foreign keys, JOINs), an ORM.
Database choice: Start with PostgreSQL. If you think you need NoSQL, you probably don't.
Related post: Form validation in Next.js: client and server-side
Phase 6 — Deployment (2 weeks)
This is the most skipped step, yet it makes the biggest difference in hiring. A project running locally doesn't mean much; a live, working URL does.
What to learn: Connecting domain names, environment variables, setting up databases in production, HTTPS, a basic deployment pipeline.
Start with Vercel; then try deploying something with Docker on your own server. Experiencing the difference between the two is what truly teaches you what "deployment" actually means.
How long does it all take?
Important: The honest answer
Between 6 to 9 months at 2–3 hours a day. Content claiming "become a web developer in 3 months" skips Phase 0, 3, 5, and 6—essentially everything you actually need once you get hired.
This timeframe isn't about "knowing everything"; it's about reaching a job-ready level. The learning continues after you land a job—the difference is you'll be getting paid to learn.
Frequently asked questions
Which language should I start with? For frontend, there's no choice: HTML, CSS, and JavaScript. For backend, Node.js, Python, and PHP are all valid; since you're already learning JavaScript, Node.js doesn't add the burden of picking up a second language.
Should I choose frontend or backend? Get a taste of both at the beginning, then dive deep into one. Starting out as "fullstack" usually means staying superficial in both. However, you do need foundational knowledge of both to get things live.
Can I do this without a computer science degree? Yes. In this field, your portfolio speaks much louder than a degree. But a lack of knowledge in algorithms and data structures will catch up with you at some point—but you can always patch that gap later.
How many projects should I build? Depth matters, not quantity. Two projects that are built end-to-end, deployed live, and solve a real problem are worth far more than ten projects copied from tutorials.
Will AI tools hinder my learning? If you just generate code and move on without understanding it, yes. If you read the generated code line-by-line and question why it was written that way, it will speed you up. The benchmark is simple: can you explain the code you wrote to someone else?
Is English required? At a reading level, absolutely. Almost all documentation and error messages are in English. Speaking fluency is only necessary if you are looking for jobs abroad.
When should I start looking for jobs? Once you finish Phase 6. If you have two live projects and a GitHub profile with a consistent commit history, you are ready. Waiting to "learn a bit more" is usually just procrastination.
Should I go to a bootcamp? If you can stay self-disciplined, you don't need one; the resources are out there for free. However, having someone to ask when you're stuck and having an external schedule can be a massive accelerator. The decision isn't about budget; it's a question of your ability to progress on your own.
Tip: Let's talk where you get stuck
You can walk this roadmap entirely on your own—all resources are free. But at a point where you can't figure out where you're stuck, a single session can save you weeks. I do this through corporate training cohorts and 1-on-1 mentoring; you can check availability and how I work there.
Final word
The most critical feature of this roadmap is the order. Skipping phases doesn't save time; it comes back to bite you twice as hard in the next phase: someone who jumps into React without fully learning JavaScript isn't learning React, they're just memorizing a specific pattern—and the moment they need to step outside that pattern, they hit a wall.
The path that looks slow is actually the fast one.
