--- title: "What you'll build and what you need" url: https://aiguideson.com/courses/build-a-website-with-ai/what-youll-build/ course: "Build a website with AI and put it online" lesson: "1 of 5" minutes: 5 published: 2026-10-03 updated: 2026-10-03 author: "Jack Stovell" publisher: "Adapt Progress Evolve Limited" language: "en-GB" --- # What you'll build and what you need Lesson 1 of 5 in [Build a website with AI and put it online](https://aiguideson.com/courses/build-a-website-with-ai/) · 5 minutes 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. ## Steps ### Step 1: 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. ![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.](https://aiguideson.com/courses/build-a-website-with-ai/l1-finished-1440.png) (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 Checkpoint: You know the five parts your page will have. ### Step 2: 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. ![The Brook Lane Bakes page at phone width: the menu wraps onto two lines and the cards stack into one column.](https://aiguideson.com/courses/build-a-website-with-ai/l1-finished-390.png) (screenshot captured 3 October 2026) 1. The same page on a phone 2. Sections stack into one column Checkpoint: You’ve seen that one page can work on a laptop and a phone. ### Step 3: 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. ![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.](https://aiguideson.com/courses/build-a-website-with-ai/l1-claude-pricing.png) (screenshot captured 3 October 2026) 1. The Free plan is all you need Checkpoint: You know Claude’s Free plan is enough for this course. ### Step 4: 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. ![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.](https://aiguideson.com/courses/build-a-website-with-ai/l1-cf-pages-free.png) (screenshot captured 3 October 2026) 1. Static asset requests 2. Free and unlimited on free plans too Checkpoint: You know putting the page online is free. ### Step 5: 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. ![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.](https://aiguideson.com/courses/build-a-website-with-ai/l1-claude-login.png) (screenshot captured 3 October 2026) 1. Continue with Google 2. Or type your email address 3. Then continue with email Checkpoint: You can sign in to Claude and see a box where you can type a message. ### Step 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.) Checkpoint: You can open Notepad or TextEdit. ## Common problems ### Claude says it isn’t available where you are Claude only works in supported locations. You can do this course with another AI chat tool that writes code, such as ChatGPT. The steps are the same, but your screens will look different from ours. ### You’d rather not sign in with Google or Apple Use the email box instead. Type your email address and press Continue with email. 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 - [Claude: Plans and pricing](https://claude.com/pricing) (checked 2026-10-03) - [Claude Help Center: Get started with Claude (access, the 18+ age requirement, Free plan usage limits)](https://support.claude.com/en/articles/8114491-get-started-with-claude) (checked 2026-10-03) - [Cloudflare Docs: Pages Functions pricing (static asset requests)](https://developers.cloudflare.com/pages/functions/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)