Build a website with AI: from brief to working page

Start with the purpose and structure

Write down who the site is for and what visitors should be able to do. For an educational club, the goal might be to understand the programme and terms before enrolment opens. Split the information into a home page, programme, parent questions and learning resources.

Sketch a small site map and one main question for each page. This gives AI a concrete task and prevents a collection of attractive but empty sections.

• Define the audience and outcome for each page.
• Prepare real claims you can substantiate.
• Connect pages with descriptive text links.

Build and verify the interface

Start with semantic HTML: headings, navigation, main content and links. Then add a layout for narrow screens, clear button states and readable contrast. AI may suggest code, but every change needs human review.

Open the site on a phone and navigate it with a keyboard. Check the menu, long headings, tables, links and forms. If a form is not connected, say so clearly and do not collect data.

• One clear h1 per page.
• Readable text and meaningful link labels.
• Keyboard and narrow viewport checks.

Make content discoverable

Serve the main text in the initial HTML. A React site can do this with static generation or server rendering. Give every page its own title, description, canonical URL and relevant internal links.

Separate URLs for each language help people and search engines reach the right version. Use hreflang only for pages that genuinely correspond. Metadata cannot replace useful content.

Publish in small steps

Save the code in Git, automate the build and review a preview before release. After publishing, check direct page visits, mobile navigation, broken links and whether secrets have leaked into browser code.

The learning outcome is a website you can explain, test and maintain. A separate guide covers the architecture needed as a project becomes more complex.