Where to Build

Installs, of a desktop app or in a terminal, often fail on locked-down school laptops: that is what the install clinic at −0:15 is for.

• Account: Canva Education is free for eligible school teachers. A school email domain gets access straight away; otherwise Canva processes your application, so sign up before the day. Code access varies by plan, rollout and school settings: check that Code appears on your permitted account before the day. If it is missing, use another tool your school permits or a supplied starter with a partner.
• Get a page: open Canva AI and choose Code. Paste your whole spec (card 03) in one message: each message uses your AI allowance. Canva builds straight away. Open the preview.
• No .html file from Canva. You can copy the code, but Canva does not export it as a file. Your save point is the version number. Canva builds need internet; skip the offline test. If you need a file, use an AI chat tool below.
• Share: Publish, at the top right of the preview. In its settings, leave the site hidden from search engines. Publish again to update the same address. Open the address in a private window, signed out, before you give it to students. A public link is public (card 08).

• Account: you must be 18 or over. If AI Studio is unavailable on your school account, ask your admin and use a permitted alternative or supplied starter. Publishing needs an eligible account your school permits: Workspace accounts are ineligible for the free Starter Tier, and a personal account does not guarantee eligibility.
• Get a page, in Build mode: start a new app and paste the build prompt (card 04) with your spec at the bottom. Leave any extra options off. Build mode makes a multi-file project (a React front end with a Node.js server), not one file.
• Get one .html file: ask for one self-contained HTML file from the current project, including every fix. Build mode does not guarantee that export. If you recreate it in Playground or another permitted chat tool, take the latest spec, checked content and fixes. Rerun all checks on the final file; preview results do not transfer. Keep a project export as a backup.
• Share: give students the .html file. Publishing a link is a stretch: Publish gives a public link on Google Cloud's free Starter Tier, with no payment method, on an eligible account your school permits, for up to 2 published apps at a time. If it asks for billing, stop and use the .html file. Use Share only with colleagues, and assume the people you add can see your code.
• Watch for: if it offers to add sign-in, a database or AI features, decline and reply "No login and no database. Nothing is saved." Ask it to list possible network calls and dependencies, then review the final code and Network requests with a helper and run the offline checks (card 05). A model's reassurance is not test evidence.

• What it is: Anthropic's coding agent. It works on the files in a folder: it plans, writes and changes them, and runs commands. Use it in the Code tab of the Claude desktop app (macOS and Windows), with no terminal, or in a terminal.
• Account: a paid Claude plan (Pro, Max, Team or Enterprise) or a Claude Console account. It is not on the Free plan. On Pro and Max, Claude and Claude Code share one set of usage limits: at the limit, wait for the reset, or move to Level 2.
• Install, before the day or at the install clinic: the Claude desktop app, from claude.com/download. It includes Claude Code. Prefer a terminal? Mac, in Terminal: curl -fsSL https://claude.ai/install.sh | bash. Windows, in PowerShell: irm https://claude.ai/install.ps1 | iex, with no administrator rights needed. Git for Windows is optional. Open a new terminal and type claude --version: it prints a version number. If it says claude isn't found, ask at the install clinic. If neither will install, work at Level 2 in AI Studio and take the Level 3 stretch (card 17).
• Get a page, in the desktop app: make an empty folder on your Desktop. In the Code tab choose Local, then Select folder, and set the mode selector next to the send button to Plan. Plan lasts only for that session. Paste the plan-first prompt with your spec (card 12). When the plan matches your sketch, switch the mode to Manual and say go: Claude asks before each change, and you accept or reject it. Double-click the file it writes to open it in your browser.
• Get a page, in a terminal: make an empty folder and go into it (mkdir fractions-quiz, then cd fractions-quiz). Type claude --permission-mode plan and sign in. Check the line under the prompt box says ⏸ plan mode on. If you launched with --permission-mode plan you're already in plan mode. Shift+Tab is only for when you started with plain claude: press it until you see ⏸ plan mode on. Paste the plan-first prompt with your spec (card 12), then type Follow the instructions in my paste. and press Enter. Pasted text can contain instructions, so check what you paste. When you approve the plan, choose Yes, manually approve edits, so you review each change. Double-click the file it writes to open it in your browser.
• Save a version: check for Git: type git --version in a terminal, or ask the agent to run it. With Git, ask it to commit after each passing check, with the check in the message. No Git? Save a numbered copy: index-v2.html, index-v3.html (card 12). In a terminal, /rewind, or Esc twice on an empty prompt, undoes Claude Code's own file edits, but not changes made by the commands it runs, and it is not a saved version.
• Share: the .html file (universal fallback), or publish on GitHub Pages (card 17). A preview inside the app is for you, not students.

