Vibe-coding: build your first web page by talking to AI

Vibe-coding is simple to describe: you say what you want in ordinary words, an AI writes the code, and you keep adjusting until it does what you meant. People build real, working things this way. They also get badly stuck, usually for the same few reasons.

Start with something small and real

Not "build me a system". Something like: a one-page site for a salon, with services, prices, a gallery and a WhatsApp button. Small enough to finish today, real enough to be useful.

Describe it like a brief, not a wish

Weak: "make me a nice salon website." Better: "One HTML file. A header with the salon name and a WhatsApp button. A services section with six items, each with a name, a short line and a price in KES. A gallery of six photos. Colours: deep green and cream. It must look right on a phone."

Specific inputs, specific outputs. Say what it should look like on a phone, because that is where your visitors are.

Run it before you ask for more

Save what you get as index.html, open it in your browser, and look. This is the step beginners skip, and it is the one that teaches you. Half-working is normal at this stage.

Fix one thing at a time

When something is wrong, say exactly what you see and what you expected: "On my phone the menu covers the logo. The logo should stay on the left and the menu should collapse into a button." One problem per message. Long lists of complaints produce muddled rewrites.

When the AI gives you an error you do not understand, paste the whole error message. Do not summarise it.

Learn just enough to read it

You do not need to be a developer. You need to recognise four things: HTML is the content, CSS is the appearance, JavaScript is the behaviour, and a browser's "Inspect" tool shows you which is which. With that, you stop being at the mercy of the AI. You can change a colour or a word yourself instead of spending three messages asking for it.

Keep versions

When something works, save a copy before the next big change. index-working.html is a perfectly good backup. The most common disaster in vibe-coding is a working page rewritten into a broken one with no way back.

Where it genuinely struggles

Confident, wrong answers. Made-up function names. Code that works in the snippet and not in your page because the AI forgot the rest of the file. Security and payments are not the place to learn this way. For anything handling money or personal data, get a developer to look at it.

What to do this week

Build the one-page site. Put it online free with GitHub Pages or Netlify. Send the link to a friend and watch them use it on their phone. That loop — describe, run, fix, ship — is the whole skill. Everything else is practice.

We teach exactly this, hands-on, in our AI and vibe-coding classes. You leave with a project that is live.