AI Guides On
Sign in

Lesson 3 of 5 · 15 minutes · Module 2: Build it and put it online

Ask AI to build your first page

In lesson 2 you wrote a short brief. Now you’ll put that brief inside a prompt with a few clear rules, ask Claude to turn it into a web page, and save what it gives you as a file called index.html. By the end you’ll open your own website in your browser. It isn’t online yet. That’s lesson 5.

You need

  • Your brief from lesson 2
  • A free Claude account (lesson 1)
  • 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 6

    Open Claude and sign in

    Go to claude.ai in your browser and sign in with the account you made in lesson 1. You can use Google, Apple or your email address.

    Screenshot captured 2 October 2026.
    1. Sign in with Google
    2. Or enter your email address here
    3. Then press continue with email

    Step 1: Open Claude and sign in

    The Claude sign-in page with buttons to continue with Google or Apple, an email box and a "Continue with email" button.

    CheckpointYou should now be signed in and see an empty box where you can type a message.

  2. Step 2 of 6

    Paste the prompt with your brief in it

    Start a new chat. Copy the prompt below, paste it into the message box, then replace the “About the business” lines with your own brief from lesson 2. Keep the “Rules” part exactly as it is, because that’s what makes the page work when you open it from your computer.

    The prompt · works in Claude (or any AI chat tool)
    Build me a one-page website as a single HTML file called index.html. About the business: - Name: Brook Lane Bakes - What it is: a home bakery in a small town that makes sourdough loaves and celebration cakes to order - Who it's for: local families and people planning a birthday or a party - What I want visitors to do: order by email at hello@example.com - Sections: a short welcome, what I bake (three items, with a one-line description each), how ordering works (three steps), opening hours (Friday and Saturday, 8am to 1pm, collection only), and a contact section Rules: - Put everything in one file: the HTML, the CSS inside a <style> tag, and no JavaScript unless it's essential - Don't link to any outside files, fonts or images, so the page works when I open it straight from my computer - Make it look good on a phone and on a laptop - Use warm, friendly colours, large readable text and plain English - Don't make up prices, reviews, awards or customer names Reply with the complete code for index.html in one code block, then two lines telling me how to open it in my browser.

    Screenshot to come

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

    CheckpointYour message box holds the whole prompt, with your business in place of Brook Lane Bakes.

  3. Step 3 of 6

    Send it and wait for the code

    Press Enter or the send button. Claude writes the page as code. It can take a minute, and the reply is long. Let it finish without interrupting it.

    The full reply we got for the Brook Lane Bakes brief, unedited. 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.

    CheckpointYou should see a block of code that starts with <!DOCTYPE html> and ends with </html>, followed by a couple of lines telling you how to open it. If Claude shows a preview of the page instead of the code, see “Common problems”.

  4. Step 4 of 6

    Save the code as index.html

    Copy all of the code, from <!DOCTYPE html> to </html>. Make a new folder on your desktop called my-website. Open your text editor and paste the code. On a Mac, in TextEdit, choose Format > Make Plain Text before you paste. Save it in your my-website folder as index.html. If TextEdit asks which extension to use, click “Use .html”. On Windows, in Notepad, type the file 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 file called index.html (not index.html.txt).

  5. Step 5 of 6

    Open index.html in your browser

    Double-click index.html, or drag it into an open browser window. It opens straight from your computer. Nothing is online yet.

    Screenshot captured 2 October 2026.
    1. The business name, from your brief
    2. Menu links jump to each section
    3. Your welcome heading
    4. The order button opens an email

    Step 5: Open index.html in your browser

    The Brook Lane Bakes page opened from a local file: a dark brown bar with the name and four menu links, a large "Welcome to Brook Lane Bakes" heading, a short introduction and an "Email to order" button.

    CheckpointYou should now see your own page: your business name at the top, the menu links, your welcome heading and a button to order or get in touch.

  6. Step 6 of 6

    Check it at phone size

    Make your browser window as narrow as it will go and scroll down the page. Most visitors to a small business site arrive on a phone, so this matters. You’ll check it on a real phone once it’s online in lesson 5.

    Screenshot captured 2 October 2026.
    1. Menu wraps to fit a phone
    2. Cards stack into one column
    3. Order button stays easy to tap

    Step 6: Check it at phone size

    The whole Brook Lane Bakes page at phone width: the menu wraps onto two lines, and the "What I bake" cards, the three ordering steps, the opening hours and the contact section stack into one column.

    CheckpointEverything fits the width with no sideways scrolling, the cards sit one under another, and the text is easy to read.

Common problems

The finished page

The finished page, Brook Lane Bakes

The finished Brook Lane Bakes one-page website at laptop width: welcome, What I bake (three cards), How ordering works (three numbered steps), Opening hours (Friday and Saturday, 8am to 1pm, collection only) and Get in touch.

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 2Write a short brief for your pageNext: lesson 4Check it and ask for changes

Screenshots were captured on 2026-10-02 by assets/capture.mjs (Playwright, headless Chromium). Steps 2 and 3 happen inside a signed-in Claude account and step 4 in a desktop text editor, which the script cannot reach, so they have no screenshot yet rather than a made-up one.

Sources, checked 3 October 2026