Lesson 16 · about 15 minutes

🎯 Prompt Like a Pro

In Lesson 10 you asked an AI to build a page. Now we level that up. A great prompt is like a work order for a builder — and you're about to write ones so clear, the AI can't mess them up.

🎬 Watch first (90 seconds)

The AI can't read your mind

Imagine ordering a birthday cake by saying: "Make me a cool cake." You might get chocolate. You might get broccoli-flavored. The baker isn't bad — your order was empty!

An AI is the same. It's a super-fast builder that does EXACTLY what you ask. Vague ask = random result. Clear ask = your dream page. A prompt is not a wish — it's a work order.

The 5 ingredients of a pro prompt

Every pro prompt for a web page has these five ingredients. You know all the words already — that's your superpower from lessons 1–15:

WHAT — what to build. "A landing page." Not "something cool."
WHO — who it's for / your product. "Robo Sneakers — self-tying shoes for kids."
PARTS — the sections you want. "A hero, 3 feature cards, a footer." You speak builder-language now!
RULES — the constraints. "One HTML file. CSS in a <style> tag in the head. <script> at the end of the body."
BEHAVIOR — what happens on clicks. "When I click the Buy button, a thank-you message appears."

Easy to remember: What, Who, Parts, Rules, Behavior. Count them on one hand — five fingers, five ingredients. 🖐️

Bad order vs pro order

Look at these two prompts side by side. Which builder gets to do a better job?

😴 The lazy order:

make me a cool website

🎯 The pro order (all 5 ingredients):

Build a landing page (WHAT)
for my product "Robo Sneakers" — shoes for kids
that tie themselves (WHO).

Parts I want (PARTS):
- a hero with a big headline and a Buy button
- 3 feature cards side by side (flexbox)
- a footer with my name

Rules (RULES):
- ONE html file only
- CSS in a <style> tag in the head
- JavaScript in a <script> tag at the end of the body

Behavior (BEHAVIOR):
- when I click the Buy button, show the message
  "🎉 Thanks for buying Robo Sneakers!"

💡 The one idea of this lesson A prompt is a work order, not a wish. Give the AI all 5 ingredients — What, Who, Parts, Rules, Behavior — and it builds YOUR page instead of a random one. And here's the sneaky bonus: the RULES ingredient ("one HTML file, style tag in head, script at end") isn't for the AI's sake — it's for YOURS. It forces the AI to write code in the exact shape you learned to read. No rules = mystery code you can't understand.

Pro trick: iterate in SMALL steps

The AI's first try is almost never perfect — and that's fine! The pro move is asking for tiny changes, not do-overs:

😴 Lazy: "That's wrong, redo it." → The AI rebuilds EVERYTHING, and code you liked disappears.
🎯 Pro: "Change only the hero background to dark blue. Touch nothing else." → One tiny, safe change.

The magic words are "change only...". They stop the AI from rewriting your whole file.

⚠️ The AI's goldfish memory In the same chat, the AI remembers your page and your rules — you can keep saying "now change only the footer." But open a new chat and POOF — it forgot everything. It never saw your page. So: keep working in one chat, and if you must start a new one, paste your code in and give your work order again.

🛠️ Build it (the fun part)

🧪 Your mission Write a real 5-ingredient work order for YOUR product, send it to your AI, and score the result: how many of your 5 ingredients did it deliver?

Do Task A and Task B below first — the checker helps you make your prompt truly pro.
Open your AI (Claude!) and paste in your improved prompt from Task B — but for YOUR real product, with YOUR product name.
Save the code the AI gives you as practice/prompted.html and open it in your browser.
Now score the AI out of 5. Check its work against your order, ingredient by ingredient: right WHAT? Your WHO (product name!) in the headline? All the PARTS you listed? Did it follow your RULES (one file? style in head? script at the end)? Does the BEHAVIOR work when you click?
If it scored 4/5 or less, use the pro trick: ask for the missing piece with "change only..." — in the SAME chat. Re-score. Can you get it to 5/5?

🕹️ Try it right here — the lesson checks your prompt!

Special mission today: the editors below hold English, not HTML. You're writing prompts! The preview box just shows your words as plain text — ignore it. Press Check my code ✔ and the checker reads your prompt like a picky builder reading a work order.

🎮 Quiz time

No peeking at the notes above — trying to remember is what makes it stick!

📚 Want more?

⭐ Best thing to read next MDN: Your first website — this is what pros build by hand. After your AI builds prompted.html, compare the two: does the AI's page have the same skeleton, sections, and style setup MDN uses? Spot the differences! And remember: you can paste any prompt into your AI teacher and ask "critique my prompt — which of the 5 ingredients am I missing?" anytime.