The goal isn't to learn to code. It's to end today with a thing that exists at a URL. Everything below is in order — don't skip step 1, it's the one that saves you the most time.

1. Decide the smallest version

The single biggest cause of a stalled vibe-coded project is starting too big. Write one sentence: "A page that lets me <do one thing>." If your sentence has an "and" in it, cut everything after the "and" — that's version two.

Good v1: "A page where I paste a recipe and it gives me a shopping list." Bad v1: "A recipe app with accounts and saving and sharing."

2. Prime the model

Open a new chat and paste this first. Don't ask for code in the same message.

step-2.txt
I'm building: <your one sentence>

I am new to this. Constraints:
- Plain HTML, CSS and JavaScript in one folder. No build step, no npm,
  no frameworks. I want to open the file in a browser and see it work.
- Everything in as few files as possible.

Give me the plan: what files, what each one does. No code yet.

Read the plan. If it mentions React, Node, a build tool or a database, reply: Too complex. Redo it with no build step. Repeat until the plan is three files or fewer.

3. Get version one working

step-3.txt
Go. Write the files from that plan.

Show me each file complete, with the filename above it. At the end,
tell me exactly how to open it and what I should see on screen.

Make it work before you make it pretty — plain styling is fine for now.

Create the files, open index.html in your browser. Something will be wrong. That's normal and expected — go to step 4.

4. Fix what's broken (properly)

Do not say "it doesn't work". That's the fastest way to get three wrong guesses in a row. Open your browser's console (F12 → Console) and copy the red text.

step-4.txt
Expected: <what should happen>
Actually: <what happens>
Console error, full text:
<paste>

Tell me the root cause in one sentence before you fix anything.

Loop steps 3 and 4 until v1 does the one thing in your sentence. Only then move on.

5. Save a copy before you change anything

The moment it works, duplicate the folder and name it working-v1. This is your undo button. Do this every single time you get something working — it costs five seconds and saves whole evenings.

When you're ready for the real version of this, it's git — but a duplicated folder today beats a git repo you never made.

6. Make it look intentional

step-6.txt
Now style it. Rules:
- Change only the CSS. Do not touch the HTML structure or the JavaScript.
- One accent colour, lots of whitespace, system fonts, works on mobile.
- Support dark mode with prefers-color-scheme.

Show me the complete new CSS file.

Restricting it to one file is the trick. Left unbounded, models "improve" the working parts too, and then you're back at step 4.

7. Check it before it's public

Run the review snippet over each file. The one thing to take seriously: if the model put an API key in a file, that key is public the moment you upload. Ask it where the secrets are and how to keep them out of the browser.

8. Put it online

A folder of plain HTML/CSS/JS can be dragged onto Netlify Drop, Cloudflare Pages or GitHub Pages and be live in about a minute. Ask the model: Walk me through deploying this folder to <host>, assuming I've never done it.

What to do tomorrow

  1. Add the thing you cut after the "and" in step 1 — as one change, not five.
  2. Learn git init, git add ., git commit. Three commands, replaces step 5 forever.
  3. Come back for Context is everything — it's what makes the next project go twice as fast.