My Big Title

\", use: \"Names the page with its most important heading.\" },\n { group: \"Text\", name: \"Section heading\", code: \"

A New Section

\", use: \"Introduces a smaller section inside the page.\" },\n { group: \"Text\", name: \"Paragraph\", code: \"

Write your sentences here.

\", use: \"Groups sentences into a paragraph.\" },\n { group: \"Text\", name: \"Emphasis\", code: \"This part matters.\", use: \"Adds spoken emphasis, usually displayed in italics.\" },\n { group: \"Text\", name: \"Strong importance\", code: \"Do not forget this.\", use: \"Marks text as especially important.\" },\n { group: \"Text\", name: \"Line break\", code: \"First line
\\nSecond line\", use: \"Starts a new line without starting a new paragraph.\" },\n { group: \"Lists\", name: \"Numbered list\", code: \"

First thing
Second thing

\", use: \"Creates a list where order matters.\" },\n { group: \"Lists\", name: \"Bullet list\", code: \"

One idea
Another idea

\", use: \"Creates a list where order does not matter.\" },\n { group: \"Links\", name: \"Link to a website\", code: \"Visit the site\", use: \"Makes clickable text that opens another website.\" },\n { group: \"Links\", name: \"Link to another page\", code: \"Read my facts\", use: \"Connects one HTML file to another.\" },\n { group: \"Links\", name: \"Jump link\", code: \"Jump to the ending\\n\\n

\\n The ending goes here.\\n

\", use: \"Moves the reader to a named place on the same page.\" },\n { group: \"Media\", name: \"Picture\", code: \" $\\\"Describe$ \", use: \"Embeds a picture and describes it accessibly.\" },\n { group: \"Media\", name: \"Audio player\", code: \"

\", use: \"Adds controls for playing sound.\" },\n { group: \"Media\", name: \"Video player\", code: \"

\", use: \"Adds controls for playing video.\" },\n { group: \"Interactive\", name: \"Reveal hidden writing\", code: \"

\\n

Open the secret

\\n

The hidden words appear here.

\\n

\", use: \"Lets a reader open and close extra content without JavaScript.\" },\n { group: \"Structure\", name: \"Navigation\", code: \"\", use: \"Groups the main links used to move around a website.\" },\n { group: \"Structure\", name: \"Section\", code: \"

\\n

Section title

\\n

Section content.

\\n

\", use: \"Groups content that belongs to the same idea.\" },\n { group: \"Style\", name: \"Simple page styles\", code: \"\", use: \"Adds CSS that changes the appearance of the page.\" },\n];\n\ntype Snippet = (typeof snippets)[number];\n\nconst previewOverrides: Record = {\n \"Link to a website\": 'Visit the site

The link brought you here.

',\n \"Link to another page\": 'Read my facts

Facts

This represents another page.

',\n \"Picture\": ' $\"A$ ',\n \"Audio player\": '

An audio player gives the reader play and volume controls.

',\n \"Video player\": '

',\n \"Navigation\": '

Home

Facts

',\n \"Simple page styles\": '

This paragraph is wearing the page styles.

',\n};\n\nfunction snippetPreview(snippet: Snippet) {\n const example = previewOverrides[snippet.name] || snippet.code;\n if (example.trimStart().startsWith(\"\n\n\n \n \n\n\n ${example}\n\n`;\n}\n\nexport function ReferenceLab({ onBack }: { onBack: () => void }) {\n const [search, setSearch] = useState(\"\");\n const [group, setGroup] = useState(\"All\");\n const [copied, setCopied] = useState(null);\n const [copyError, setCopyError] = useState(\"\");\n const groups = [\"All\", ...Array.from(new Set(snippets.map((s) => s.group)))];\n const shown = snippets.filter((s) => (group === \"All\" || s.group === group) && `${s.name} ${s.use} ${s.code}`.toLowerCase().includes(search.toLowerCase()));\n\n async function copySnippet(snippet: Snippet) {\n setCopyError(\"\");\n try {\n await navigator.clipboard.writeText(snippet.code);\n } catch {\n const temporary = document.createElement(\"textarea\");\n temporary.value = snippet.code;\n temporary.style.position = \"fixed\";\n temporary.style.opacity = \"0\";\n document.body.appendChild(temporary);\n temporary.select();\n const copiedWithFallback = document.execCommand(\"copy\");\n temporary.remove();\n if (!copiedWithFallback) {\n setCopyError(\"Copy did not work. Select the code and copy it manually.\");\n return;\n }\n }\n\n setCopied(snippet.name);\n window.setTimeout(\n () => setCopied((current) => current === snippet.name ? null : current),\n 1800,\n );\n }\n return (\n \n \n

