From an empty folder to a live demo

Before you start

Why this matters

Step by step

Tick each step as you do it. Your ticks are saved in this browser.

1. 1

   Write a ten minute brief

   Use public information only, mark guesses and never invent reviews.

   Business: Cedar Paws Grooming (fictional). Mobile dog grooming van.
   Sells: Full grooms and bath and tidy appointments at the customer's home.
   Service area: Denver and nearby suburbs (assumed: confirm with owner).
   Ideal customer: Busy dog owner, on a phone, whose dog hates car rides
   or salons. Worried about price, whether the van has water and power,
   and whether nervous dogs are OK.
   Primary action: Request a grooming appointment (form).
   Secondary: Text or call.
   Objections: Price range? Do you need my water or power? Nervous dogs?
   Proof: None provided. Leave reviews out of the demo.
   

2. 2

   Create the folder, start git and add the project files

   mkdir cedar-paws-demo
   cd cedar-paws-demo
   git init
   mkdir docs
   echo ".env" > .gitignore
   

   Save the brief as docs/brief.md and write the project instructions file (CLAUDE.md for Claude Code) as in the earlier lesson. Commit.

3. 3

   Write the real demo copy before building

   Have the assistant draft it from the brief.

   Read CLAUDE.md and docs/brief.md.
   Draft homepage copy for docs/content.md with these sections:
   hero (headline under 10 words, one supporting line, button label),
   three services, "how it works" in 3 steps, answers to the three
   objections in the brief, and a closing call to action.
   Plain, friendly US English. No prices, no reviews, no claims about
   results or years in business. Mark anything you had to assume with
   [ASSUMED].
   

   Delete hype and keep each [ASSUMED] tag to confirm with the owner.

4. 4

   Build the skeleton

   Start a fresh session and ask for structure only.

   Read CLAUDE.md, docs/brief.md and docs/content.md.
   Create the skeleton for a one page site plus a /request page:
   index.html, request.html, css/tokens.css, css/base.css, js/menu.js.
   Put the design tokens from CLAUDE.md in tokens.css. Base styles
   mobile first at 375px. Empty, clearly labelled sections in index.html
   matching docs/content.md. No frameworks, no new dependencies.
   List the files you created.
   

   Check the section order in a browser, then commit.

5. 5

   Build the components one prompt at a time

   Header, hero, services, how it works, objections, closing call to action, footer. The hero:

   Build the hero in index.html and css/hero.css.
   Content: "Home / hero" in docs/content.md, word for word.
   Phones (375px): headline, supporting line, full width "Request a
   groom" button linking to /request, then a small "Or text us" link.
   All visible without scrolling. From 900px: text left, image right
   using images/van.jpg (placeholder box if the file is missing).
   Use only tokens. Tell me which files you changed.
   

   After each component: check 375px and desktop, read the diff, commit.

6. 6

   Build the request form

   Use the form prompt from Forms, editing, legal pages and analytics, posting to a form handling service with a test inbox you control so you can show it working live. Test it. Commit.

7. 7

   Run a quick QA pass

   A demo does not need the full checklist, but never skip these.

   • Every page and link at 360px, desktop and on a real phone.
   • Unique title and meta description; images resized.
   • The form reaches your test inbox.
   • No "lorem", "TODO" or "[ASSUMED]" text presented as fact.
   • A robots rule that blocks indexing.
8. 8

   Push to a private remote repository

   Create an empty private repository, add it as origin and push main.

9. 9

   Deploy and verify the live demo

   Deploy main with no build command. Open the URL on your phone over mobile data, tap through every section and submit the form.

10. 10

    Prepare it for the video call

    Note three things the demo does for this business ("it answers the water and power question under the button") and every [ASSUMED] item.

Example

git log --oneline (oldest first)
Brief, project instructions and gitignore
Homepage copy, assumptions marked        # edited the draft by hand
Skeleton                                 # section order checked in browser
Header and mobile menu                   # 375px and desktop checked
...one commit each for hero, services, how it works, footer
Request form with honeypot and fallback  # test submission arrived
QA fixes                                 # overflow at 360px, van photo, noindex
# host deployed main; checked on phone over mobile data; form works

Common mistakes

Try it yourself

Resources