Fix Things and Keep Going
You have real users now. Things are going to break — that's normal. This guide gives you the minimum knowledge to fix problems, keep your project organized, and keep improving.
Three Things That Make Up Every Website
Every website or app — no matter how complex — is built from three things. AI writes all three for you. You just need to know which one is causing a problem.
| What It's Called | What It Does | When Something's Wrong, You'll See |
|---|---|---|
| HTML | The content and structure. Text, images, buttons, forms — what's on the page. | Something is missing, not showing up, or in the wrong place |
| CSS | How it looks. Colors, spacing, fonts, layout — the visual design. | Things overlapping, wrong colors, looks broken on your phone |
| JavaScript | What it does. Clicking buttons, loading data, saving information. | Nothing happens when you click, data doesn't load, error messages |
How to Fix Things When They Break
This is the single most important skill. Not writing code — copying error messages and giving them to your AI with context.
Step 1: Open your browser's developer tools
Right-click anywhere on your page and choose "Inspect" (Chrome/Edge) or "Inspect Element" (Firefox/Safari). This opens a panel that shows you what's happening behind the scenes.
Step 2: Check the Console tab
Click the "Console" tab. Red text = errors. This is where you'll find out what went wrong. Copy the red text exactly — don't try to interpret it yourself.
Step 3: Give it to your AI with context
Paste the error message and explain what you were trying to do:
- "I clicked the Submit button and got this error: [paste the red text]"
- "The page loads but the list of items is empty. Here's the console error: [paste]"
- "It works fine on my computer but when I open it on my phone, the layout is broken"
Common Problems and Where to Look
| What's Happening | Where to Look | What to Tell Your AI |
|---|---|---|
| Page is blank or broken | Console tab — look for red errors | Copy the exact error message and paste it |
| Layout looks wrong | Try resizing your browser window | "The [thing] is overlapping [other thing] on mobile" |
| Button does nothing when clicked | Console tab — look for errors after clicking | "I click [button] and nothing happens. Console shows: [paste]" |
| Data isn't showing up | Console + Network tab | "The page loads but the [data] is missing. Error: [paste]" |
| Works on your computer, breaks online | Hosting dashboard + deploy logs | "It works locally but not when I deploy. Here's the error: [paste]" |
Warning Signs in AI-Generated Code
You can't read every line the AI writes. But you can spot these red flags:
- Passwords or secret keys visible in the code — these should never be in your code files. If you see something that looks like a long random string, ask your AI: "Is this a secret? Should it be in an environment variable instead?"
- Fake data that looks real — AI loves to generate placeholder names, emails, and products. Make sure your app is actually connected to real data, not just showing demo content.
- No "loading" or "error" states — if your app loads data from the internet, something should show while it's loading. A blank screen makes people leave. Tell your AI: "Add a loading message while the data loads, and an error message if it fails."
Keeping Your Project Organized
After a few sessions with AI, your project can get messy. Files everywhere, duplicated code, things that don't work anymore. These habits prevent that:
1. One file should do one thing
If you're not sure what a file does from its name, that's a problem. Tell your AI: "This file is getting big. Split it into smaller pieces and name them clearly."
2. Tell the AI about your existing project
Before each session, give the AI context: "Here's my project. I have files for [X, Y, Z]. Follow the patterns that already exist. Don't create new folders or reorganize things." This prevents the AI from reinventing your project structure every time.
3. Delete what you're not using
Old code that's not being used confuses both you and the AI. If you stopped using something, delete it. If you're worried about losing it, that's what version control is for (ask your AI: "Help me set up Git so I can undo changes if needed").
4. When in doubt, ask the AI to explain
You can always say: "Explain what this file does in simple terms" or "What would happen if I deleted this?" The AI is a patient teacher — use it.
As Your Project Grows
These matter later — not now. Come back to this section when you have real users.
| When | What to Do |
|---|---|
| 0-10 users | Don't worry about code quality. Get it working and get it in front of people. |
| 10-50 users | Keep files small and named clearly. Ask your AI to clean up anything confusing. |
| 50-100 users | Ask your AI about TypeScript (catches mistakes automatically) and testing (makes sure payments work). |
| 100+ users | Invest in proper structure. At this point, consider hiring a developer for a few hours to review your code. |