How to build a website with AI

Three ways to build a website with AI

This guide follows the coding agent route, because it gives you a real website you fully own. The same habits help with the other two. Our AI Websites course walks through every step with practice.

Step 1: write a short spec

Your first prompt is a specification. A vague request like "make me a website" gets a generic result. Say who the site is for, what pages it needs, what each page should contain, the style you want and any technical choices.

Build a one-page website for a dog-walking business in Leeds.
Sections: hero with the business name and a booking button,
services with prices, three customer reviews, and a contact form.
Style: friendly, green and white, large readable text, works on phones.
Use plain HTML, CSS and JavaScript in separate files. No frameworks.

Step 2: set up a project folder

Create an empty folder for the site and open it in your editor or terminal with the coding agent. Many agents also read an instructions file in the project on every session, where you can put lasting rules such as "use British spelling" or "keep files under 300 lines".

Step 3: read the plan before it builds

Ask the agent to describe its plan first: which files it will create and what goes in each. Fixing a misunderstanding in the plan takes seconds; fixing it after hundreds of lines are written takes much longer. Try it: this question shows an agent's plan and asks whether it matches the request.

Step 4: review every change

Coding agents show each change as a diff: lines removed in red and lines added in green. Read them before accepting. Check the change does what you asked, doesn't touch unrelated files, and doesn't add anything you don't understand. Try one: this question shows a change and asks whether to accept or reject it.

Step 5: run it and refine

• Open it in a browser on your own computer and click through every page, on a phone-sized window too.
• Ask for one change at a time, worded precisely: "Make the booking button larger and move it above the photo" works better than "make it better".
• Show, don't describe: paste a screenshot or the exact error message rather than describing the problem.
• Learn the basics as you go. Knowing a little HTML and CSS makes it much easier to spot when the AI gets something wrong; our guide to HTML is a good start, and you can experiment in the Code Editor.

Step 6: save checkpoints

Use version control, usually Git, and commit each time the site works. A commit is a checkpoint: if a later change breaks something, you can go straight back to the last working version instead of untangling it.

Step 7: keep secrets out and put it online

If the site uses a service with an API key, such as a payment or email service, keep the key in an environment file on the server, never in the website's code, where any visitor could read it. Our guide to API keys explains why. Then publish the site with a hosting service; for a simple site of HTML, CSS and JavaScript files, many hosts offer a free tier, and some can publish straight from your Git repository.

Common mistakes

• Starting with a one-line prompt. A clear spec saves many rounds of fixes.
• Accepting every change without reading it. Agents can misunderstand, overreach or break working parts.
• Asking for many changes at once. One focused request at a time is easier to check and undo.
• Never committing. Without checkpoints, one bad change can cost hours.
• Pasting secrets into prompts or code. Keep keys in environment variables.
• Skipping phone testing. Most visitors will see the site on a phone.

Read next

AI · CoursesBuild a website with AI: a step-by-step courseLearn to build a website with AI in 32 short sections: pick a coding agent, write a spec, review its changes, fix errors, use git and go live.