Build and launch a website with AI

Learn in your browser · Chapter 01 of 06

The best prompt in the world cannot rescue a site with no plan. Ten minutes of thinking first saves an hour of fiddling later.

In this workbook you will build a static website: a set of ready-made files (pages, images and styles) that a server hands to visitors exactly as they are. Static sites are quick, simple to secure and cheap or free to host. They suit a personal page, a portfolio, a club or a small business brochure. On their own they do not handle logins, payments or databases.

Answer five questions on paper before you open an AI.

• Goal: what one thing should a visitor do? Call you, read something, book, or buy elsewhere?
• Audience: who are they, and what must they learn in the first ten seconds?
• Pages: start with one to four.
• Content: the real words, photos and facts, written or gathered by you.
• Look and tone: two or three adjectives, such as calm, warm and professional.

Scroll sideways to see every column.

Learn in your browser · Chapter 02 of 06

You do not need to become a coder. You do need to read what the AI gives you, or you cannot judge it.

A web page is a text file that your browser turns into a page. Three languages share the work.

• HTML gives the page its structure and meaning: headings, paragraphs, links, images and lists. Think of the rooms and walls.
• CSS controls the look: colours, fonts, spacing and layout. Think of the decoration.
• JavaScript adds behaviour: menus that open, forms that check themselves. Think of the wiring. A simple brochure site needs little or none.

Here is a small, complete page using only HTML and CSS. The image line points at a file called loaf.jpg that you would add to the same folder. Until you do, the browser shows the alt text instead.

