Make a product card

One responsive product card in an HTML file you can open on your laptop.

About 10–15 minutes3 steps + an optional change
You’ll practiseGive feedback the agent can act on

Describe a small page, open what your agent builds and ask for one specific visual improvement.

Start task

What you’ll make

  • One product and the supplied facts
  • Readable on a narrow screen
  • One local HTML file, no installation needed
index.htmlExample output

Luntian Supply

Reusable desk organizer

PHP 450

Blue or natural · Pickup only

This is the whole task: one readable product card. The supplied facts are enough to make it useful.

One possible result using the fictional practice brief.

Before you start

  1. Open one installed agent and select a new practice folder named business-webpage.
  2. Save the starter brief in that folder as business-webpage.txt. It contains the facts, file requirements and task limits.
  3. Start a new conversation. Keep this page open alongside your agent.

Use Codex, Claude Code, Antigravity or OpenCode. The task works with the same starter brief in each.

Ready? Go to step 1
Download starter briefText file · fictional practice brief
Read the brief here
Make a product card

Result: One responsive product card in an HTML file you can open on your laptop.
File: index.html

PRACTICE FACTS
Fictional business: Luntian Supply. Product: a reusable desk organizer for PHP 450. Colours: blue and natural. Pickup only. No product photo, address, opening hours or contact details are supplied.

WHAT TO MAKE
- Save one responsive product card in index.html, with a product heading, PHP 450 price, blue/natural options and pickup-only wording.
- Use semantic HTML, inline CSS and system fonts. The file must open directly in a browser without a package install or server.
- Keep the card readable on a narrow phone-sized window. No form, navigation, purchase control or additional site sections are needed.

HOW TO WORK
- Ask for a short understanding of the brief and a plan first. Wait for approval before doing the task.
- Write only in this practice folder. Keep the starter brief unchanged.
- Do not invent facts. Label missing information unknown.
- Use only the supplied product facts. Do not fetch scripts or images, invent contact details, add payments, install packages, deploy or modify files outside the practice folder.

CHECK THE RESULT
- Open index.html directly in a browser. The product, PHP 450 price, both colours and pickup-only rule match the brief.
- Narrow the window: the text stays readable without sideways scrolling, clipping or overlapping.
- The file works on its own with inline CSS. It contains no form, remote assets, invented contacts or purchase controls.

If your agent cannot read the file, provide this brief separately in the conversation.

Try each step in your own words. Open a hint or example when you need a nudge.

Step 1: Describe the card

In your agent

Ask your agent to read business-webpage.txt and describe the small page it will make. Have it wait before creating anything.

Hint for Step 1

Keep the scope to one product card in a file that opens directly in a browser. It needs the supplied facts, readable text and enough space on a narrow screen.

Show an example for Step 1

Read business-webpage.txt. Describe a simple product card I can open directly in my browser, then wait before building.

One way to phrase it. Your own words are welcome.

Before you continue

  • The plan keeps the product, PHP 450, blue or natural, and pickup only.
  • It will make one local HTML file, with no installation, form or publishing step.
Step 2: Build the card

Step 2: Build the card

In your agent

Give your agent the go-ahead to create index.html. Ask it to use the starter facts and tell you how to open the file.

Hint for Step 2

Refer to the starter facts and specify a local file with inline CSS. If the agent proposes a framework, package installation or full website, bring it back to the single-card scope.

Show an example for Step 2

Create the product card in index.html using the starter brief. Use inline CSS and system fonts so I can open the file directly, then tell me how.

One way to phrase it. Your own words are welcome.

Before you continue

  • index.html exists in the practice folder and opens directly.
  • The output is one product card, with no package install, form or publishing step.
Step 3: Open it and resize

Step 3: Open it and resize

In your saved file

Open index.html yourself in a browser. Read the product facts, then narrow the window; describe any clipping or overlap precisely before asking for a fix.

Hint for Step 3

Make the browser window narrow and inspect the text. Describe the exact clipping or overlap if you find it; there is no need to add menus or buttons for this task.

Show an example for Step 3

At a narrow width, the price overlaps the product name. Ask for more space or wrapping, then reopen the file and check again.

An example of how to check, not a recorded result.

Check the result yourself

  • Open index.html directly in a browser. The product, PHP 450 price, both colours and pickup-only rule match the brief.
  • Narrow the window: the text stays readable without sideways scrolling, clipping or overlapping.
  • The file works on its own with inline CSS. It contains no form, remote assets, invented contacts or purchase controls.

Keep this habit

Describe what you see, where the problem is and what should change. Then open the revised file and check again.

Once your checks pass, you’re ready for another task. Write a matching caption using the same product facts.

Next: Write one product captionAll tasksTry the optional change

Step 4: Adjust one visual detailOptional

In your agent

Choose one spacing adjustment and ask for it in a separate HTML file.

Hint for Step 4

Point to a specific gap, such as the space between the product name and price. If the card already fits well, try a little more breathing room without adding new content.

Show an example for Step 4

Add a little more space between the product name and price. Save index-revised.html, keep the facts unchanged and preserve index.html.

One way to phrase it. Your own words are welcome.

Before you continue

  • The spacing change is visible and the card still fits a narrow window.
  • Both files open directly and contain the same product facts.

Open both versions side by side. You should be able to point to the change you asked for.

Next: Write one product captionAll tasks