---
title: "Make a Focused Change"
description: "Ask fx to improve a workshop listing, inspect its edits, and test the result locally."
canonical_url: "https://vercel.com/academy/build-and-launch-with-ai/make-a-focused-change"
md_url: "https://vercel.com/academy/build-and-launch-with-ai/make-a-focused-change.md"
docset_id: "vercel-academy"
doc_version: "1.0"
last_updated: "2026-09-25T16:42:53.837Z"
content_type: "lesson"
course: "build-and-launch-with-ai"
course_title: "Build and Launch with AI"
prerequisites: []
---
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.
# Make a Focused Change
# Make a focused change
Our workshop cards show a duration, but the reference design hides its label visually. We'll make “Duration” visible on both cards so someone scanning the catalog can identify the time commitment.
Start in the website folder with the previous work saved:
```sh
git status
fx
```
If the working tree has changes, review them first. Inside fx, use `/permissions ask` again and keep the development server running in another terminal.
## Outcome
Use fx to improve the workshop cards, review the exact edit, and save the locally tested result.
## Hands-on exercise 3.2
### Describe the visible result
“Improve the site” leaves many decisions open. For this task, we can name the element and the behavior we want. Enter this request inside fx:
```text
On every homepage workshop card, show a visible Duration label
beside or above the existing duration value. Use the current card
component and preserve its accessibility semantics.
Keep workshop facts, links, and the rest of the design unchanged.
If the label is already visible, explain that before making edits.
Inspect the relevant files, describe the proposed change, then make
only this edit. Do not add packages, commit, push, or deploy.
Do not read credential files.
```
Read the proposed file paths and any permission prompt against the duration-label request. Changing authentication or installing a styling library would fall outside this task, as would rewriting the homepage.
\*\*Note: If Duration is already visible\*\*
Choose another small factual label improvement after inspecting the card. Record it in your notes and use a matching commit message. Continue with the same diff and browser checks below; keep a label that already works.
### Review what changed
When fx finishes, use `/quit` to return to the shell. Check the files and the patch ourselves:
```sh
git status
git diff --stat
git diff
```
`--stat` gives a short count of affected files and lines. The full diff lets us compare those changes with the request. In the reference, removing `className="sr-only"` from the Duration term is enough; the existing layout can display it above the value.
The `sr-only` class keeps text available to assistive technology while hiding it visually. We are removing that class from one label, leaving the description-list relationship between the label and value intact. Avoid deleting the label or placing a second “Duration” beside it.
If fx changed unrelated files, ask it to explain and narrow the edit. Review the resulting diff again. Don't accept a large patch because the final screenshot looks correct; the scope is part of this exercise.
### Check the local page
Open the local homepage and locate both cards. Each should show a visible Duration label, with the original values: three hours for printmaking and two hours for gardening.
Reduce the browser width to roughly a phone's width. Check that the new label doesn't collide with the date or price. Use Tab to move through the existing links; their order and focus indicators should remain usable.
We can also ask fx to explain its change after inspecting it ourselves:
```text
Explain the duration-label edit using the diff. Which existing
style hid the label, and why does the value stay the same?
Do not make further changes.
```
Check that fx names the class or markup we saw in the diff. If it describes different code, point it to the file we reviewed and ask it to check again.
## Try It
Look at the cards without reading their descriptions. Identify the two-hour option and check its $45 example price. Then compare those values with the data file. The label should make the time commitment easier to find while leaving the workshop facts unchanged.
Refresh the production website. It should still have the earlier card because we haven't pushed this change. We'll review a deployed preview before publishing it in 3.4.
### The label appears twice
Inspect the card's markup. A generated design may already include a visible text label and another accessible label. Ask fx to keep one semantic term associated with the duration value, then recheck the rendered card. Don't remove unrelated labels from other fields.
### fx changed more than the label
Use the diff to name the extra change and request its removal. Keep any edits that existed before the session. If the proposed cleanup would discard unrelated work, stop that operation and adjust the affected file in the editor instead. Review the final patch before staging it.
## Commit
Stage the reviewed card file, using its actual path in your project:
```sh
git add components/workshop-card.tsx
git diff --cached
git commit -m "feat(catalog): show the workshop duration label"
```
If an existing stylesheet needed a small adjustment, stage that specific file too after reviewing it. Keep this commit local for now. The next two lessons prepare and deploy its preview.
## Done-When
- [ ] The card displays the duration label and original value.
- [ ] The diff contains only the agreed card improvement.
- [ ] Both cards remain readable at a narrow width.
- [ ] The reviewed edit is committed locally and has not been pushed.
## Solution
In `components/workshop-card.tsx`, replace the duration row with:
```tsx
Duration{workshop.duration}
```
Keep it inside the existing `dl` element. The other description terms retain their current classes. No dependency or data change is needed in the reference app. Compare your equivalent change with this behavior, then save the reviewed commit.
---
[Full course index](/academy/llms.txt) · [Sitemap](/academy/sitemap.md)