---
title: "Shape the Site"
description: "Review the Small Hours Studio homepage as a visitor, write a specific follow-up prompt, and check the revised workshop catalog on wide and narrow screens."
canonical_url: "https://vercel.com/academy/build-and-launch-with-ai/shape-the-site"
md_url: "https://vercel.com/academy/build-and-launch-with-ai/shape-the-site.md"
docset_id: "vercel-academy"
doc_version: "1.0"
last_updated: "2026-09-25T16:42:53.579Z"
content_type: "lesson"
course: "build-and-launch-with-ai"
course_title: "Build and Launch with AI"
prerequisites:  []
---

<agent-instructions>
Vercel Academy — structured learning, not reference docs.
Lessons are sequenced.
Adapt commands to the human's actual environment (OS, package manager, shell, editor) — detect from project context or ask, don't assume.
The lesson shows one path; if the human's project diverges, adapt concepts to their setup.
Preserve the learning goal over literal steps.
Quizzes are pedagogical — engage, don't spoil.
Quiz answers are included for your reference.
</agent-instructions>

# Shape the Site

# Shape the site

Our homepage has two workshops. Can a visitor tell which one fits their schedule and budget? Let's use that question to review the first version and decide what to change.

We could ask v0:

```text
Make the site better.
```

That leaves v0 to decide what needs work. We'll look at the page first and give it a specific job.

## Outcome

Make one focused homepage improvement in v0 and check that visitors can compare both workshops on a phone-sized screen.

## Hands-on exercise 1.2

### Try choosing a workshop

Open the v0 chat from lesson 1.1 and look at the website preview. Imagine you have two hours and $50 to spend. Which workshop fits?

The gardening workshop does: two hours, $45, with materials included. Check how much of the page you had to read to find that answer. If the price is tiny or the duration is buried in a paragraph, we've found our edit.

Each workshop's grouped block of content is called a *card*. Putting the same details in the same places on both cards helps visitors compare them.

Take a screenshot before changing anything so we can compare the layouts afterward. Choose one problem you can point to on that screenshot.

### Turn the problem into a request

We'll continue in the existing chat, using v0's [follow-up prompt workflow](https://v0.app/docs/quickstart). Write a request that names the part of the page and the change it needs. Include the details that must stay unchanged.

For example, if the prices are hard to find:

```text
In the workshop catalog, make the example price easy to find on
both cards. Place it at the bottom of each card, using the same
readable text size and alignment. Keep "materials included" beside it.

Preserve the existing prices, workshop descriptions, and durations.
Keep the rest of the homepage unchanged.
```

The price placement and text size give us specific details to check when v0 finishes.

**Requirements:**

1. Address one problem you found in the homepage preview.
2. Preserve the workshop facts from the original brief.
3. Keep “Find your workshop” linked to the catalog and retain the demo notice.
4. Keep this version informational. Workshop detail pages and forms come in Section 4.

If the catalog already reads well, we can clarify who the studio welcomes. Ask v0 to add “Beginners are welcome at Small Hours Studio.” below “Find your workshop,” keeping the surrounding content unchanged. If that sentence already exists, choose another specific improvement from your screenshot.

Send your request and wait for the updated preview before asking for another change.

## Try It

Compare the preview with your screenshot. Can you point to the requested change? Check the workshop facts against this content from the course reference, `complete/lib/workshops.ts`:

| Workshop             | Duration | Example price           |
| -------------------- | -------- | ----------------------- |
| Print something good | 3 hours  | $65, materials included |
| A garden in a pot    | 2 hours  | $45, materials included |

Make the website area narrower using its preview controls, if available, or by resizing the browser. Watch the page itself, since shrinking only the chat panel won't test the website.

At phone width, the cards should stack in one column, with readable prices and durations. Check for sideways scrolling, then widen the preview again. This adjustment to available space is called a *responsive layout*.

Select “Find your workshop” to check that it still reaches the catalog. Then try it with a keyboard: click a blank area inside the preview, press Tab until the link has a visible focus indicator, and press Enter.

### A price changed during the redesign

Correct it before making another design request. Ask v0 to restore the gardening price to “$45, materials included,” while keeping the layout edit. Check both prices afterward; the table above is our reference.

### The cards spill off the phone-sized page

Describe the visible problem in the same chat: “At phone width, the workshop cards extend past the right edge. Stack them in one column and keep their contents inside the page. Preserve the wider layout.” Wait for the update, then check both widths again.

## Commit

Keep the chat bookmark and save an after screenshot with the prompt you used. Reopen the chat to check that the revised page is available. This is our checkpoint until we introduce Git in Section 2.

## Done-When

- [ ] The preview shows the specific improvement we requested.
- [ ] Both workshops retain their original facts and fit at phone width.
- [ ] “Find your workshop” works with a mouse and keyboard.
- [ ] The demo notice remains visible, and the revised chat reopens.

## Solution

Here's a complete request for the hard-to-find prices. Use it if that matches your page, or compare it with the request you wrote for your own edit.

```text
Update only the workshop catalog on the Small Hours Studio homepage.
The example prices need to be easier to compare.

Place the example price at the bottom of each workshop card with
consistent, readable text size and alignment. Keep "materials included"
beside the price and the duration visible within each card.

Preserve these facts:
Print something good: 3 hours, $65, materials included.
A garden in a pot: 2 hours, $45, materials included.

At phone widths, stack the cards in one column and keep their
contents inside the page without horizontal scrolling.

Keep the existing workshop descriptions and unannounced dates.
Preserve the studio introduction, demo notice, and "Find your workshop"
link to the catalog. Leave additional pages and forms for later.
```

Once the page passes these checks, we're ready to publish it in “Go Live.”


---

[Full course index](/academy/llms.txt) · [Sitemap](/academy/sitemap.md)