Open a working one-page neighbourhood club site on your laptop.
Build one thingCheck it worksChoose an extension
Module 03 / Build together
Before you start.
01
You already know
Modules 01–02. Know how to save a text file.
02
Open these tools
AI chat, a plain-text/code editor and a browser.
03
Check the requirement
Local preview needs no hosting account. Publishing is a separate choice.
Module 03 / Build together
Your first small win.
Create one complete index.html for a fictional neighbourhood book club. Include a heading, three activities and a sample contact placeholder. Use crimson #E11021, ink #0A0A0B and near-white #FAFAFA. No external assets or forms. Return code only.
Module 03 / Build together
What happens between input and output?
1HTML holds the content. CSS controls the look.
2A local file is a preview, not a published site.
3Only publish facts and contact details you approve.
Module 03 / Build together
Step 01. Create a project folder.
1Make a folder named my-first-website.
2Open a plain-text editor.
3On macOS TextEdit, choose plain text before pasting.
Module 03 / Build together
Step 02. Generate the page.
1Copy the quick-win prompt into your AI tool.
2Copy only the HTML code.
3Remove opening and closing Markdown fences.
Module 03 / Build together
Step 03. Save and open.
1Save as index.html, not index.html.txt.
2Open the file in a browser.
3Confirm the title and three activities appear.
Module 03 / Build together
Step 04. Make it yours.
1Replace fictional text with approved practice details.
2Ask for one layout change at a time.
3Refresh after saving the file.
Module 03 / Build together
Step 05. Test the page.
1Narrow the browser to phone width.
2Check headings, contrast and keyboard focus.
3Click every link; remove placeholder destinations.
Module 03 / Build together
Step 06. Decide about publishing.
1Keep it local if it is only a prototype.
2For a public site, choose a host and check its terms.
3Review all facts and permissions before uploading.
Module 03 / Build together
Make the working version.
Improve this HTML into a responsive one-page club site. Keep existing facts. Use semantic headings, readable contrast and visible keyboard focus. No tracking, external dependencies or invented links. Explain where to edit the text. HTML: [paste].
Module 03 / Build together
Ask for a review. Then check it.
Review my HTML for mobile layout, heading order, contrast, broken links and misleading claims. Give a short test checklist and exact changes. Do not invent test results. HTML: [paste].
Module 03 / Build together
Prove your result works.
1index.html opens without installation.
2No horizontal scrolling at a narrow width.
3All visible information is approved or labelled fictional.
Module 03 / Build together
When it does not work yet.
01
It shows code
Check the extension and open it in a browser.
02
No change appears
Save the correct file, then refresh the browser.
Module 03 / Build together
Choose your next challenge.
01
Core complete
Show one checked output to a partner.
02
Extension 1
Add a second page and a working navigation link.
03
Extension 2
Publish only after a separate review.
Module 03 / Build together
Keep the result. Keep the evidence.
Open a working one-page neighbourhood club site on your laptop.
Save your filesSave your promptName the next change
Module 03 / Build together
Sources you can check.
01
MDN
Your first website
Build your first useful website.
3 minutes
Outcome: Open a working one-page neighbourhood club site on your laptop. This is a 60-minute in-person laptop session after preflight. No setup-duration guarantee. Core first, extensions second.
References
Before you start.
3 minutes
Local preview needs no hosting account. Publishing is a separate choice. The facilitator verifies accounts, installed tools and model/host connections before the session. Pair up if setup is incomplete. Do not create accounts or incur costs without understanding the provider terms.
References
Your first small win.
5 minutes
Quick win: Generate a page, save it as index.html and open it. Aim for a visible result in the first 15 minutes after preflight. Explain that generated code/output is untested until the learner checks it. If tools are unavailable, inspect the prepared example with a partner.
References
What happens between input and output?
3 minutes
Ask a learner to explain each stage in their own words. This is a teaching model, not a promise that all tools behave identically.
References
Step 01. Create a project folder.
3 minutes
Perform these numbered actions on the laptop. Pause after the step and inspect the result. Use fictional or approved material.
Use fictional practice inputs. Ask learners to show their work, not just the final answer.
References
Ask for a review. Then check it.
4 minutes
Use fictional practice inputs. Ask learners to show their work, not just the final answer.
References
Prove your result works.
6 minutes
These are manual acceptance tests for the learner to perform. No test is claimed to have run merely because it appears here. Ask pairs to demonstrate one pass and one corrected failure.
References
When it does not work yet.
4 minutes
Choose the observed symptom. Change one thing and rerun the smallest test. Avoid restarting the whole project or adding tools before diagnosing the current step.
References
Choose your next challenge.
5 minutes
Experienced learners use the extensions while beginners complete the same core outcome. An extension is optional, not a prerequisite for participating.
References
Keep the result. Keep the evidence.
3 minutes
Save the working version before leaving. Add a short note: what worked, what needed correction and what you would try next. The next module builds on the saved output.
References
Sources you can check.
2 minutes
Primary sources checked during course creation on 2026-10-08. Provider interfaces and availability can change. The examples, prompts and activities are original community teaching designs. Source links explain capabilities; they do not prove these fictional exercises were executed.
