From 6639a70070405ff68637ecae3d999109369c3e32 Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Thu, 15 Jan 2026 16:26:20 +0100 Subject: [PATCH] feat: complete reference coverage and UX improvements MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Reference pages: - Add min-width, min-height, border-collapse to Box Model - Add blockquote to Text Content - Add new Semantic Inline section (time, mark, small, abbr, kbd, sub, sup, ins, del) UX improvements: - Rename "Free Coding" to "HTML & CSS Editor" in Playground - Keep Welcome and Playground modules always expanded in sidebar 🤖 Generated with [Claude Code](https://claude.com/claude-code) --- lessons/98-playground.json | 4 ++-- src/app.js | 22 ++++++++++++++++++++++ src/helpers/renderer.js | 5 +++++ 3 files changed, 29 insertions(+), 2 deletions(-) diff --git a/lessons/98-playground.json b/lessons/98-playground.json index 606447e..57a0a0a 100644 --- a/lessons/98-playground.json +++ b/lessons/98-playground.json @@ -1,7 +1,7 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "playground", - "title": "HTML & CSS Editor", + "title": "Playground", "description": "Experiment freely with HTML and CSS", "mode": "playground", "difficulty": "beginner", @@ -9,7 +9,7 @@ "lessons": [ { "id": "sandbox", - "title": "Editor", + "title": "HTML & CSS Editor", "mode": "playground", "description": "", "task": "", diff --git a/src/app.js b/src/app.js index d8fc76a..b9cf9cb 100644 --- a/src/app.js +++ b/src/app.js @@ -1345,11 +1345,14 @@ const referenceContent = { widthlength, %, auto, fit-contentwidth: 100%; heightlength, %, autoheight: 200px; + min-widthlength, %, automin-width: 200px; + min-heightlength, %, automin-height: 100vh; max-widthlength, %, nonemax-width: 600px; paddinglength (1-4 values)padding: 1rem 2rem; marginlength, auto (1-4 values)margin: 0 auto; borderwidth style colorborder: 1px solid gray; border-radiuslength (1-4 values)border-radius: 8px; + border-collapseseparate, collapseborder-collapse: collapse; box-sizingcontent-box, border-boxbox-sizing: border-box; @@ -1705,6 +1708,7 @@ const referenceContent = { <em>Emphasized text (italic)<em>really</em> <code>Inline code<code>const x</code> <pre>Preformatted textCode blocks + <blockquote>Block quotation<blockquote cite="src"> <span>Generic inline containerStyling inline text <br>Line breakAddress, poem lines <hr>Thematic breakScene change, topic shift @@ -1712,6 +1716,24 @@ const referenceContent = { +
+

Semantic Inline

+ + + + + + + + + + + + + +
ElementPurposeExample
<time>Date/time<time datetime="2024-01-15">
<mark>Highlighted text<mark>important</mark>
<small>Fine printLegal text, copyright
<abbr>Abbreviation<abbr title="HyperText">HTML</abbr>
<kbd>Keyboard input<kbd>Ctrl+C</kbd>
<sub>SubscriptH2O
<sup>Superscriptx2
<ins>Inserted textShows additions
<del>Deleted textShows removals
+
+

Lists

diff --git a/src/helpers/renderer.js b/src/helpers/renderer.js index 4dbc0b5..3cae293 100644 --- a/src/helpers/renderer.js +++ b/src/helpers/renderer.js @@ -37,6 +37,11 @@ export function renderModuleList(container, modules, onSelectModule, onSelectLes moduleContainer.classList.add("module-container"); moduleContainer.dataset.moduleId = module.id; + // Keep welcome and playground modules always expanded + if (module.id === "welcome" || module.id === "playground") { + moduleContainer.open = true; + } + // Create module header using const moduleHeader = document.createElement("summary"); moduleHeader.classList.add("module-list-item", "module-header");