\n \n Category\n \n \n

\n {shown.map((snippet, i) => (\n

{snippet.group.toUpperCase()}

{snippet.name}

{snippet.use}

{snippet.code}

SEE IT IN USE

\n \n

\n copySnippet(snippet)}\n className=\"bg-white border-3 border-[#17233c] px-3 py-2 font-black focus:outline-none focus:ring-4 focus:ring-[#2878d0]\"\n >\n {copied === snippet.name ? \"✓ Copied!\" : \"Copy snippet\"}\n \n {copied === snippet.name && (\n \n ✨ Snippet charm!\n \n )}\n

\n ))}\n

\n {copied ? `${copied} snippet copied to the clipboard.` : copyError}\n

\n {copyError &&

{copyError}

}\n {!shown.length &&

No snippets match that search yet.

}\n \n \n );\n}\n\n","label",[178,179,70],"frontend","modules","pulls","branches",2,"forks","envVars",{"_188":26,"_190":26},"connections",{"_188":26,"_189":26},"count","unfilledCount","emptyCount",{"_32":333,"_13":178,"_68":229,"_42":-5,"_34":35,"_171":39,"_172":91,"_36":334,"_38":26,"_71":302,"_174":-5,"_73":24,"_176":-5,"_216":335,"_17":336},{"_32":329,"_13":313,"_68":308,"_42":229,"_34":35,"_171":39,"_172":91,"_36":330,"_38":26,"_71":302,"_174":-5,"_73":24,"_176":-5,"_216":331,"_17":332},{"_32":321,"_13":322,"_68":323,"_42":308,"_34":35,"_171":117,"_172":91,"_36":324,"_38":325,"_71":72,"_174":326,"_73":24,"_176":-5,"_216":327,"_17":328},{"_32":314,"_13":315,"_68":316,"_42":308,"_34":35,"_171":39,"_172":91,"_36":317,"_38":26,"_71":72,"_174":318,"_73":24,"_176":-5,"_216":319,"_17":320},{"_32":305,"_13":306,"_68":307,"_42":308,"_34":35,"_171":39,"_172":91,"_36":309,"_38":26,"_71":72,"_174":310,"_73":24,"_176":-5,"_216":311,"_17":312},{"_32":300,"_13":179,"_68":170,"_42":229,"_34":35,"_171":39,"_172":91,"_36":301,"_38":26,"_71":302,"_174":-5,"_73":24,"_176":-5,"_216":303,"_17":304},{"_32":293,"_13":294,"_68":295,"_42":170,"_34":35,"_171":39,"_172":91,"_36":296,"_38":26,"_71":72,"_174":297,"_73":24,"_176":-5,"_216":298,"_17":299},{"_32":286,"_13":287,"_68":288,"_42":170,"_34":35,"_171":39,"_172":91,"_36":289,"_38":26,"_71":72,"_174":290,"_73":24,"_176":-5,"_216":291,"_17":292},{"_32":279,"_13":280,"_68":281,"_42":170,"_34":35,"_171":39,"_172":91,"_36":282,"_38":26,"_71":72,"_174":283,"_73":24,"_176":-5,"_216":284,"_17":285},{"_32":272,"_13":273,"_68":274,"_42":170,"_34":35,"_171":39,"_172":91,"_36":275,"_38":26,"_71":72,"_174":276,"_73":24,"_176":-5,"_216":277,"_17":278},{"_32":265,"_13":266,"_68":267,"_42":170,"_34":35,"_171":39,"_172":91,"_36":268,"_38":26,"_71":72,"_174":269,"_73":24,"_176":-5,"_216":270,"_17":271},{"_32":169,"_13":70,"_68":69,"_42":170,"_34":35,"_171":39,"_172":91,"_36":262,"_38":26,"_71":72,"_174":175,"_73":24,"_176":-5,"_216":263,"_17":264},{"_32":255,"_13":256,"_68":257,"_42":170,"_34":35,"_171":39,"_172":91,"_36":258,"_38":26,"_71":72,"_174":259,"_73":24,"_176":-5,"_216":260,"_17":261},{"_32":248,"_13":249,"_68":250,"_42":229,"_34":35,"_171":39,"_172":91,"_36":251,"_38":26,"_71":21,"_174":252,"_73":24,"_176":-5,"_216":253,"_17":254},{"_32":241,"_13":242,"_68":243,"_42":229,"_34":35,"_171":39,"_172":91,"_36":244,"_38":26,"_71":72,"_174":245,"_73":24,"_176":-5,"_216":246,"_17":247},{"_32":234,"_13":235,"_68":236,"_42":229,"_34":35,"_171":39,"_172":91,"_36":237,"_38":26,"_71":72,"_174":238,"_73":24,"_176":-5,"_216":239,"_17":240},{"_32":226,"_13":227,"_68":228,"_42":229,"_34":35,"_171":182,"_172":91,"_36":230,"_38":26,"_71":72,"_174":231,"_73":24,"_176":-5,"_216":232,"_17":233},{"_32":219,"_13":220,"_68":221,"_42":-5,"_34":35,"_171":39,"_172":91,"_36":222,"_38":26,"_71":21,"_174":223,"_73":24,"_176":-5,"_216":224,"_17":225},{"_32":210,"_13":211,"_68":212,"_42":-5,"_34":35,"_171":39,"_172":91,"_36":213,"_38":26,"_71":214,"_174":215,"_73":24,"_176":-5,"_216":217,"_17":218},"9f2fa539-7f6a-435b-bd55-d127909c7501","index.ts","01a02085-194d-7488-9979-f6554acbcbf8",["D",1787251988821],"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { Root } from \"./frontend/root.tsx\";\n\nconst app = new Hono();\n\n// Serve the (never-cached) HTML shell at the root /\napp.get(\"/\", (c) => c.html(Root()));\n\n// Give YouTube embeds a normal web origin, including when a downloaded\n// project is opened directly from Files or a local folder.\napp.get(\"/youtube/:id\", (c) => {\n const id = c.req.param(\"id\");\n if (!/^[a-zA-Z0-9_-]{6,}$/.test(id)) return c.text(\"Invalid YouTube video\", 400);\n\n return c.html(`\n\n\n \n \n YouTube video\n \n\n\n \n\n`);\n});\n\n// Serve frontend files at the version-addressed URLs Root() stamps, cached immutably\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;\n","children",[],[211],"6f44bf34-de1c-4640-b669-5a40cde4ba63","README.md","01a02085-194d-7488-9979-f1bb42346d50",["D",1787251988821],"# HTML Writing Lab\n\nA collection of beginner-friendly HTML writing activities for young web makers.\n\n## Activities\n\n- Make Your First Website\n- Tell a Hypertext Story\n- Choose Your Own Adventure\n- Make a Web Poem\n- Build a Whole Website\n- HTML Snippet Board\n\nThe activities introduce HTML structure, text, links, images, audio, video, and simple page-to-page navigation. Each builder includes a live preview and produces downloadable HTML.\n\nLive site: https://firstpage.val.run/\n\n## Architecture decision records\n\n### ADR-001: Sanitize student-authored HTML before rendering\n\n- **Status:** Accepted\n- **Date:** 2026-08-01\n\n#### Context\n\nThe advanced website activity stores each page body as an HTML string. React does not interpret a string as elements by default, so the visual editor and preview use `dangerouslySetInnerHTML` to turn that string into rendered HTML.\n\nThat API is necessary for the current visual editing experience, but unsanitized HTML is an injection sink. A script element inserted through `innerHTML` normally does not execute, but event attributes such as `onerror`, dangerous URL schemes such as `javascript:`, and other active markup can still execute in the application document.\n\nAlthough projects currently remain in the student's browser, students may paste examples from the web and future versions may support importing or sharing projects. User-authored HTML must therefore be treated as untrusted.\n\n#### Decision\n\nAll advanced-page HTML is sanitized with DOMPurify before it:\n\n1. Enters the WYSIWYG editor.\n2. Enters the visual preview.\n3. Is included in a downloaded website.\n4. Is accepted as rich HTML from the clipboard.\n\nThe sanitizer uses an allowlist intended for the lesson:\n\n- Elements: headings, paragraphs, emphasis, links, images, lists, blockquotes, and line breaks.\n- Attributes: `href`, `src`, `alt`, and `title`.\n\nScripts, event-handler attributes, embeds, styles, data attributes, ARIA attributes, and unsupported elements are removed. Toolbar-created web links and image URLs must use `http://` or `https://`. Internal page links continue to use controlled relative filenames.\n\nRaw text may still be written in HTML mode so students can see and correct their source, but only sanitized output is rendered or downloaded.\n\n#### Consequences\n\n- Student-authored HTML cannot execute JavaScript in the main First Page application through the supported editor flow.\n- Pasting formatted text continues to work, but unsupported formatting is removed.\n- Advanced users cannot add scripts, iframes, custom CSS, forms, or arbitrary attributes in this activity.\n- Adding a new supported HTML feature requires deliberately expanding the sanitizer allowlist.\n- Sanitization is the primary control. A sandboxed preview iframe and a strict Content Security Policy remain recommended defense-in-depth improvements.\n\n",[],[220],"d324095d-8946-4dc1-8c06-4ca3b9d59344","storage.ts","8820711a-9cc8-11f1-a3e8-1607ee4eb77e","01a02085-194d-7488-9979-ed61e32b72d7",["D",1787252051629],"export type SavedFirstWebsite = {\n id: string;\n name: string;\n updatedAt: number;\n step: number;\n project: Record;\n};\n\nconst DB_NAME = \"firstpage\";\nconst DB_VERSION = 1;\nconst STORE = \"projects\";\n\nfunction openDatabase(): Promise {\n return new Promise((resolve, reject) => {\n const request = indexedDB.open(DB_NAME, DB_VERSION);\n request.onupgradeneeded = () => {\n const db = request.result;\n if (!db.objectStoreNames.contains(STORE)) {\n const store = db.createObjectStore(STORE, { keyPath: \"id\" });\n store.createIndex(\"updatedAt\", \"updatedAt\");\n }\n };\n request.onsuccess = () => resolve(request.result);\n request.onerror = () => reject(request.error);\n });\n}\n\nfunction requestResult(request: IDBRequest): Promise {\n return new Promise((resolve, reject) => {\n request.onsuccess = () => resolve(request.result);\n request.onerror = () => reject(request.error);\n });\n}\n\nexport async function listFirstWebsites(): Promise {\n const db = await openDatabase();\n try {\n const projects = await requestResult(db.transaction(STORE, \"readonly\").objectStore(STORE).getAll()) as SavedFirstWebsite[];\n return projects.sort((a, b) => b.updatedAt - a.updatedAt);\n } finally {\n db.close();\n }\n}\n\nexport async function getFirstWebsite(id: string): Promise {\n const db = await openDatabase();\n try {\n return await requestResult(db.transaction(STORE, \"readonly\").objectStore(STORE).get(id));\n } finally {\n db.close();\n }\n}\n\nexport async function saveFirstWebsite(project: SavedFirstWebsite): Promise {\n const db = await openDatabase();\n try {\n await requestResult(db.transaction(STORE, \"readwrite\").objectStore(STORE).put(project));\n } finally {\n db.close();\n }\n}\n\nexport async function deleteFirstWebsite(id: string): Promise {\n const db = await openDatabase();\n try {\n await requestResult(db.transaction(STORE, \"readwrite\").objectStore(STORE).delete(id));\n } finally {\n db.close();\n }\n}\n",[],[178,227],"4607e4f3-12be-431b-bdc1-92c1d28e7131","root.tsx","01a02085-194d-7488-9979-ebd77b1c7034",["D",1787251988821],"/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport function Root() {\n return (\n <>\n {raw(\"\")}\n \n \n \n \n \n HTML Writing Lab\n \n \n \n \n `);\n\n return (\n

● ● ● LIVE WEBPAGE

History · ReferenceLab.tsx