<!DOCTYPE html>
<html lang="en-GB">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Example Bakery: fresh bread every morning</title>
  <meta name="description" content="Small-batch sourdough, baked every morning.">
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.6; margin: 0; color: #222; background: #fffdf8; }
    header, main, footer { max-width: 40rem; margin: 0 auto; padding: 1rem; }
    a { color: #7a4b00; }
    a:focus { outline: 3px solid #7a4b00; outline-offset: 2px; }
    img { max-width: 100%; height: auto; }
  </style>
</head>
<body>
  <header>
    <h1>Example Bakery</h1>
    <nav><a href="#bread">Our bread</a> <a href="#hours">Opening hours</a></nav>
  </header>
  <main>
    <h2 id="bread">Bread made slowly</h2>
    <p>We bake sourdough every morning from flour, water and salt.</p>
    <img src="loaf.jpg" alt="A golden sourdough loaf on a wooden board" width="600" height="400">
  </main>
  <footer id="hours"><p>Open Tuesday to Saturday.</p></footer>
</body>
</html>

Scroll sideways to see every column.

CSS works in rules: name something, then say how it should look. The rule a { color: #7a4b00; } makes every link dark brown. JavaScript would sit inside a script element and runs on the visitor's own device, one reason to treat it with care (see chapter 4).

Learn in your browser · Chapter 03 of 06

Good results need a specific brief. Treat the AI like a fast freelancer who knows nothing about your business.

Give it five things: the goal, audience and pages from your plan; your real content; hard constraints; the technical format; and what to leave out. Here is a worked prompt you can adapt.

Act as a careful web developer. Build a small website for a bakery called Example Bakery.

Goal: visitors should know what we bake and how to order.
Audience: local people who want fresh bread, mostly on phones.
Pages: Home, About and Contact, as sections of ONE file called index.html.

Use only my content below. Do not invent testimonials, awards, prices, addresses or statistics. Where something is missing, write [ADD: what is needed].

Content:
- Headline: Bread made slowly
- Intro: We bake sourdough every morning from flour, water and salt.
- About: [ADD: two sentences from me]
- Contact: by email at [ADD: email address]

Requirements:
- One file, HTML and CSS only. No JavaScript, no external fonts, no third-party scripts, no trackers.
- Mobile first, readable at 320 pixels wide.
- Accessible: semantic elements, one h1, sensible heading order, text contrast of at least 4.5 to 1, visible keyboard focus, alt text on images.
- British English, calm and warm.
- Short HTML comments explaining each section.

After the code, list every assumption you made and anything I should check.

Then work in small steps. Ask for one change at a time ('make the heading larger') and ask questions ('explain the style section in plain English'). If something breaks, describe the problem and ask for a fix, but never paste anything private.

A useful trick: paste the finished file into a fresh chat and ask, 'Review this against my requirements and point out anything unsafe, inaccessible or unnecessary.' A second opinion catches things, though it can also be wrong.

Learn in your browser · Chapter 04 of 06

Before anything goes public, look at it, use it and read it. Ten careful minutes here prevent hard-to-undo mistakes.

Preview locally by opening index.html in your browser. Edit, save, refresh. Check a narrow window like a phone, a wide window, and keyboard only: press Tab repeatedly. Can you reach every link, and see where you are?

Then read the code, especially the parts you did not ask for. Your published files are public: anyone can view a page's source, so nothing secret can live in them.

Watch for these red flags in AI-written code.

• Script elements that load code from another website. It runs inside your page, can track visitors and can change without you knowing.
• Anything that sends data elsewhere, such as forms with unfamiliar addresses.
• Scrambled code that the AI cannot explain in plain words.
• Features you never asked for: analytics, chat widgets, pop-ups, cookie setters.
• Links to sites you do not recognise, or hidden text.
• Invented facts: prices, phone numbers, awards, addresses.

Third-party scripts deserve special care. Analytics, chat boxes, maps, video embeds and web fonts are convenient, but each brings another company into your page and your visitors' privacy. Add one only if you need it, take it from the provider's own documentation, and read what it collects.

Learn in your browser · Chapter 05 of 06

Publishing means putting your files on an always-on, connected computer. That is what a host does, and for static sites there are free options.

Static hosting stores your files and serves them to visitors. Several well-known providers offer a free plan for static sites. Three are described here as examples, not recommendations. Limits and terms change, so read the current ones on the provider's own page.

Scroll sideways to see every column.

1. Put your site in one folder: index.html plus any images.
2. Choose a host and create an account. Use a strong, unique password and two-step verification.
3. Follow the host's own current guide for a static site. Screens change, so trust it over any old tutorial, including this one.
4. Open the live address on your phone, fix anything odd and publish again.

A domain name is the address people type, such as yourname.co.uk. Hosts give you a free address by default. A domain of your own is optional. You rent it, usually yearly, from a company called a registrar. Pick something short and easy to say aloud, avoid names close to another brand, and set a renewal reminder, because an expired domain can be lost. Registration details may be public unless the registrar hides them.

HTTPS is what some browsers show as a padlock beside the address. It encrypts the connection between your visitor and your site so it cannot be read or changed on the way. Check that your host offers it, then switch it on and leave it on. It shows the connection is private. It does not show that a site is honest.

Learn in your browser · Chapter 06 of 06

A live site is the start. Four habits keep it findable, usable by everyone, respectful of visitors and still healthy next year.

Search (SEO) basics. Search engines read your text and follow links. Give each page a unique title and a short description, and break up long pages with clear headings. Write link text that makes sense alone ('read our menu', not 'click here'). Keep images small. Original, useful writing matters most. No one can promise you a ranking, so be wary of anyone who does.

Accessibility. This means people with different abilities and devices can use your site. Use real headings and lists, give meaningful images alt text, keep contrast strong (the Web Content Accessibility Guidelines ask for at least 4.5 to 1 for normal text at their AA level), never rely on colour alone, make everything work by keyboard with a visible focus, and label any form field.

Privacy. The most private site collects nothing. A plain page with no analytics, no embeds and no third-party fonts sets no cookies (small files a site stores in a visitor's browser) and should have nothing to ask consent for. Your host may still log some visitor data: GitHub's documentation, for example, says it logs visitors' IP addresses for security. Read your host's privacy terms.

If you add analytics, embeds or anything that stores or reads information on visitors' devices, UK rules on cookies and similar technologies (PECR) and on personal data (UK GDPR) come into play. The Information Commissioner's Office publishes guidance, finalised in 2026, and some uses need consent. This workbook is not legal advice.

Forms. A static page cannot receive form submissions by itself. You need a form service or other back end, which means you now collect personal data. Collect the minimum, say in a short privacy notice what you do with it and for how long, read your provider's terms, and never ask for passwords or payment details. Showing an email address is simpler.

Upkeep. A little regular care goes a long way.

• Keep a copy of your files somewhere other than the host.
• Every quarter, click every link and check dates, opening hours and prices.
• Renew your domain and protect your accounts with two-step verification.
• When you ask AI to change the code, review the new version as carefully as the first.

Well done. You have taken a site from idea to the open web. Next, the workbooks on AI agents and on building a chatbot show what changes when AI can act for you, and how to add a conversational helper to your own project.