Module 3: Prompt Engineering

Course: Programming with Free AI Tools — Build Real Websites and Apps | Audience: Ages 15–25, beginners | Module Goal: Write clear, effective prompts for code generation, debugging, and explanations. Learn bad vs good prompt examples.

Lesson 3.1 — Anatomy of a Good Prompt

Duration: 50 minutes

Learning Objectives

• List the 4 parts of a strong prompt: role, task, context, format.
• Rewrite a vague prompt into a clear one.
• Understand why context improves answers.
• Practice prompting for code with constraints.

Instructor Notes

Use the "bad vs good" contrast heavily. Show that adding language, experience level, and output format dramatically improves results. Encourage students to iterate.

Presentation Outline

1. Why prompts matter (5 min).
2. The 4-part prompt formula (15 min).
3. Bad prompt vs good prompt examples (15 min).
4. Live rewrite activity (10 min).
5. Practice and feedback (5 min).

Demonstration

1. Show bad prompt: "Make a website."
2. Show AI's vague answer.
3. Show good prompt: "Act as a web teacher. Write a single HTML page for a bakery with a title, one heading, and a paragraph. Output only the HTML code with comments."
4. Show the clear, usable answer.
5. Run the HTML to verify.

AI Prompts

• "Act as a coding teacher for beginners. Write a Python function to calculate the average of a list. Explain each line. Output code in a code block."
• "Rewrite this vague prompt into a clear one: 'code for login'."

Starter Code

Bad prompt:
"make a button"

Good prompt (fill in):
Role: ___________________
Task: ___________________
Context: ___________________
Format: ___________________

Final Code

Good prompt example:
Role: Act as a front-end teacher for beginners.
Task: Create an HTML button that shows an alert "Hello" when clicked.
Context: Plain HTML file, no frameworks, for a 16-year-old learner.
Format: Output only the HTML code with short comments.

Exercises

• Exercise 1: Rewrite 3 vague prompts from class into good ones.
• Exercise 2: Use your good prompt to generate code and verify it runs.
• Exercise 3: Swap prompts with a partner and rate clarity 1–5.

Homework

• Assignment 1: Write 5 reusable "good prompt" templates for coding tasks.
• Assignment 2: Generate a small HTML page using your best template and submit it.

Quiz

1. Which is part of a strong prompt?
   • a) Role
   • b) Task
   • c) Context
   • d) All of the above ✅
2. A vague prompt usually gives:
   • a) Perfect code
   • b) A vague or generic answer ✅
   • c) Nothing
   • d) An error message only
3. Adding "for a beginner" to a prompt helps because:
   • a) It makes the AI slower
   • b) It sets the explanation level ✅
   • c) It is required
   • d) It changes the language
4. Good prompts often specify:
   • a) Output format ✅
   • b) The weather
   • c) Your birthday
   • d) A random number
5. The best way to improve an answer is to:
   • a) Repeat the same vague prompt
   • b) Add context and constraints, then iterate ✅
   • c) Give up
   • d) Shout

---

Lesson 3.2 — Prompting for Code Generation

Duration: 50 minutes

Learning Objectives

• Generate working code with precise prompts.
• Include language, framework, and constraints in prompts.
• Ask for comments and examples in generated code.
• Verify generated code by running it.

Instructor Notes

Teach students to specify the language and any libraries. Ask for small, runnable examples. Always end with "explain how to run this." Show a generated snippet running successfully.

Presentation Outline

1. Recap prompt anatomy (5 min).
2. Specifying language and framework (10 min).
3. Asking for comments and run instructions (10 min).
4. Live code generation demo (15 min).
5. Verification routine (10 min).

Demonstration

1. Prompt: "Act as a JS teacher. Write a function `isEven(n)` returning true if n is even. Include a comment and one example usage. Output only code."
2. Copy into a file, run with Node or browser console.
3. Show the output is correct.
4. Modify the prompt to add edge cases and regenerate.

AI Prompts

• "Write a JavaScript function `capitalize(text)` that capitalizes the first letter. Include comments and a usage example. Output only code."
• "Generate a Python script that reads a name from input and prints a greeting. Add comments and run instructions."

Starter Code

// Starter: generate with AI, then verify
function isEven(n) {
  // TODO: return true if n is even
}

Final Code

// Final
function isEven(n) {
  return n % 2 === 0; // even numbers have no remainder when divided by 2
}

console.log(isEven(4)); // true
console.log(isEven(7)); // false

Exercises

• Exercise 1: Generate a function that counts vowels in a string; verify it.
• Exercise 2: Add run instructions to a prompt and confirm the code runs.
• Exercise 3: Generate code in two languages and compare clarity.

Homework

• Assignment 1: Generate and verify 3 small functions using precise prompts; submit code + proof it runs.
• Assignment 2: Write a prompt template for "generate a function with tests."

Quiz

1. When generating code you should specify:
   • a) The programming language ✅
   • b) The color of your room
   • c) Your favorite food
   • d) None of these
2. Asking for comments helps you:
   • a) Waste tokens
   • b) Understand the generated code ✅
   • c) Break the code
   • d) Hide errors
3. After generating code you must:
   • a) Submit immediately
   • b) Run and verify it ✅
   • c) Delete it
   • d) Ignore output
4. A precise prompt includes:
   • a) Framework and constraints ✅
   • b) Emojis only
   • c) One word
   • d) A joke
