DEV Community

Cover image for I Knew Web Dev, But I Couldn’t Build Anything — Here’s What I Changed
Tashfia Akther
Tashfia Akther

Posted on

I Knew Web Dev, But I Couldn’t Build Anything — Here’s What I Changed

If you’re a fresher or someone who has gone through countless tutorials, courses, and playlists but still hasn’t built a project on your own — this post is for you.

I’ve been there.

Watching videos. Reading docs. Understanding things in isolation.

But never feeling confident enough to actually start something independently.

The excuse is always the same:

“I don’t know enough yet.”

Here’s the uncomfortable truth:

You will never feel ready.

What you need isn’t more content.

You need a structure that forces progress.

This post documents what finally worked for me while relearning web development — and how you can follow the same path to build your first real project, even if it’s basic.

This guide is not about perfection.

It’s about building something that works.


Who This Guide Is For

  • Freshers overwhelmed by full-stack tutorials
  • People stuck in tutorial hell
  • Those who “know MERN” but can’t start a project
  • Absolute beginners who want a clear end-to-end path

If that sounds like you, keep reading.


Phase 1: Minimum HTML/CSS, Maximum JavaScript

Don’t overinvest in HTML and CSS at the start.

Learn only:

  • Basic HTML tags
  • Basic CSS
  • Flexbox

Your real focus should be JavaScript.

But here’s the important part most people miss:

Don’t just learn JavaScript — understand how it works internally.

Things that actually matter:

  • How code executes
  • Predicting outputs before running code
  • async / await
  • Promises
  • Arrow functions
  • Scope and closures
  • Call stack and event loop (conceptually)

JavaScript doesn’t click by watching videos.

It clicks when you:

  • Predict outputs
  • Write tiny snippets
  • Break things
  • Fix your own misunderstandings

Phase 2: Learn Backend First (Most People Skip This)

This is where real developers are made.

Learn backend before frontend, in this order:

  • Node.js
  • HTTP servers
  • Express.js
  • Postman (proper API testing)
  • Middlewares
  • Headers & query parameters
  • Authentication (write your own auth)
  • JWT & authorization
  • MongoDB (basic CRUD is enough)
  • Password hashing
  • Zod / input validation

Don’t aim for mastery.

Aim for working knowledge.

If you can:

  • Write routes
  • Protect them with auth
  • Store data
  • Test everything in Postman

You’re doing fine.


Phase 3: Build a Backend Project (No AI, No Shortcuts)

Now build one basic backend project:

  • Todo app
  • Simple e-commerce backend
  • Any CRUD-based system

Yes, it will feel basic.

Yes, AI can generate it in seconds.

Ignore that.

If you can build this without AI, you’re already ahead of most beginners.

Do it the old way:

  • Read docs
  • Google errors
  • Use Stack Overflow
  • Debug manually

Design it yourself:

  • Database schema
  • Auth flow
  • Controllers
  • Routes

Test everything in Postman.

If it works — congratulations.

You’ve covered 70% of backend development.


Phase 4: Learn React (The Last Big Mental Wall)

Now your backend needs a frontend.

This is the right time to learn:

  • React
  • Tailwind CSS

React feels overwhelming at first. That’s normal.

The difference now:

  • You already have a backend
  • You know what data you need
  • You have a real goal

Your task is simple:
Build a frontend for the backend you already made.

Use AI correctly here:

  • Ask about component structure
  • Ask doubts
  • Compare approaches

But don’t copy-paste blindly.

Read it. Understand it. Rewrite it.

Eventually, React stops feeling magical and starts feeling logical.


Phase 5: Level Up With TypeScript & Real Databases

Once you’re comfortable:

Learn:

  • TypeScript
  • WebSockets
  • PostgreSQL
  • Prisma

Then build your second project:
A basic chat application

Same workflow:

  • Database modeling
  • Auth
  • Controllers
  • Routes
  • Postman testing

At this point, you’ve covered 95% of practical web development.

You can read and contribute to real company codebases.


The Remaining 5% (What the Market Actually Pays For)

This part is about productization, not syntax.

Learn:

  • Next.js
  • Monorepos / Turborepo
  • Basic DevOps
  • CI/CD
  • Docker
  • Kubernetes (conceptual understanding)

This turns you into someone who can:

  • Build
  • Deploy
  • Maintain
  • Scale

That’s what the market actually values.


Final Thoughts

This path isn’t glamorous.

It’s not fast.

And it’s definitely not perfect.

But if you complete it once, on your own:

  • You won’t fear new projects
  • You won’t fear large codebases
  • You won’t fear interviews as much

Because at that point, you’re no longer following tutorials.

You’re building.

Top comments (0)