---
title: "Ask AI to build your first page"
url: https://aiguideson.com/courses/build-a-website-with-ai/ask-ai-to-build-your-first-page/
course: "Build a website with AI and put it online"
lesson: "3 of 5"
minutes: 15
published: 2026-10-02
updated: 2026-10-03
author: "Jack Stovell"
publisher: "Adapt Progress Evolve Limited"
language: "en-GB"
---

# Ask AI to build your first page

Lesson 3 of 5 in [Build a website with AI and put it online](https://aiguideson.com/courses/build-a-website-with-ai/) · 15 minutes

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.

## Steps

### Step 1: 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.

![The Claude sign-in page with buttons to continue with Google or Apple, an email box and a "Continue with email" button.](https://aiguideson.com/courses/build-a-website-with-ai/lesson3-step1-claude-login.png) (screenshot captured 2 October 2026)

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

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

### Step 2: 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)):

```text
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.
```

- Asking for one file means there is only one thing to save.
- No outside files, fonts or images means nothing breaks when you open it straight from your computer.
- Telling it not to make up prices, reviews or names stops it filling gaps with things that aren’t true.

(Screenshot to come.)

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

### Step 3: 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.

(Screenshot to come.)

Checkpoint: You 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".

### Step 4: 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.)

Checkpoint: Your my-website folder holds one file called index.html (not index.html.txt).

### Step 5: 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.

![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.](https://aiguideson.com/courses/build-a-website-with-ai/lesson3-step5-opened-local.png) (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

Checkpoint: You 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.

### Step 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.

![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.](https://aiguideson.com/courses/build-a-website-with-ai/artefact-390.png) (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

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

## The finished page

![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.](https://aiguideson.com/courses/build-a-website-with-ai/artefact-1440.png)

## Common problems

### The file opens as a page of code, or as text, instead of a website

It has been saved as index.html.txt or as rich text. On Windows, turn on file name extensions (File Explorer: View > Show > File name extensions) and rename it to index.html. On a Mac, open a new TextEdit document, choose Format > Make Plain Text, paste the code again and save it as index.html.

### Claude shows a preview of the page, not the code

Claude can show web pages as an Artifact, a preview beside the chat. Reply with: "Please show me the complete code for index.html in one code block." Then copy it as in step 4.

### The code stops partway and doesn’t end with </html>

The reply was cut short. Reply with: "Your reply stopped partway. Please send the complete index.html again in one code block." Don’t try to join two half answers together.

### Two of the items say nearly the same thing

This happened in our run: we asked for three items but only named two things (sourdough loaves and celebration cakes), so Claude split cakes into "Birthday cakes" and "Party and celebration cakes". Name every item in your brief, or ask for the change in lesson 4.

### The page says something you didn’t write

AI fills gaps. Ours added "Sorry, I don’t deliver." That follows from "collection only", but it is still a claim about the business we didn’t make. Read every line before anyone else sees it; lesson 4 shows you how to change it.

### The email button goes nowhere

The prompt uses hello@example.com, an address reserved for examples, so mail to it is never delivered. Put your real email address in your brief, or change it in lesson 4.

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

- [Claude: Plans and pricing](https://claude.com/pricing) (checked 2026-10-03)
- [Apple Support: Work with HTML documents in TextEdit on Mac](https://support.apple.com/guide/textedit/work-with-html-documents-txted0b6cd61/mac) (checked 2026-10-03)
- [Microsoft Support: Common file name extensions in Windows (how to show them)](https://support.microsoft.com/en-us/windows/common-file-name-extensions-in-windows-da4a4430-8e76-89c5-59f7-1cdbbc75cb01) (checked 2026-10-03)
- [Microsoft Q&A: HTML in Notepad (community answer: type the file name in quotation marks, "index.html", so Notepad does not add .txt)](https://learn.microsoft.com/en-us/answers/questions/3832577/html-in-notepad) (checked 2026-10-03)
- [RFC 2606: Reserved top-level DNS names (example.com, .example)](https://www.rfc-editor.org/rfc/rfc2606) (checked 2026-10-03)