If your prompt (your instructions to the AI) is vague, messy, or missing key info, you’ll end up with broken code, error loops, or something totally unrelated to your idea.
This tutorial will show you how to write effective prompts that actually get results. We’ll walk through real examples and break down what works—and what doesn’t.

Step 1: Get Clear on What You Want to Build
Before you talk to the AI, take 2 minutes to write down:

• What do you want to make? (e.g., a landing page, a to-do app, a chatbot)
• What should it do? (e.g., collect emails, add items to a list, answer questions)
• How should it look? (optional, but helpful)

✅ Good Prep Example:
I want to create a one-page website that shows my photography portfolio, has a contact form, and works on mobile.
❌ Bad Prep Example:
I need a website.

Why it matters: The AI can’t guess your vision. The more specific you are, the better the output.

Step 2: Write Prompts That Give Clear Instructions
Now, let’s look at how to actually ask the AI to help you build something.
Example: Create a Simple Landing Page

Bad Prompt:
Make a landing page for me.

Why it’s bad: It’s too vague. What’s the topic? What’s on the page? What should it look like?

Good Prompt:
Write HTML and CSS for a landing page that promotes a free eBook about time management. It should have a headline, a short paragraph, an email signup form, and a clean, modern design. Make sure it’s mobile-friendly.

Why it’s good: It’s clear, goal-oriented, and tells the AI exactly what elements are needed.

Step 3: Be Specific About Features
If you're building something with interactive features (like a form or a to-do list), specify exactly how it should work.
Example: Build a To-Do App

Bad Prompt:
Make a to-do app.

Why it’s bad: No one knows what you mean by "make." Should it be in HTML, React, Python? Should it store tasks? Does it need a database?

Good Prompt:
Create a simple to-do list app in HTML, CSS, and JavaScript. It should let the user add tasks, mark them as complete, and delete them. Keep the design minimal and mobile responsive.

Why it’s good: It includes the tech stack (HTML/CSS/JS), user actions (add, complete, delete), and design preferences.

Step 4: Ask for Explanations (If You’re Curious or Confused)
AI is great at not just writing code—but teaching you how it works.

Prompt Tip:
Explain what this JavaScript code does, step by step.
Or:
Can you simplify this code and comment it so I understand?
You’ll get an explanation in plain English, which is a great way to learn as you go.

Step 5: Fix Errors by Giving Context
Sometimes, the code the AI gives you will throw an error. Don’t panic.
Here’s how to loop back in a way that actually helps:

Bad Debug Prompt:
It doesn’t work.
Good Debug Prompt:
I copied your JavaScript code into my HTML file, but when I click the button, nothing happens. Can you check if the event listener is written correctly?

Why it’s good: You’re giving context: what you tried, what didn’t work, and what you want help checking.

Final Tips for Vibe Coders

• Use simple, clear language — no tech jargon needed.
• Start small — focus on one feature at a time.
• Be patient — trial and error is part of the process.
• Ask follow-up questions — treat the AI like a partner.
• Save working code — always back up things that work.

Ready to Try It?
Open ChatGPT (or your AI coding tool of choice) and start with this prompt:

I want to build a one-page website for my handmade candles. It should have a short intro, a few product photos, and a form to let people email me. Can you help me write the HTML and CSS?

Then watch your idea come to life.
Welcome to the world of vibe coding. No degree required.