A practical companion for teachers building single-file lesson microsites with AI tools. Use this page during the workshop and afterwards.
Open these three tabs before we begin. Everything else flows through this page.
Any of Claude, ChatGPT, Gemini, or DeepSeek will work. A free account is enough.
Compare →One concept you teach where students typically lose focus or struggle.
Prompt template →Students spend hours each day inside interfaces designed by recommendation systems. Attention is shaped by algorithmic feedback rather than by sustained reading. The lesson, in its traditional form, competes with this structure.
A lesson microsite is not a replacement. It is a different surface where attention can be designed deliberately, on a single page, for a specific learning moment.
The interface is not the lesson. It is the place where the lesson meets the student. Treat it as a designed object.
Both used with students. Both built using the workflow you will learn today. Plus a prompt builder so you can make your own.
A live annotation room. Teacher publishes a text; students join by room code and tag passages as confusing, interesting, important. Highlights appear in real time.
→A drag-and-drop image canvas. Students arrange, label, and reorder visual material to make relationships visible. Multiple boards, export to JSON or PDF.
→Click activity chips and toggle options. The prompt assembles in real time. Copy and paste into any AI tool to generate your own learning interface.
→This is the structure that produces a working single-file microsite across all four AI tools. Fill in the bracketed parts.
Build a single self-contained HTML file with inline CSS and JavaScript. No external libraries. No fetches. No build step. SUBJECT: [your subject, e.g. Year 10 Biology] TOPIC: [one specific concept, e.g. osmosis in plant cells] LEARNING GOAL: [what students should be able to do after, in one sentence] ACTIVITY TYPE: [choose one: ranking, sorting, matching, hotspot, timeline, comparison, scenario decision, drag-and-drop, quiz with feedback] CONTENT: [paste your lesson notes, key facts, or examples here. Aim for 100 to 300 words of source material.] INTERACTION RULES: - Students complete the activity in 5 to 8 minutes - Each interaction gives immediate, specific feedback - Include a final reflection prompt that asks students to write 2 to 3 sentences DESIGN: - Clean, distraction-free, no animations beyond essential feedback - Works on phone and laptop - Single column on mobile, two column on desktop where useful - Use system fonts only OUTPUT: A complete .html file I can save and open in a browser. Wrap the entire file in one code block.
Each AI tool returns code in a slightly different way. Use the steps below for your tool.
| Platform | How to save |
|---|---|
| Claude | Claude returns HTML as an Artifact panel on the right. Click the download icon at the top of the panel. The file saves directly as .html. No copy-paste needed. |
| ChatGPT | ChatGPT can return HTML in a Canvas panel on the right, like Claude's Artifacts. If Canvas doesn't open automatically, ask: "open this in canvas." Then click the download icon at the top-right of the panel. The file saves directly as .html. If you're stuck with inline code instead, fall back to Copy → Notepad/TextEdit → save as lesson.html. |
| Gemini | Code appears in a code block. Click the copy icon. Paste into Notepad or TextEdit (Plain Text). Save as lesson.html. If Gemini splits the file across multiple blocks, ask: "Combine everything into one HTML file in a single code block." |
| DeepSeek | Code appears in a code block with a copy icon at the top right. Click Copy. Paste into Notepad or TextEdit (Plain Text mode). Save as lesson.html. DeepSeek occasionally adds explanatory text inside the code block; remove anything that is not HTML before saving. |
TextEdit defaults to Rich Text Format, which will break your file. Before pasting, go to Format menu → Make Plain Text. When saving, untick "If no extension is provided, use .txt".
The microsite is a surface for one learning moment. It is not a textbook, not a course, not a replacement for teaching.
If you have three learning objectives, build three files. A microsite that tries to do everything ends up doing nothing well.
What students learn happens in the response to their click, not in the click itself. Spend most of your prompt describing what the feedback should say.
If it does not work on a phone, half your students cannot use it. Open every file on your phone before you assign it.
The first version is rarely the right one. Run it in class, watch what confuses students, refine the prompt, regenerate.
Three things to do this week to keep the practice alive.
Pick a lesson you are already planning. Build a microsite for the part where students usually drift.
Walk one colleague through the prompt structure. Teaching it once embeds it in your own practice.
Save every working file in one folder named "lesson microsites". After a term you will have a library.