P7 - Prompt Bank

What you are building

You are building a Prompt Bank. It is a site where users browse prompts for AI image work and copy them to try similar results.

Every prompt must be tested by you with your own before and after images. Do not copy prompts from the internet without running them yourself.

Everyone builds the same site structure.

Site structure

Your site is split by category. Each category is its own page. Do not put all 20 prompts on one long scrolling page.

• Home: site title, short description, your name, links to all 5 category pages
• Generate: 4 prompts
• Edit / correct: 4 prompts
• Style change: 4 prompts
• Social media: 4 prompts
• Pinterest / design: 4 prompts
• Total: 20 prompts across 5 category pages (4 per page)

What each prompt card must include

Every prompt card must have all of the items below. A card is not complete if anything is missing.

• Category tag
• Before image
• After image
• Before and After labels under or on each image
• Prompt excerpt visible by default (first line or about 100 characters)
• Click to expand and read the full prompt
• Copy prompt button that always copies the full prompt, even when only the excerpt is showing
• Copied feedback when the button is clicked (for example the button text changes to Copied! for 2 seconds)

Prompt excerpt and full text

Prompts can be long. Your site must work like this:

Default view: show only an excerpt, then something like ... Read more

On click: expand to show the full prompt

Copy button: always copies the full prompt text, even when only the excerpt is visible

Before and after image rules

• For Edit / correct and Style change: Before is the original image, After is what the AI produced
• For Generate: Before is a reference image, sketch, or labelled placeholder. After is the generated image
• Images must be your own work
• Save images in your project folder (for example images/prompt-01-before.jpg)
• Every image must load on your live site
• Images must be clear enough to see on a phone

Footer (required on every page)

• Your name
• Built by [Your Name], 2026
• Link to your GitHub repo for this project

Design requirements

• 6 pages total: Home plus 5 category pages
• Navigation in the header on every page
• Mobile first: cards and images must work on a phone
• Consistent card design across all pages
• Plan in Figma or Stitch before you code
• Build in VS Code with HTML, CSS, and JavaScript

Grading checklist

I mark yes/no while testing your live site:

• Home page with title, description, and your name
• Navigation links to all 5 category pages work
• 5 separate category pages exist
• Exactly 4 prompts on each category page
• All 20 before images load
• All 20 after images load
• Every card shows a prompt excerpt by default
• Every card expands to show the full prompt on click
• Every copy button copies the full prompt
• Every card has a category tag
• Before and After labels on every card
• Footer on every page with your name and Built by [Name], 2026
• GitHub repo exists
• Live link works on phone
• All links, buttons, and icons on the site work

What loses marks

• Missing prompt card (fewer than 20): minus 1 per missing card
• Category page missing or has fewer than 4 prompts: minus 2 per page
• Card missing before or after image: minus 1 per card
• No excerpt or no expand to read full prompt: minus 1 per card
• Copy button copies excerpt only, not full prompt: minus 2 per card
• Copy button, link, or icon missing or broken: minus 1 per item
• Broken image on live site: minus 1 per image
• No navigation between pages: minus 2
• No mobile layout or unreadable on phone: minus 2
• Not deployed or live link broken: minus 2