5. "Output only code" is useful because:
   • a) It confuses the AI
   • b) It gives clean, copy-ready output ✅
   • c) It is required
   • d) It slows things down

---

Lesson 3.3 — Prompting for Debugging

Duration: 50 minutes

Learning Objectives

• Paste error messages effectively into a prompt.
• Ask AI to explain and fix bugs step by step.
• Distinguish a real fix from a guess.
• Verify the fix by re-running code.

Instructor Notes

Teach the "error + code + what you expected" formula. Show that AI may guess; students must test. Use a real broken snippet live.

Presentation Outline

1. Why debugging with AI works (5 min).
2. The debugging prompt formula (10 min).
3. Bad vs good debugging prompts (10 min).
4. Live debug demo (15 min).
5. Verify-the-fix routine (10 min).

Demonstration

1. Show broken code: `print("Hello"` (missing parenthesis).
2. Bad prompt: "fix." Show weak answer.
3. Good prompt: "This Python code errors: `print('Hello'`. Error: SyntaxError. What is wrong and how do I fix it? Show corrected code."
4. Run the fix; confirm it works.

AI Prompts

• "My JavaScript code: `let x = 5; console.log(x` throws a SyntaxError. Explain the error and provide the corrected code."
• "This PHP gives a blank page: `<?php echo "Hi" ?`. Find the syntax error and fix it."

Starter Code

# Starter (broken): fix with AI help
def greet(name)
    print("Hello " + name)

greet("Sam")

Final Code

# Final (fixed): added missing colon
def greet(name):
    print("Hello " + name)

greet("Sam")  # Output: Hello Sam

Exercises

• Exercise 1: Introduce a bug into working code, then use AI to find and fix it.
• Exercise 2: Write a debugging prompt that includes the error message.
• Exercise 3: Confirm the fix runs before marking the task done.

Homework

• Assignment 1: Collect 2 errors you hit this week and the AI fixes; submit both.
• Assignment 2: Write a reusable "debugging prompt" template.

Quiz

1. A good debugging prompt includes:
   • a) The error message ✅
   • b) A joke
   • c) Your address
   • d) Nothing
2. When AI gives a fix you should:
   • a) Trust it blindly
   • b) Test it by running the code ✅
   • c) Delete the code
   • d) Ignore it
3. "What did you expect vs what happened" helps AI because:
   • a) It wastes time
   • b) It gives context to find the real bug ✅
   • c) It is required
   • d) It changes the language
4. A SyntaxError usually means:
   • a) The computer is broken
   • b) The code violates language grammar rules ✅
   • c) The AI is wrong
   • d) Nothing
5. AI debugging is best used as:
   • a) A replacement for learning
   • b) A helper that still needs your verification ✅
   • c) A guarantee
   • d) A game

---

Lesson 3.4 — Prompting for Explanations

Duration: 45 minutes

Learning Objectives

• Ask AI to explain code in simple terms.
• Request analogies for hard concepts.
• Summarize long code into bullet points.
• Build understanding, not just answers.

Instructor Notes

Explaining is where AI shines for learning. Teach "explain like I'm 15" and "give an analogy." Show how to turn a confusing snippet into a clear summary.

Presentation Outline

1. Why explanations matter (5 min).
2. "Explain like I'm 15" technique (10 min).
3. Asking for analogies (10 min).
4. Summarize-code demo (10 min).
5. Build-your-own explanation (10 min).

Demonstration

1. Paste a loop snippet into AI.
2. Prompt: "Explain this Python loop like I'm 15, with an analogy."
3. Show the analogy (e.g., checking each item on a shelf).
4. Ask: "Summarize this function in 3 bullet points." Show result.

AI Prompts

• "Explain this JavaScript code like I'm 15, using a real-life analogy: `for (let i=0; i<3; i++){ console.log(i); }`"
• "Summarize what this Python function does in 3 bullet points and label its inputs and output."

Starter Code

// Starter: ask AI to explain this
for (let i = 0; i < 3; i++) {
  console.log(i);
}

Final Code

AI explanation summary:
- The loop starts with i = 0.
- It runs while i is less than 3.
- Each run prints i, then adds 1 (i++).
Output: 0, 1, 2

Exercises

• Exercise 1: Paste a code snippet and ask for an analogy; write it down.
• Exercise 2: Summarize a function in 3 bullets using AI.
• Exercise 3: Teach the analogy back to a partner.

Homework

• Assignment 1: Pick one concept you find hard; get an AI analogy and write it in your own words.
• Assignment 2: Summarize a 10-line program into bullets and submit.

Quiz

1. "Explain like I'm 15" is used to:
   • a) Insult the AI
   • b) Get a simple, clear explanation ✅
   • c) Slow it down
   • d) Change language
2. An analogy helps because it:
   • a) Confuses the topic
   • b) Connects new ideas to familiar ones ✅
   • c) Is required
   • d) Breaks code
3. Summarizing code into bullets helps you:
   • a) Forget it
   • b) Understand structure quickly ✅
   • c) Delete it
   • d) Hide bugs
4. You should ask AI to explain code you don't understand:
   • a) Never
   • b) Yes, to build real understanding ✅
   • c) Only if paid
   • d) Only once
5. The goal of explanation prompts is to:
   • a) Copy answers
   • b) Understand, not just receive code ✅
   • c) Entertain
   • d) Win arguments