Okay, let's talk.
You've been using Lovable or Replit or Bolt or some combination of AI tools to generate apps. Maybe you even shipped something. It felt great... until it broke. And you couldn't fix it. And you tried prompting your way out of it for three days. And now you're sitting there thinking "maybe I actually need to learn this stuff."
Yeah. You do. But not as much as you think.
This isn't a "go spend 6 months on fundamentals" article. This is a focused, 30 day plan to go from vibe coder to someone who actually understands what they're building. By the end, you'll still use AI every single day -- but you'll use it like a power tool instead of a crutch.
30 days of focused learning changes everything about how you use AI tools.
Week 1: The Foundation (HTML, CSS, JavaScript Basics)
Goal: Understand what's actually on the screen.
Right now, when AI generates a webpage, you see a wall of tags and classes that means nothing to you. After this week, you'll be able to read it.
Days 1 and 2: HTML and CSS.
Build a personal page from scratch. No frameworks, no AI. Just HTML for structure and CSS for styling. This sounds basic, and it is -- that's the point. You need to know that a <div> is a container, a <form> collects input, and CSS controls how everything looks.
Why it matters: Every React component you'll ever build renders HTML. If you can't read HTML, you can't read React.
Days 3 through 5: JavaScript fundamentals. Variables, functions, arrays, objects. These four concepts are the foundation of literally everything. Every React component, every API call, every database query uses these building blocks.
Don't try to learn all of JavaScript. Learn these four things well enough to write them from scratch.
Days 6 and 7: The [[Terminal|terminal]] and [[Git]]. Navigate folders, run commands, initialize a Git repo, make commits, push to GitHub. This is the professional workflow that Lovable and Replit hide from you.
The Week 1 Test
Week 2: React (Components, State, Props)
Goal: Understand how modern UIs are built.
This is the week everything starts clicking. React is what most AI tools generate, so understanding it means you can finally read, modify, and debug AI output.
Days 8 through 10: Components and JSX. Build your first React components. Understand that a component is just a function that returns JSX (HTML looking code inside JavaScript). Build a Button, a Card, a Header. Compose them together into a page.
Days 11 and 12: Props. Make your components dynamic by passing data in. Build a UserCard that takes name and email as props. Understand that data flows one direction: parent to child.
Days 13 and 14: State and hooks.
This is the big one. Build a counter. Build a form. Build a toggle. Understand that useState lets components remember things, and when state changes, the UI updates automatically.
This single concept -- state causes re renders -- explains 80% of the bugs that vibe coders get stuck on forever. A list not updating? It's a state problem. You can now fix it instead of endlessly prompting AI.
Week 3: Full Stack (Next.js, Supabase, APIs)
Goal: Understand how data flows between frontend and backend.
Days 15 through 17: Next.js. Set up a Next.js project. Understand file based routing (files become pages). Build a multi page app with navigation. Learn the difference between client and server components.
Days 18 through 20: Supabase. Create a project, set up a database table, connect it to your frontend. Build a simple app where you can create, read, update, and delete items. This is CRUD, and it's the backbone of every app.
The key insight: your React frontend calls Supabase's API, Supabase queries the database, and the data comes back. Once you see this cycle, you understand how every web app works.
Day 21: Authentication. Add sign up and login to your app. Supabase makes this easy, but understanding what's happening (creating a user, getting a session token, protecting routes) is what matters.
Week 4: AI Assisted Development (Claude Code + Real Projects)
Goal: Use AI the way professionals do -- as an accelerator, not a replacement.
Days 22 through 24: Set up Claude Code. Install Claude Code, connect it to your project. Start by asking it to explain your existing code. Then ask it to add small features. Review everything it writes. You can read it now -- that's the superpower you built in weeks 1 through 3.
Days 25 through 28: Build a real project. Pick something you actually want. A bookmark manager, a habit tracker, a recipe collection -- whatever. Use Claude Code to build it, but stay in the driver's seat. You decide the architecture, the components, the database schema. AI handles the typing.
Days 29 and 30: Deploy and polish. Push to GitHub, deploy to Vercel, add a custom domain. You've now built and shipped a real full stack app that you understand, can debug, and can extend.
What's Different Now
Think about where you were 30 days ago. You could generate apps but couldn't fix them. Now you can:
- Read any React component and understand what it does
- Debug state issues that used to block you for days
- Design a database schema and explain why you structured it that way
- Connect a frontend to a backend and know the data flow
- Use Claude Code to build features 10x faster -- because you understand the output
- Deploy a real app to the internet and point a domain at it
You didn't become a senior developer in 30 days. Nobody does. But you became something far more valuable than a vibe coder: you became someone who can build software and understand what they built.
AI makes you faster. Fundamentals make the speed useful.