Vibe Coding for Beginners: Your First Project
You've seen people on Twitter building apps by talking to AI. You've seen the term "vibe coding" everywhere. You want to try it but you've never written a line of code.
Good news: that's the whole point.
Vibe coding means describing what you want in plain English and letting AI write the code for you. The term was coined by Andrej Karpathy (co-founder of OpenAI) in early 2025, and it caught on because it named something people were already doing. This guide to vibe coding for beginners covers the full process: picking a tool, writing your first prompt, fixing what the AI gets wrong, and putting your project on the internet.
You don't need to know HTML, CSS, or JavaScript. You need an idea and 30 minutes.
What You Need
- An AI tool. ChatGPT, Claude, Cursor, or Lovable all work. Free tiers are fine to start.
- An idea for what to build. A personal website, a landing page for your side project, a portfolio, a birthday invite. Keep it simple for your first one.
- Somewhere to publish it. HTMLPub, Lovable's built-in hosting, or any static host. You want your thing on a real URL, not stuck in a chat window.
Step 1: Pick Your Tool
Each tool handles vibe coding differently. Here's the short version:
ChatGPT is the easiest starting point. You already have an account. Ask it to build you a webpage and it will generate HTML you can copy and paste. The limitation: you have to move that code somewhere else to publish it.
Lovable is purpose-built for this. You describe an app or website, it builds it in a visual editor, and you can deploy it directly. Good for more complex projects like multi-page apps. It has a learning curve, but it's manageable.
Cursor is a code editor with AI built in. You write prompts inside the editor and the AI writes code around them. More powerful, more control, steeper ramp-up. Worth it if you plan to keep building. We wrote a full guide to Cursor vibe coding if that's your path.
For your first project, start with ChatGPT or Claude. You can always move to Cursor or Lovable later.
Step 2: Describe What You Want
This is the core skill in vibe coding. Your prompt is your blueprint. Vague prompts produce vague results.
Bad prompt: "Make me a website."
Better prompt: "Build me a single-page personal website. My name is Sarah Chen. I'm a freelance photographer based in Portland. I want a large hero image at the top, a short bio section, a grid of 6 portfolio thumbnails, and a contact form at the bottom. Use a dark background with white text. Keep the fonts clean and modern. The overall feel should be minimal, like a gallery."
The difference is specifics. Tell the AI:
- What sections you want and in what order
- Colors and style. "Dark background, white text" is better than "make it look nice"
- The tone. "Minimal like a gallery" gives the AI a direction. "Professional" doesn't.
- Real content. Use your actual name, your actual bio, your actual details. The AI fills in placeholder text if you don't, and it always sounds fake.
You don't need to know code terminology. "A big image at the top that takes up the whole screen" works. The AI will translate that into a full-width hero section.
Step 3: Review and Iterate
The AI will not get it right the first time. That's normal, not a failure.
Look at what it generated. Some things will be close. Others will be off. Give specific feedback:
- "The portfolio grid is good but make it 3 columns instead of 2."
- "The hero image is too small. Make it fill the full viewport height."
- "The contact form needs a phone number field."
- "Change the background color to #1a1a1a."
Avoid vague feedback like "make it better" or "I don't like it." The more specific you are, the faster the AI converges on what you actually want. Two to four rounds of iteration is typical for a first project.
If you're working in ChatGPT or Claude, each round gives you updated HTML. If you're in Lovable or Cursor, the changes happen live in the editor.
One thing that surprised me when I started vibe coding: the iteration is where you learn. By the third round of feedback, you start noticing patterns. You start understanding what CSS does without ever studying it. That's the real value, not just the output.
Step 4: Publish It
You have working code. Now put it on the internet.
If you used ChatGPT or Claude: Copy the HTML output. Go to HTMLPub, paste it in, and hit publish. You'll have a live URL in about 60 seconds. You can connect a custom domain later if you want.
If you used Lovable: It has built-in hosting. Click deploy and your project gets a URL.
If you used Cursor: You can paste the HTML into HTMLPub, push to GitHub Pages, or use any static host. We have a guide on how to publish a website with AI that covers the options.
The important thing is that your project lives on a real URL. A website sitting in a chat thread doesn't count. Publishing is where vibe coding becomes real.
Common Issues
The AI generates broken code. This happens, especially with complex layouts. If something looks wrong on the live page but looked fine in the AI's preview, try asking: "The layout is broken when I view it in a browser. Can you simplify the CSS and make sure it's responsive?" Simpler code tends to break less.
The output doesn't match your vision. Usually a prompt problem. Go back to Step 2. Add more detail about the specific part that's off. Reference websites you like: "I want the navigation to look like Stripe's homepage nav" gives the AI a concrete target.
Too many iterations, still not right. If you're past 6-7 rounds and still not happy, start a new conversation. Paste your best version so far and describe what still needs to change. A fresh context often works better than a long thread where the AI is trying to remember 15 conflicting instructions.
What's Next
This was the beginner path. Once you're comfortable describing what you want and iterating on the result, you have options.
If you want to understand the differences between this approach and writing code yourself, read vibe coding vs traditional coding. If you're ready for a more powerful tool, the Cursor vibe coding guide walks through the setup. And if you want to build full apps, the Lovable vibe coding tutorial covers that workflow.
The starting point is always the same: describe what you want, let AI write the code, fix what's wrong, publish it. Everything else is refinement.