AI Guides On
Sign in

Lesson 4 of 5 · 10 minutes · Module 2: Build it and put it online

Check it and ask for changes

AI writes quickly and fills gaps without asking. Before anyone else sees your page, you’ll read every line, note anything that’s wrong or made up, and ask Claude to fix it in plain words. Then you’ll save the new version and check it again.

You need

  • Your index.html from lesson 3, open in your browser
  • Your chat with Claude from lesson 3 (or a new chat)
  • Notepad (Windows) or TextEdit (Mac)

A narrated walkthrough of this lesson is coming. The steps below cover everything in it.

Written by Jack Stovell · Updated 3 October 2026

  1. Step 1 of 7

    Read every line, slowly

    Read your page from top to bottom, including the small print at the very bottom. For each line, ask three questions. Is it true? Did I say it? Would I be happy for a customer to read it? Write down every line that fails, and don’t skip any. On our page we found three problems, marked here.

    Our notes on the unedited page, written on 2026-10-02. Read our reply.

    Screenshot captured 3 October 2026.
    1. Two cake cards say nearly the same thing
    2. (the second of the two)
    3. An example email address that goes nowhere
    4. A line we never wrote
    5. The example address again

    Step 1: Read every line, slowly

    The whole Brook Lane Bakes page as Claude first made it, with problems marked: two cake cards that say nearly the same thing, the example email address in the ordering steps and the contact section, and the line "Collection only. Sorry, I don't deliver." under the opening hours.

    CheckpointYou’ve got a written list of the lines you want changed.

  2. Step 2 of 7

    Check names, times and contact details

    Check every name, day, time and email address against your brief, letter by letter. Then click each email link and button: each should open a new email addressed to you. If your brief used hello@example.com, your page will too, and mail to that address is never delivered.

    CheckpointEvery name, time and contact detail matches your brief, and every email link opens an email to you.

  3. Step 3 of 7

    Look for things you didn’t write

    AI adds friendly lines that sound right. Ours added “Sorry, I don’t deliver.” That follows from “collection only”, but it’s a promise we never made. Look for claims, promises, prices, awards or reviews you didn’t give it. Remove anything you can’t stand behind.

    CheckpointEvery claim on the page is one you’re happy to make.

  4. Step 4 of 7

    Ask for the changes in plain words

    Go back to your chat with Claude. Type your list of changes as a numbered list, using the exact words from the page in quotation marks. End by asking it to keep everything else the same and to send the complete file again. The prompt below is the one we used, so change it to match your own list.

    The prompt · works in Claude (or any AI chat tool)
    Please make these changes: 1. In "What I bake", replace the "Birthday cakes" and "Party and celebration cakes" cards with one card called "Celebration cakes": cakes for birthdays, parties and other celebrations, made to order. Then add a third card called "Seasonal bakes": a small batch of something different each month. 2. Change the email address everywhere from hello@example.com to orders@brooklanebakes.example 3. Change "Collection only. Sorry, I don't deliver." to "Collection only." Keep everything else exactly the same. Reply with the complete new index.html in one code block, then a short list of what you changed.

    The reply we got on 2026-10-03, unedited. We ran it in a new chat with our index.html pasted in above the changes (see “I closed the chat” below). It made the three changes we asked for, and drew a new leaf icon for the new card. Nothing else changed: we compared the two files line by line. Read our reply.

    Screenshot to come

    We haven’t captured this step yet. We’d rather show nothing than an old or made-up screen.

    CheckpointClaude has replied with a new block of code from <!DOCTYPE html> to </html>, followed by a short list of what it changed.

  5. Step 5 of 7

    Save the new version

    First keep a copy of your old index.html somewhere outside the my-website folder, such as your desktop, in case you want to go back. Then copy all of the new code, from <!DOCTYPE html> to </html>. Save it the same way you did in lesson 3: a new plain-text document in Notepad or TextEdit, saved as index.html in your my-website folder. Say yes when asked to replace the old file. On a Mac, if TextEdit asks which extension to use, choose “Use .html”. On Windows, type the name with quotation marks around it, “index.html”, so Notepad doesn’t add .txt to the end.

    Screenshot to come

    We haven’t captured this step yet. We’d rather show nothing than an old or made-up screen.

    CheckpointYour my-website folder holds one index.html, and it’s the new version.

  6. Step 6 of 7

    Refresh and read it all again

    Go back to your browser tab and refresh the page. Read it again from top to bottom, not just the parts you asked about, because AI can change things you didn’t ask for. Our second version made exactly the changes we asked for, marked here.

    Screenshot captured 3 October 2026.
    1. One "Celebration cakes" card
    2. New "Seasonal bakes" card
    3. New email address
    4. Now just "Collection only."
    5. New email address here too

    Step 6: Refresh and read it all again

    The Brook Lane Bakes page after the changes: the cards now read Sourdough loaves, Celebration cakes and Seasonal bakes, the email address reads orders@brooklanebakes.example in the ordering steps and the contact section, and the opening hours note now just says "Collection only."

    CheckpointEvery change you asked for is there, and nothing else has changed.

  7. Step 7 of 7

    Check phone size again

    Make your browser window as narrow as it will go and scroll down the page again. New words can be longer than old ones, so check that nothing runs off the edge, especially your email address.

    Screenshot captured 3 October 2026.
    1. The new cards still stack on a phone
    2. The long new email address still fits

    Step 7: Check phone size again

    The changed Brook Lane Bakes page at phone width: the three cards stack into one column and the longer email address still fits on one line.

    CheckpointEverything fits the width with no sideways scrolling.

Common problems

The finished page

Our worked example after this lesson. Brook Lane Bakes is fictional, so its email address uses .example, which is reserved for examples and never receives mail. Yours should be your real address.

The finished page, Brook Lane Bakes

The checked Brook Lane Bakes page: three different bakes, one email address used everywhere, and only claims the owner made.

When you have finished

Want to keep your place? Get a sign-in link by email and we’ll save your progress. You can keep reading either way. Sign in to save your progress.

Previous: lesson 3Ask AI to build your first pageNext: lesson 5Put it online for free with Cloudflare Pages

Screenshots captured by tools/capture/build-a-website-with-ai.mjs from our two unedited pages (before and after the change request), opened from local files. Step 4 happens in a signed-in Claude chat and step 5 in a desktop text editor, so they have no screenshot yet rather than a made-up one.

Sources, checked 3 October 2026