# 03. Build your first useful website. Open a working one-page neighbourhood club site on your laptop. ## Facilitator preflight Bring laptops, internet, a projector and these local course files. Check tool access before the meetup. Keep samples free of personal information. Quick win: Generate a page, save it as index.html and open it. Prerequisites: Modules 01–02. Know how to save a text file. ### Tools and cost notes - **AI chat, a plain-text/code editor and a browser.**: Prepared before the meetup.. Local preview needs no hosting account. Publishing is a separate choice. ## Run of show | Slide | Minutes | Activity | |---|---:|---| | 1 | 3 | Build your first useful website. | | 2 | 3 | Before you start. | | 3 | 5 | Your first small win. | | 4 | 3 | What happens between input and output? | | 5 | 3 | Step 01. Create a project folder. | | 6 | 3 | Step 02. Generate the page. | | 7 | 3 | Step 03. Save and open. | | 8 | 3 | Step 04. Make it yours. | | 9 | 3 | Step 05. Test the page. | | 10 | 3 | Step 06. Decide about publishing. | | 11 | 4 | Make the working version. | | 12 | 4 | Ask for a review. Then check it. | | 13 | 6 | Prove your result works. | | 14 | 4 | When it does not work yet. | | 15 | 5 | Choose your next challenge. | | 16 | 3 | Keep the result. Keep the evidence. | | 17 | 2 | Sources you can check. | Total: 60 minutes. ## 1. Build your first useful website. 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. ## 2. Before you start. 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. ## 3. Your first small win. 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. Copyable prompt: [Open prompt](index.html#03-quick-win) ```text 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. ``` ## 4. What happens between input and output? Ask a learner to explain each stage in their own words. This is a teaching model, not a promise that all tools behave identically. ## 5. Step 01. Create a project folder. Perform these numbered actions on the laptop. Pause after the step and inspect the result. Use fictional or approved material. Source: [MDN: Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) ## 6. Step 02. Generate the page. Perform these numbered actions on the laptop. Pause after the step and inspect the result. Use fictional or approved material. Source: [MDN: Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) ## 7. Step 03. Save and open. Perform these numbered actions on the laptop. Pause after the step and inspect the result. Use fictional or approved material. Source: [MDN: Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) ## 8. Step 04. Make it yours. Perform these numbered actions on the laptop. Pause after the step and inspect the result. Use fictional or approved material. Source: [MDN: Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) ## 9. Step 05. Test the page. Perform these numbered actions on the laptop. Pause after the step and inspect the result. Use fictional or approved material. Source: [MDN: Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) ## 10. Step 06. Decide about publishing. Perform these numbered actions on the laptop. Pause after the step and inspect the result. Use fictional or approved material. Source: [MDN: Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) ## 11. Make the working version. Use fictional practice inputs. Ask learners to show their work, not just the final answer. Copyable prompt: [Open prompt](index.html#03-build) ```text 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]. ``` ## 12. Ask for a review. Then check it. Use fictional practice inputs. Ask learners to show their work, not just the final answer. Copyable prompt: [Open prompt](index.html#03-review) ```text 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]. ``` ## 13. Prove your result works. 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. ## 14. When it does not work yet. 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. ## 15. Choose your next challenge. Experienced learners use the extensions while beginners complete the same core outcome. An extension is optional, not a prerequisite for participating. ## 16. Keep the result. Keep the evidence. 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. ## 17. Sources you can check. 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. Source: [MDN: Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) ## Extensions - Add a second page and a working navigation link. - Publish only after a separate review. ## Delivery notes Arrow keys, Space, Home and End navigate slides. N opens notes. Read all slides creates a scrolling lesson. Every prompt has a real Copy prompt button with an honest manual fallback if the browser blocks clipboard access. Keep the whole curriculum folder together: PPTX prompt links open the companion index.html at the same prompt anchor. PowerPoint does not copy directly. For sharing online, rebuild with --companion-base-url set to the published curriculum URL. Motion illustrates input, agent, tool, human review and output. Pause flow stops it; system reduced-motion is respected. PDF contains a static diagram. PPTX uses an animated GIF where available; playback varies by viewer. Original teaching content, synthesized from learning objectives. Public source decks remain separate in library/. No one-to-one rebranding or permission to republish is implied.