Lesson 02 of 4 in Module 06

⏱️ 02 Mins read

Prompt engineering for static sites (without hype)

A good prompt is a mini brief — not role-play (“10× developer”) or magic words. Pull context from your Module 06 brief. One focused task per prompt when you can.

Three ingredients

Ingredient What to include Example
Constraints Tech, files, limits “Plain HTML5 + one styles.css; no Bootstrap; index.html + about.html”
Acceptance criteria Testable checks “One h1 on home; every img has alt; nav on every page”
Done example Wireframe in words “Hero: navy #1a1a2e, white headline, button to #contact”

Weak prompts use adjectives: “modern,” “clean,” “fix the CSS.” Strong prompts use specs you can verify with the Module 03 checklist.

Weak → strong (60 seconds)

Weak: “Create a website for my dog walking business.”

Stronger (pattern):

Context: One-page static site; audience busy on phones.
Tech: index.html + styles.css; CSS-only nav if possible.
Sections: header + anchor nav → hero + Book button → three “Why us” bullets → contact with phone/email.
Constraints: one h1; section titles h2; header, nav, main, footer.
Acceptance: valid HTML5; readable contrast on hero #2563eb + white text.
Output: full index.html and styles.css in separate code blocks.

Revision prompts — keep them small

Model ignored a constraint? Do not resend the whole novel. Quote the break:

“You added Bootstrap CDN — remove it. Use only styles.css as named.”

Same habit as Lesson 03 refine loop.

IDE tip: “Change only about.html.” Chat tip: paste the smallest excerpt that matters.

Do this — rewrite the weak prompt (15 minutes)

Given: “Make a cool portfolio page with HTML.”

Rewrite (about 150–200 words) with:

  • Five constraints (tech, files, or structure)
  • Four acceptance criteria (semantics or accessibility)
  • One section order example
  • Line stating output format (fenced blocks, file names)

Swap test: Could a classmate build without follow-up questions?

Check

  • No “modern” or “professional” without a measurable check
  • Criteria tie back to your real brief (or a fictional one you name)

What's next

Next up: Review loop: generate, check, refine