Your First Conversation with AI — I've Never Coded

What You'll Learn

In this lesson, you'll learn how to communicate effectively with an AI coding assistant. This is the single most important skill in AI-assisted coding — a good prompt gets you working code in seconds, while a vague prompt gets you confusion and frustration.

By the end, you'll be able to:

Write clear prompts that get useful results
Understand why the AI sometimes gets things wrong
Fix and iterate when the first response isn't perfect
Know when to ask for help vs. when to try a different approach

Time needed: About 25 minutes.

The Basic Pattern: Ask → Review → Refine

Every interaction with an AI coding assistant follows this pattern:

Ask — You describe what you want in plain English
Review — You look at what the AI produced
Refine — You ask for changes, corrections, or improvements

This cycle repeats until you're happy with the result. Let's practice it.

Exercise 1: Your First Prompt

Open your AI coding tool (Cursor, Copilot, or whichever you set up in the previous lesson) and try this prompt:

Create an HTML file called index.html with a simple personal introduction page. Include my name (use "Alex" as a placeholder), a short bio paragraph, and a list of three hobbies.

What you should get: A complete HTML file with a heading, a paragraph, and a bulleted list. The AI should create valid HTML that you can open in a browser.

Try it now before reading on. Paste the prompt, hit enter, and see what happens.

What Just Happened?

The AI read your prompt, understood you wanted an HTML file, and generated code that matches your description. A few things to notice:

It made decisions for you — font choices, colors, layout. You didn't specify these, so the AI picked reasonable defaults.
It used placeholder content — "Alex" as the name, generic hobbies. This is expected.
It wrote more than you asked for — probably added some CSS styling, a <head> section, maybe a <meta> tag. That's fine — it's trying to give you a complete, working file.

Why Specificity Matters

Let's see the difference between a vague prompt and a specific one:

Vague prompt:

Make a webpage

The AI has almost nothing to work with. It'll produce something generic, and you'll spend time asking for changes.

Better prompt:

Create an HTML page that shows the current weather in a city. Include a large temperature display, a weather icon placeholder, and the city name. Use a blue gradient background.

This prompt gives the AI what (weather display), content (temperature, icon, city), and style (blue gradient). The result will be much closer to what you actually want.

The rule of thumb: Include what you want, what content it should show, and how you want it to look. You don't need all three every time, but the more context you give, the better the result.

Exercise 2: Iterating on Results

Now let's practice the "refine" step. Take whatever the AI generated in Exercise 1 and ask for changes:

Change the background color to dark navy (#1a1a2e) and make the text white. Add some padding around the content and center everything on the page.

Notice what the AI does:

It modifies the existing code (doesn't start over)
It remembers the context from your previous message
It applies exactly the changes you asked for

This is the conversation part of AI coding. You're not writing one perfect prompt — you're having a dialogue.

Exercise 3: When Things Go Wrong

Try this prompt (it's intentionally tricky):

Add a button that changes the background color to a random color when clicked

What might happen:

The AI might add JavaScript code that works perfectly
Or it might write code with a small bug
Or it might use a method that doesn't work in all browsers

If it doesn't work:

Tell the AI what happened: "The button appears but nothing happens when I click it"
Ask it to fix it: "Can you check the JavaScript? The click handler doesn't seem to be connected"
If it's still broken, try: "Let me start over — write a simple onclick handler directly on the button element"

The key insight: When AI code doesn't work, describe the symptoms rather than trying to diagnose the problem yourself. The AI is better at debugging when you tell it what you see vs. what you expected.

Five Prompting Patterns That Work

Here are prompting patterns you'll use constantly:

1. The "Build This" Pattern

Create a [thing] that [does what] with [specific details]

Example: "Create a contact form that sends an email with fields for name, email, and message"

2. The "Fix This" Pattern

This code [describe the problem]. Here's what I expect [expected behavior] but instead [actual behavior]

Example: "This button should turn red when clicked but nothing happens"

3. The "Explain This" Pattern

Explain what this code does in simple terms: [paste code]

Example: "Explain what this JavaScript function does — I don't understand the filter and map parts"

4. The "Modify This" Pattern

Change [specific thing] to [new behavior]. Keep everything else the same.

Example: "Change the three-column layout to two columns on mobile screens. Keep the desktop layout the same."

5. The "Like This But" Pattern

Make something like [reference] but [your changes]

Example: "Make a navigation bar like the one on stripe.com but with only three links: Home, About, Contact"

Common Mistakes Beginners Make

Mistake 1: Prompts that are too short

Bad: "make it better"
Good: "increase the font size to 18px and add more spacing between paragraphs"

Mistake 2: Asking for too many things at once

Bad: "Build a full e-commerce site with cart, checkout, user accounts, admin panel, and inventory management"
Good: "Build a product listing page that shows 6 items in a grid with image, name, and price"

Mistake 3: Not telling the AI about errors

Bad: silently re-prompting from scratch
Good: "I see an error in the console: 'Cannot read property of undefined'. The error is on line 23."

Mistake 4: Assuming the AI remembers everything

AI has a conversation window. In very long conversations, it can "forget" earlier context.
If this happens, briefly restate the key context: "We're building a weather dashboard. The main component is in App.js."

How to Preview Your Code

To actually see what the AI created, you need to open the HTML file in a browser:

In Cursor:

Right-click the .html file in the file explorer
Select "Reveal in File Explorer" (Windows) or "Reveal in Finder" (Mac)
Double-click the file to open it in your browser

Or use Live Server:

Ask the AI: "How do I preview this HTML file in Cursor?"
It'll likely suggest installing the Live Server extension — follow its instructions

In browser-based tools (Bolt, Replit, Lovable): The preview is built in — you can see your page update in real time.

Checkpoint

Before moving to the next lesson, make sure:

You've successfully asked the AI to create an HTML file and received working code
You've iterated on the result — asked for at least one change and the AI modified the code
You've tried a prompt that didn't work perfectly and practiced fixing it
You understand the Ask → Review → Refine cycle

If the AI seems to be giving you bad results, try these troubleshooting steps:

Make your prompts more specific
Break complex requests into smaller steps
Tell the AI what's wrong rather than starting over
Try rephrasing your request completely if the AI seems stuck

What's Next

You can talk to the AI and get working code. In the next lesson, we'll learn some coding basics — not to become a programmer, but to understand enough to have more productive conversations with the AI and to recognize when its output makes sense.