Lesson progress: 0%

Class 2 — Prompt Engineering for Coding

Learn how to communicate with AI so it generates more useful, accurate, and understandable code.

Beginner15–20 minutesPrompt builder + quiz

What you will learn

In Class 1 you learned what code is. Now you will learn how to ask for it. A prompt is how you talk to an AI, and small changes to it make a big difference in the code you get back. You will practice by building prompts yourself, not just reading about them.

By the end, you will be able to:

  • Explain what a coding prompt is.
  • Identify the parts of an effective prompt.
  • Improve vague prompts by adding context and requirements.
  • Ask AI to explain generated code.
  • Iterate on a prompt when the first result is not good enough.

Lesson A

What is a prompt?

A prompt is the instruction or information you give an AI model. The AI can only work with what you write. If your request is vague, it fills the gaps with guesses, and the result is usually generic: not wrong, but not what you pictured.

Weak prompt

Make me a website.

Which kind of website? What should be on it? What should it look like? The AI has to guess everything.

Better prompt

Create a responsive personal portfolio website using HTML and CSS. Include a navigation bar, an About Me section, three project cards, and a footer. Use a dark teal and mint color palette. Explain the important parts of the code.

Why the second prompt is better

  • It names the kind of site: a personal portfolio, not "a website".
  • It names the technologies: HTML and CSS, so you will not get a framework you cannot read.
  • It lists what must be included: navigation bar, About Me, three project cards, footer.
  • It sets the look: responsive, with a dark teal and mint palette.
  • It asks for an explanation: so you learn from the code instead of just receiving it.

Lesson B

The six building blocks of a coding prompt

Strong coding prompts are made from six parts. Select each one to see what it means and an example.

Example

Lesson C

Build a prompt step by step

Edit any field and watch your prompt update. It starts with a working example, so you can see how the pieces fit. Everything stays in your browser.

Your prompt

Lesson D

Iterative prompting

Your first prompt is rarely perfect, and that is normal. Good prompting is a loop:

  1. Describe the goal.
  2. Review the AI's response.
  3. Test the result.
  4. Identify what is wrong or missing.
  5. Ask for a specific improvement.
  6. Test again.

See how a follow-up request changes the outcome. Switch between the two requests. The results shown are an illustration of what each prompt typically produces.

How the second request narrows things down

  • Appearance: "mint green" and "rounded corners" replace the AI's guess about style.
  • Layout: "center it on the page" fixes where the button goes.
  • Behavior: "show a message when clicked" turns a static element into something that does something.
  • Technology: "HTML, CSS, and JavaScript" tells the AI which tools to use.
  • Learning: "explain the event handler" makes you understand the code that reacts to the click.

Lesson E

Common prompting mistakes

Everyone makes these. Spot them early and each one has a simple fix.

Too vague

Mistake: "Make an app."

Fix: "Build a to-do list web page where I can add and delete tasks."

Missing context

Mistake: "Fix my code." (with nothing pasted)

Fix: Paste your code and the error, and say you are a beginner. Ask what the error means.

Too many features at once

Mistake: Asking for a shop, chat, game, and login together.

Fix: Ask for one feature. Get it working, then ask for the next.

No technical constraints

Mistake: Getting a framework you have never heard of.

Fix: Say "plain HTML, CSS, and JavaScript only. No libraries."

Copying without testing

Mistake: Pasting code straight into your project.

Fix: Run it. Try to break it. Check it against each requirement you wrote.

Assuming AI is always correct

Mistake: Trusting a confident answer.

Fix: Ask it to explain each part, and ask for a second approach to compare.

Lesson F: Mini challenge

Write a prompt for a personal webpage

Write a prompt asking an AI to build a simple personal webpage with a heading, a short introduction, three interests, a consistent color scheme, and a responsive layout. You do not need to send it anywhere. The checklist reads your text and ticks items as you cover them. It looks for keywords, so treat it as a guide.

Practice in Prompt Lab

Checklist

  • Asks for a heading
  • Asks for a short introduction
  • Asks for three interests
  • Describes a consistent color scheme
  • Asks for a responsive layout
  • Names the technologiesbonus
  • Asks for an explanationbonus

Knowledge check

Test what you learned

Finish this class

Finished the builder, the challenge, and the quiz? Mark the lesson complete. Progress is saved in this browser only.

Previous Lesson Home Practice in Prompt Lab