• What it is: OpenAI's coding agent. It works on the files in a folder, like Claude Code. Use it in the ChatGPT desktop app, which holds Chat, Work and Codex, or in a terminal.
• Account: sign in with a ChatGPT account. Codex comes with ChatGPT Free and Go as well as the paid plans. Test your account before the day. If Codex refuses your school ChatGPT account, ask your admin and use an alternative account or tool your school permits, or a supplied starter with a partner.
• Install, before the day or at the install clinic: the ChatGPT desktop app. Already have the Codex app? Update it before the day. Prefer a terminal? Mac, in Terminal: curl -fsSL https://chatgpt.com/codex/install.sh | sh. Windows, in PowerShell: powershell -ExecutionPolicy ByPass -c "irm https://chatgpt.com/codex/install.ps1 | iex". Open a new terminal, type codex and choose Sign in with ChatGPT.
• Get a page, in the desktop app: make an empty folder on your Desktop. Open Codex in the app, add your folder as a project, and leave permissions on Ask for approval; never turn on Full access. Codex may edit files and run commands in that folder without asking, so use a new, empty folder and check the plan before you say go. Type /plan, paste your spec with the plan-first prompt (card 12), check the plan against your sketch, then say go. Open the file it writes.
• Get a page, in a terminal: make an empty folder and go into it, then type codex --sandbox read-only. Read-only lets Codex read your files, but it must ask before it edits a file or goes online. Paste your spec with the plan-first prompt (card 12), which asks for the plan in words. Check the plan, say go, and approve each edit when it asks. Never choose full access. Open the file it writes.
• Windows: Codex's stronger sandbox needs administrator approval when it is set up. Without it, Codex uses a weaker sandbox, which is another reason to keep the folder new and empty. Never borrow an administrator password.
• Save a version and share: as for Claude Code.

• Account: you must be 18 or over. New accounts need phone verification by text message. VoIP numbers, Google Voice, numbers made with apps and landlines are not accepted, and one number can verify at most three accounts. The UAE is a supported country. Set it up before the day.
• Get a page: ask for one self-contained HTML file. It appears as an artifact beside the chat. Artifacts are on every plan, including Free.
• Get one .html file (the route for students): ask: Give me this page as one self-contained HTML file I can download. If you can't download it, ask Claude to show the whole file as code in the chat, then copy it and use the universal fallback. Then give students the file: they open it with no login.
• Share links are for colleagues, not students. Everyone who opens a link from the Share dialog needs a Claude account, and Claude is for over-18s. On a school Team or Enterprise account, artifacts stay inside your school unless an owner allows outside sharing. Only an older (legacy) artifact published from a chat opens without an account, and you can't make new ones: anything you make on the day needs a Claude account to open. Test any link in a private window, signed out, before you use it.
• Watch for: if your page asks users to sign in with Claude, it is calling Claude. Ask for a version that does not.

• Get a page: paste your spec and the build prompt (card 04), and ask for one self-contained HTML file. If Gemini opens it in Canvas with a preview, use that to look at the page; if not, use the universal fallback.
• Share: give students the .html file. If you can't find a download, copy the code and use the universal fallback.

• Get a page: ask for one self-contained HTML file. If the code block shows Preview, use it to look at the page; if it doesn't, use the universal fallback.
• Share: give students the .html file, made with the universal fallback.

• Account: Copilot Chat comes at no extra cost with A1, A3 and A5 education licences. It is blocked for under-13s, and off for 13 to 17-year-olds until your IT team turns it on.
• Get a page: ask for one self-contained HTML file. If you see no preview, use the universal fallback.
• Share: upload the .html file to Teams or SharePoint, then open it once from there, as a student would, to check it opens.

"One file, opens in any browser, nothing to install…"

Alex Gray, Claude Design: A Teacher's Walkthrough

A self-contained .html file works offline. To share it, email it or upload it to your LMS, Teams or Google Classroom, and check first that your school's systems accept .html files.

1. Copy all the code, from <!DOCTYPE html> to </html>. Many tools have a Copy or Download button on the code.
2. Paste it into a plain-text editor: Notepad on Windows, or TextEdit on a Mac, switched to plain text.
3. Save it as [toolname]-v1.html, not .txt. If TextEdit asks which ending to use, choose .html.
4. Double-click the file. It should open in your browser. If another app opens it, drag the file into an open browser window.

The full list is on card 08, under Safe building.

1. No student names or data. Not in any prompt, file, file name, screenshot or tool. Use made-up examples.
2. Nothing student-facing calls AI. Students use the finished page, never the AI tool. Every build today uses no AI and no keys. If a page asks users to sign in, it is calling something online: rebuild it without.
3. Age terms are about the AI tools, not your page. The AI tools set minimum ages (Claude, for example, is 18+). Students use the finished page, never the AI tool.
4. Don't publish anything with personal data. Anyone who has a published link, or finds a public repository, can open it.
5. Use your own account, or pair with someone who is logged in. Never share a password.