Your First Vibe-Coding Project: A One-Page Website

Who it's for: Complete beginners who want to see AI build something real

The problem

You've heard people "vibe code" but don't know where to start. A one-page personal or hobby website is the perfect first win: small, visual, and hard to break.

Copy-paste prompt

Works on free ChatGPT, Claude and Gemini. Replace everything in [brackets].

I'm a complete beginner. Build me a one-page website as a single file called index.html (HTML and CSS only, no frameworks, nothing to install).

About the site:
- It's for: [e.g. my dog-walking side hustle / my Minecraft server / my portfolio]
- Name: [NAME]
- Sections: a headline, a short "about" paragraph, 3 things I offer, and a contact line using this placeholder email: [email protected]
- Style: [e.g. clean, dark mode, a little playful]
- It must look good on a phone.

Then explain, in plain English and no jargon:
1. How to save the file and open it in my browser (Windows or Mac).
2. Which 3 lines to change to put in my own words.
3. One easy way to put it online for free.

Keep the code short and add a comment above each section.

What good output looks like

One block of code you can copy into a text file, save as `index.html`, and double-click. Clear steps for opening it, and the three places to edit. The page should look decent on a phone.

Common mistake

Asking for "a full website with login, database and payments" as your first project. Start tiny: one page, one file. Add features one at a time after it works.

Next step

Change one thing and ask: "Make the headline bigger and add a button that says 'Message me' linking to my email." Repeat. That is vibe coding.

AI can be wrong. Check anything important before you rely on it.