Building a web page with an AI helper: plan, ask, check
A static page shows the same content every time it opens. To build one with an AI helper, work in small steps. First write the plan yourself: what is the page for, who will read it, and which parts does it have (a heading, a short text, a list, a picture with a text description, a button). Then ask for one part at a time, with a clear prompt, so each answer is short enough to read. Read the code the helper gives: do the tags open and close, are the quotes matched, does every size have a unit, does the id in the CSS match the id in the HTML? Then test the page and compare it with the plan. If something is wrong, change one thing and test again. Keep only what you understand. At the end you can say what the helper did and what you checked, because you are the author and the work is yours, with its mistakes as well. Never put personal data of real people on the page.
| Part | Plan | Prompt idea |
|---|---|---|
| Purpose | Tell pupils when the library club meets | - |
| Heading | Library club | Write an HTML heading and one short paragraph. |
| List | Three activities | Add a list with three items. |
1<h2>Library club</h2> 2<img src="club.png alt="Club room> 3<button id="join">Join
1<h2>Library club</h2> 2<p class="note">Open on Sunday.</p> 3<img src="club.png" alt="Club room"> 4<button id="join">Join</button>
On paper, plan a one-screen page for an invented school event. Write the purpose, the parts, and three prompts in order, one part each. Then write what you will check in the code before you test it.