Website Development with AI
Senior 6 · ICT
Website Development with AI
Lesson 4 of 5
25 min
Type "a one-page website for a school science club in Huye, with sections for projects, meeting times and how to join" into an AI website generator, and within a minute you have a page with a header, three sections, a colour scheme and working HTML. It looks finished. It is not. The club's meeting times are invented, the phone number belongs to nobody, the images have no descriptions, and the grey text is hard to read. The tool did the typing; the judgement is still yours.
This lesson is about using AI tools for websites well: knowing what they are doing, writing prompts that get useful output, and reviewing every line before it goes public.
Definition
Large language model (LLM): a computer program trained on a very large amount of text, including program code, to predict the most likely next piece of text (a token) given everything before it. Repeating that prediction produces whole paragraphs or whole programs.
Prompt: the instructions and information you give a generative AI tool.
Hallucination: output from an AI model that is fluent and confident but false, such as an invented phone number, address or statistic.
An AI website generator sends your prompt to a large language model. The model has seen millions of web pages and their code during training, so it is very good at producing code that looks like a typical website for your description. It does not visit your school, know your club's timetable or check whether a link works. Everything it cannot know, it fills with something plausible. That leads to three rules:
| Kind of AI tool | What it produces | Typical use |
|---|---|---|
| AI builder inside a hosting platform | A site inside that platform, edited with its tools | Small businesses that will stay on that platform |
| Code generator such as DeepSite, or a general chat assistant | HTML, CSS and JavaScript files you own and can edit | A prototype or a simple static site you then refine |
| AI features inside a CMS | Draft text, images or layouts in the CMS editor | Helping editors write and lay out content |
3Blue1Brown: Large Language Models explained briefly. Watch for how a model predicts one token at a time and why it is trained on so much text; this is the engine inside every AI website generator.
DeepSite is an open-source AI website generator that runs as a web app on Hugging Face Spaces (huggingface.co/spaces/enzostvs/deepsite). It was first published in March 2025 by the Hugging Face user enzostvs and is released under the MIT licence. It sends your prompt to an openly available language model (at the time of writing the choices include models from the DeepSeek, Qwen and Kimi families), streams back HTML, CSS and JavaScript, and shows a live preview beside the code. You can then ask for changes in plain language, edit the code yourself, and publish the result as your own Hugging Face Space. Use is free within limits and requires a Hugging Face account; the screens change often, so the steps below describe the workflow rather than exact buttons.
[PATRON PHONE NUMBER] for anything you do not want invented.Worked example 1: from a vague prompt to a useful one
Vague: "Make a website for our science club." The model must guess the school, the content, the style and the audience.
Structured:
lang="en", one h1, headings in order, alt text on every image, text contrast of at least 4.5 to 1, mobile-first CSS, no external libraries, no tracking scripts. Do not invent facts, names, phone numbers or addresses: use square-bracket placeholders."The structured prompt is longer, but it removes most of what the model would otherwise invent and builds the review rules into the request.
Here is a short piece of the kind of code an AI tool can produce from a vague prompt:
<html>
<head>
<title>Science Club</title>
<style> body { color: #9a9a9a; background: #ffffff; } </style>
</head>
<body>
<h1>Huye Science Club</h1>
<h4>Our projects</h4>
<img src="robot.jpg">
<p>Call us on 0788 555 123 or visit us at 12 KG 7 Ave.</p>
<a href="join.html">Click here</a>
</body>
</html>
Read it against this checklist before reading the answers below it.
| Check | Question to ask |
|---|---|
| Truth | Is every fact, name, number, address and link real and approved? |
| Structure | Doctype, lang, charset, viewport, one h1, headings in order? |
| Accessibility | Alt text on images; link text that makes sense alone; contrast of at least 4.5 to 1? |
| Responsive | Does it work at 360 pixels wide (a small phone) and on a laptop? |
| Privacy and security | Any trackers, unknown scripts or forms sending data to unknown servers? |
| Rights | Are images, fonts and icons ones you may use? |
Worked example 2: the review
KG is the Kigali street prefix, and the club is in Huye, which confirms it. A real person may own that number.<!DOCTYPE html>, no lang, no charset, and no viewport tag, without which phones shrink the page to a desktop layout.h1 jumps to h4; screen-reader users navigate by heading levels.#9a9a9a on white has a contrast ratio of about 2.8 to 1 (you will compute it in lesson 5), below the 4.5 to 1 minimum for body text.The corrected version:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Science Club | GS Example, Huye</title>
<style> body { color: #222222; background: #ffffff; } </style>
</head>
<body>
<h1>Huye Science Club</h1>
<h2>Our projects</h2>
<img src="robot.jpg" alt="Two members testing a line-following robot on a taped track">
<p>Contact the club patron: [PATRON PHONE NUMBER].</p>
<a href="join.html">Join the Science Club</a>
</body>
</html>
Every change came from the checklist, not from the AI. Total time: a few minutes, but without the review the site would have published a stranger's phone number.
Warning
What you type into an AI tool may be stored. Do not put personal data, such as students' names, phone numbers or marks, into a prompt. Read the tool's terms on how prompts are used. Laws on who owns AI-generated content are still developing, so check the terms before you sell or license a site, and say honestly when a site or text was produced with AI help if your school or client expects it.
Tip
Placeholders beat inventions. End every website prompt with: "Use square-bracket placeholders for any fact I have not given you." Then search the output for [ and fill each one with a real, approved fact.
Check: the final page contains no invented facts, passes every row of the checklist, and your problem table lists at least five fixes.
Practice
<img src="team.png"><a href="cv.pdf">Click here</a>.<img src="team.png" alt="The five members of the debate team holding their trophy"> <a href="cv.pdf">Download the club's CV template (PDF)</a>.Sources and credits
This lesson adapts CC BY-SA material and is shared under CC BY-SA 4.0.