AI Guides On
Sign in

Lesson 1 of 5 · 5 minutes · Module 1: Get ready

What you'll build and what you need

This course ends with a real web page on the internet and a link you can send to anyone. Before you start, have a look at the page we made, meet the two free tools you’ll use, and get a free Claude account ready.

You need

  • About five minutes
  • An email address

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

    Look at the page you’ll make

    This is the page our worked example ended with: a one-page website for Brook Lane Bakes, a made-up home bakery. It has five parts: a welcome, what the bakery makes, how ordering works, opening hours and how to get in touch. Your page will have your own words in it and will look different, because AI gives a different answer every time. That’s normal.

    Screenshot captured 3 October 2026.
    1. A welcome, with a button to order
    2. What you offer
    3. How it works
    4. Opening hours
    5. How to get in touch

    Step 1: Look at the page you’ll make

    The whole Brook Lane Bakes page at laptop width: a welcome with an "Email to order" button, "What I bake" with three cards, "How ordering works" with three numbered steps, the opening hours and a "Get in touch" section.

    CheckpointYou know the five parts your page will have.

  2. Step 2 of 6

    See it at phone size

    Here’s the same page on a phone. The sections sit one under another and the text stays easy to read. You’ll check your own page like this in lessons 3, 4 and 5, so it’s worth a proper look now.

    Screenshot captured 3 October 2026.
    1. The same page on a phone
    2. Sections stack into one column

    Step 2: See it at phone size

    The Brook Lane Bakes page at phone width: the menu wraps onto two lines and the cards stack into one column.

    CheckpointYou’ve seen that one page can work on a laptop and a phone.

  3. Step 3 of 6

    Meet the first tool: Claude

    Claude is an AI chat tool. You’ll paste in a short description of your business and Claude will write the page for you. Its Free plan is listed as “Free for everyone” and covers everything in this course, so you don’t need to pay.

    Screenshot captured 3 October 2026.
    1. The Free plan is all you need

    Step 3: Meet the first tool: Claude

    Claude’s pricing page with three plans side by side: Free, Pro and Max. The Free plan shows €0 and "Free for everyone". Prices were shown in euros because our capture ran from a server in Europe.

    CheckpointYou know Claude’s Free plan is enough for this course.

  4. Step 4 of 6

    Meet the second tool: Cloudflare Pages

    Cloudflare Pages puts web pages online. Its instructions say that visits to plain files like your page are free and unlimited, on the free plan as well as paid ones. Your page is one plain file, so it costs nothing to keep online. You’ll make a free Cloudflare account in lesson 5.

    Screenshot captured 3 October 2026.
    1. Static asset requests
    2. Free and unlimited on free plans too

    Step 4: Meet the second tool: Cloudflare Pages

    Cloudflare’s documentation page about Pages pricing, open at the heading "Static asset requests", which says requests to static assets are free and unlimited on both free and paid plans.

    CheckpointYou know putting the page online is free.

  5. Step 5 of 6

    Make a free Claude account

    Go to claude.ai in your browser. Choose Continue with Google or Continue with Apple, or type your email address and press Continue with email, then follow the steps on screen. You must be 18 or over to use Claude.

    Screenshot captured 3 October 2026.
    1. Continue with Google
    2. Or type your email address
    3. Then continue with email

    Step 5: Make a free Claude account

    The Claude sign-in page: buttons to continue with Google or Apple, a box to enter your email address and a black "Continue with email" button.

    CheckpointYou can sign in to Claude and see a box where you can type a message.

  6. Step 6 of 6

    Find your text editor

    You’ll save your page with a plain text editor that’s already on your computer: Notepad on Windows, or TextEdit on a Mac. Find it now and open it once, so you know where it is in lesson 3. You don’t need to type anything yet.

    Screenshot to come

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

    CheckpointYou can open Notepad or TextEdit.

Common problems

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.

Next: lesson 2Write a short brief for your page

Screenshots captured by tools/capture/build-a-website-with-ai.mjs (Playwright, headless Chromium). The finished page is the unedited page from lesson 3, opened from a local file. Step 6 happens in a desktop app, which the script cannot reach.

Sources, checked 3 October 2026