feat: add JavaScript lesson section with starter lessons and sidebar section grouping headers

Implementation following plan: - S01: Update JSON schema to support 'javascript' mode - S02: Install @codemirror/lang-javascript dependency - S03: Define JavaScript section in sections.js - S04: Create 3 JavaScript lesson JSON files (variables, DOM, events) - S05: Add JavaScript validation support in validator.js - S06: Add JavaScript preview rendering in LessonEngine.js - S07: Add JavaScript CodeMirror mode and editor config - S08: Register JavaScript modules in all language stores - S09: Add JavaScript section to landing page, navigation, and app config - S10: Add sidebar section grouping headers with category mapping - S11: Update tests for JavaScript mode and section headers
2026-03-28 14:03:45 +01:00
39 changed files with 1033 additions and 2518 deletions
--- a/.claude/settings.json
+++ b/.claude/settings.json
@@ -1,6 +1,15 @@
 {
 	"permissions": {
 		"allow": [
+			"Bash(git add:*)",
+			"Bash(git commit:*)",
+			"Bash(git push:*)",
+			"Bash(npm run build:*)",
+			"Bash(grep:*)",
+			"Bash(npm run format.lessons:*)",
+			"Bash(xargs:*)",
+			"Bash(cat:*)",
+			"Bash(prettier --write:*)"
 		],
 		"deny": ["Read(./.env)", "Read(./.env.*)", "Read(./secrets/**)"]
 	},
--- a/.gitignore
+++ b/.gitignore
@@ -7,15 +7,4 @@ coverage
 .env.local

 # Claude Code local settings (user-specific)
-.claude/settings.local.json
-.claude_settings.json
-
-# Auto-Claude
-.auto-claude
-.worktrees
-
-# Wave ephemeral data
-.wave/workspaces
-.wave/traces
-.wave/artifacts
-.wave/output
+.claude/settings.local.json
--- a/lessons/01-box-model.json
+++ b/lessons/01-box-model.json
@@ -22,7 +22,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "padding", "expected": "1rem" },
-					"message": "Which property adds space between content and the element's edge?"
+					"message": "Set <kbd>padding: 1rem</kbd>"
 				}
 			]
 		},
@@ -43,7 +43,7 @@
 				{
 					"type": "regex",
 					"value": "border-left:\\s*4px\\s+solid\\s+steelblue",
-					"message": "Use the shorthand that sets a border on just one side",
+					"message": "Set <kbd>border-left: 4px solid steelblue</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -65,7 +65,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "margin-bottom", "expected": "1rem" },
-					"message": "Which property pushes neighboring elements away from the bottom?"
+					"message": "Set <kbd>margin-bottom: 1rem</kbd>"
 				}
 			]
 		},
@@ -86,7 +86,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "box-sizing", "expected": "border-box" },
-					"message": "Which sizing mode includes padding and border in the element's width?"
+					"message": "Set <kbd>box-sizing: border-box</kbd>"
 				}
 			]
 		},
@@ -107,7 +107,7 @@
 				{
 					"type": "regex",
 					"value": "padding:\\s*8px\\s+1rem",
-					"message": "Use the two-value shorthand: vertical first, then horizontal",
+					"message": "Set <kbd>padding: 8px 1rem</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -129,7 +129,7 @@
 				{
 					"type": "regex",
 					"value": "margin:\\s*0\\s+auto",
-					"message": "Use the shorthand that auto-calculates equal horizontal margins",
+					"message": "Set <kbd>margin: 0 auto</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -151,7 +151,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "border-radius", "expected": "50%" },
-					"message": "Which property rounds corners? Think about what percentage makes a circle"
+					"message": "Set <kbd>border-radius: 50%</kbd>"
 				}
 			]
 		},
@@ -172,18 +172,18 @@
 				{
 					"type": "property_value",
 					"value": { "property": "padding", "expected": "1rem" },
-					"message": "Add inner spacing to the notification"
+					"message": "Set <kbd>padding: 1rem</kbd>"
 				},
 				{
 					"type": "regex",
 					"value": "border-left:\\s*4px\\s+solid\\s+coral",
-					"message": "Add a colored accent on the left edge",
+					"message": "Set <kbd>border-left: 4px solid coral</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "border-radius", "expected": "4px" },
-					"message": "Soften the corners of the notification"
+					"message": "Set <kbd>border-radius: 4px</kbd>"
 				}
 			]
 		}
--- a/lessons/03-colors.json
+++ b/lessons/03-colors.json
@@ -22,7 +22,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "background-color", "expected": "seashell" },
-					"message": "Which property fills the area behind the content?"
+					"message": "Set <kbd>background-color: seashell</kbd>"
 				}
 			]
 		},
@@ -43,7 +43,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "color", "expected": "coral" },
-					"message": "Which property changes the text color?"
+					"message": "Set <kbd>color: coral</kbd>"
 				}
 			]
 		},
@@ -64,7 +64,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "border-color", "expected": "coral" },
-					"message": "Which property changes just the border's color without redefining the whole border?"
+					"message": "Set <kbd>border-color: coral</kbd>"
 				}
 			]
 		},
@@ -85,7 +85,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "background-color", "expected": "#ffd700" },
-					"message": "Use the same background property, but with a hex code this time"
+					"message": "Set <kbd>background-color: #ffd700</kbd>"
 				}
 			]
 		}
--- a/lessons/50-js-variables.json
+++ b/lessons/50-js-variables.json
@@ -0,0 +1,98 @@
+{
+	"$schema": "../schemas/code-crispies-module-schema.json",
+	"id": "js-variables",
+	"title": "JS Variables",
+	"description": "Learn to declare variables with let and const, work with strings and numbers, and use template literals to build dynamic text.",
+	"mode": "javascript",
+	"difficulty": "beginner",
+	"lessons": [
+		{
+			"id": "js-const",
+			"title": "Constants",
+			"description": "Use <kbd>const</kbd> to declare a variable that cannot be reassigned. Constants are great for values that stay the same throughout your program.",
+			"task": "Declare a constant named <kbd>name</kbd> with the value <kbd>\"Ada\"</kbd>",
+			"previewHTML": "<p id=\"out\">Waiting...</p>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; }",
+			"sandboxCSS": "",
+			"initialCode": "",
+			"solution": "const name = \"Ada\";",
+			"codePrefix": "",
+			"codeSuffix": "\ndocument.getElementById(\"out\").textContent = name;",
+			"previewContainer": "preview-area",
+			"validations": [
+				{
+					"type": "contains",
+					"value": "const",
+					"message": "Use <kbd>const</kbd> to declare the variable"
+				},
+				{
+					"type": "regex",
+					"value": "const\\s+name\\s*=",
+					"message": "Name your constant <kbd>name</kbd>"
+				},
+				{
+					"type": "regex",
+					"value": "[\"']Ada[\"']",
+					"message": "Set the value to <kbd>\"Ada\"</kbd>"
+				}
+			]
+		},
+		{
+			"id": "js-let",
+			"title": "Let Variables",
+			"description": "Use <kbd>let</kbd> to declare a variable that can be reassigned later. This is useful when you need to update a value.",
+			"task": "Declare a variable <kbd>score</kbd> with <kbd>let</kbd> and set it to <kbd>0</kbd>",
+			"previewHTML": "<p id=\"out\">Waiting...</p>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; }",
+			"sandboxCSS": "",
+			"initialCode": "",
+			"solution": "let score = 0;",
+			"codePrefix": "",
+			"codeSuffix": "\ndocument.getElementById(\"out\").textContent = \"Score: \" + score;",
+			"previewContainer": "preview-area",
+			"validations": [
+				{
+					"type": "contains",
+					"value": "let",
+					"message": "Use <kbd>let</kbd> to declare the variable"
+				},
+				{
+					"type": "regex",
+					"value": "let\\s+score\\s*=\\s*0",
+					"message": "Set <kbd>score</kbd> to <kbd>0</kbd>"
+				}
+			]
+		},
+		{
+			"id": "js-template",
+			"title": "Template Literals",
+			"description": "Template literals use backticks <kbd>`</kbd> and <kbd>${}</kbd> to embed expressions inside strings. They make building dynamic text much easier than string concatenation.",
+			"task": "Create a <kbd>const msg</kbd> using a template literal: <kbd>`Hi, ${name}!`</kbd>",
+			"previewHTML": "<p id=\"out\">Waiting...</p>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; }",
+			"sandboxCSS": "",
+			"initialCode": "",
+			"solution": "const msg = `Hi, ${name}!`;",
+			"codePrefix": "const name = \"Ada\";\n",
+			"codeSuffix": "\ndocument.getElementById(\"out\").textContent = msg;",
+			"previewContainer": "preview-area",
+			"validations": [
+				{
+					"type": "contains",
+					"value": "${",
+					"message": "Use <kbd>${}</kbd> to embed the variable inside the template"
+				},
+				{
+					"type": "regex",
+					"value": "`[^`]*\\$\\{\\s*name\\s*\\}[^`]*`",
+					"message": "Embed <kbd>name</kbd> inside a template literal with backticks"
+				},
+				{
+					"type": "regex",
+					"value": "const\\s+msg\\s*=",
+					"message": "Assign the result to a constant named <kbd>msg</kbd>"
+				}
+			]
+		}
+	]
+}
--- a/lessons/51-js-dom.json
+++ b/lessons/51-js-dom.json
@@ -0,0 +1,93 @@
+{
+	"$schema": "../schemas/code-crispies-module-schema.json",
+	"id": "js-dom",
+	"title": "JS DOM",
+	"description": "Learn to select HTML elements with querySelector, change their text content, and modify their styles using JavaScript.",
+	"mode": "javascript",
+	"difficulty": "beginner",
+	"lessons": [
+		{
+			"id": "js-query",
+			"title": "Select an Element",
+			"description": "Use <kbd>document.querySelector()</kbd> to find an element by its CSS selector. It returns the first matching element.",
+			"task": "Select the element with id <kbd>box</kbd> and store it in a <kbd>const el</kbd>",
+			"previewHTML": "<div id=\"box\" style=\"width:80px;height:80px;background:coral;border-radius:8px;\"></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; }",
+			"sandboxCSS": "",
+			"initialCode": "",
+			"solution": "const el = document.querySelector(\"#box\");",
+			"codePrefix": "",
+			"codeSuffix": "\nif (el) el.textContent = \"Found!\";",
+			"previewContainer": "preview-area",
+			"validations": [
+				{
+					"type": "contains",
+					"value": "querySelector",
+					"message": "Use <kbd>document.querySelector()</kbd> to select the element"
+				},
+				{
+					"type": "regex",
+					"value": "querySelector\\s*\\([\"']#box[\"']\\)",
+					"message": "Pass <kbd>\"#box\"</kbd> as the selector"
+				},
+				{
+					"type": "regex",
+					"value": "const\\s+el\\s*=",
+					"message": "Store the result in a constant named <kbd>el</kbd>"
+				}
+			]
+		},
+		{
+			"id": "js-text",
+			"title": "Change Text",
+			"description": "The <kbd>textContent</kbd> property lets you read or change the text inside an element. Setting it replaces all the element's text.",
+			"task": "Set the <kbd>textContent</kbd> of <kbd>el</kbd> to <kbd>\"Hello!\"</kbd>",
+			"previewHTML": "<p id=\"msg\">Old text</p>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; }",
+			"sandboxCSS": "",
+			"initialCode": "",
+			"solution": "el.textContent = \"Hello!\";",
+			"codePrefix": "const el = document.querySelector(\"#msg\");\n",
+			"codeSuffix": "",
+			"previewContainer": "preview-area",
+			"validations": [
+				{
+					"type": "contains",
+					"value": "textContent",
+					"message": "Use the <kbd>textContent</kbd> property"
+				},
+				{
+					"type": "regex",
+					"value": "el\\.textContent\\s*=\\s*[\"']Hello![\"']",
+					"message": "Set <kbd>el.textContent</kbd> to <kbd>\"Hello!\"</kbd>"
+				}
+			]
+		},
+		{
+			"id": "js-style",
+			"title": "Change Style",
+			"description": "Access an element's inline styles through the <kbd>style</kbd> property. CSS properties use camelCase in JavaScript, so <kbd>background-color</kbd> becomes <kbd>backgroundColor</kbd>.",
+			"task": "Set <kbd>el.style.backgroundColor</kbd> to <kbd>\"gold\"</kbd>",
+			"previewHTML": "<div id=\"box\" style=\"width:80px;height:80px;background:coral;border-radius:8px;\"></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; }",
+			"sandboxCSS": "",
+			"initialCode": "",
+			"solution": "el.style.backgroundColor = \"gold\";",
+			"codePrefix": "const el = document.querySelector(\"#box\");\n",
+			"codeSuffix": "",
+			"previewContainer": "preview-area",
+			"validations": [
+				{
+					"type": "contains",
+					"value": "style.backgroundColor",
+					"message": "Use <kbd>el.style.backgroundColor</kbd>"
+				},
+				{
+					"type": "regex",
+					"value": "\\.style\\.backgroundColor\\s*=\\s*[\"']gold[\"']",
+					"message": "Set the background color to <kbd>\"gold\"</kbd>"
+				}
+			]
+		}
+	]
+}
--- a/lessons/52-js-events.json
+++ b/lessons/52-js-events.json
@@ -0,0 +1,103 @@
+{
+	"$schema": "../schemas/code-crispies-module-schema.json",
+	"id": "js-events",
+	"title": "JS Events",
+	"description": "Learn to respond to user actions by adding event listeners for clicks, toggling classes, and updating the page dynamically.",
+	"mode": "javascript",
+	"difficulty": "beginner",
+	"lessons": [
+		{
+			"id": "js-click",
+			"title": "Click Handler",
+			"description": "Use <kbd>addEventListener(\"click\", ...)</kbd> to run code when an element is clicked. The first argument is the event type and the second is a callback function.",
+			"task": "Add a <kbd>click</kbd> event listener to <kbd>btn</kbd> that sets <kbd>out.textContent</kbd> to <kbd>\"Clicked!\"</kbd>",
+			"previewHTML": "<button id=\"btn\" style=\"padding:8px 16px;font-size:1rem;\">Click me</button>\n<p id=\"out\">Waiting...</p>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; }",
+			"sandboxCSS": "",
+			"initialCode": "",
+			"solution": "btn.addEventListener(\"click\", () => {\n  out.textContent = \"Clicked!\";\n});",
+			"codePrefix": "const btn = document.querySelector(\"#btn\");\nconst out = document.querySelector(\"#out\");\n",
+			"codeSuffix": "",
+			"previewContainer": "preview-area",
+			"validations": [
+				{
+					"type": "contains",
+					"value": "addEventListener",
+					"message": "Use <kbd>addEventListener</kbd> to listen for events"
+				},
+				{
+					"type": "regex",
+					"value": "addEventListener\\s*\\(\\s*[\"']click[\"']",
+					"message": "Listen for the <kbd>\"click\"</kbd> event"
+				},
+				{
+					"type": "regex",
+					"value": "textContent\\s*=\\s*[\"']Clicked![\"']",
+					"message": "Set <kbd>out.textContent</kbd> to <kbd>\"Clicked!\"</kbd> inside the handler"
+				}
+			]
+		},
+		{
+			"id": "js-toggle",
+			"title": "Toggle a Class",
+			"description": "Use <kbd>classList.toggle()</kbd> to add a class if it's missing or remove it if it's present. This is perfect for on/off states like toggling dark mode or active states.",
+			"task": "Inside the click handler, call <kbd>box.classList.toggle(\"on\")</kbd>",
+			"previewHTML": "<div id=\"box\" style=\"width:80px;height:80px;background:coral;border-radius:8px;transition:background 0.3s;\"></div>\n<style>.on { background: mediumseagreen !important; }</style>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; }",
+			"sandboxCSS": "",
+			"initialCode": "",
+			"solution": "box.addEventListener(\"click\", () => {\n  box.classList.toggle(\"on\");\n});",
+			"codePrefix": "const box = document.querySelector(\"#box\");\n",
+			"codeSuffix": "",
+			"previewContainer": "preview-area",
+			"validations": [
+				{
+					"type": "contains",
+					"value": "classList.toggle",
+					"message": "Use <kbd>classList.toggle()</kbd> to toggle the class"
+				},
+				{
+					"type": "regex",
+					"value": "classList\\.toggle\\s*\\(\\s*[\"']on[\"']\\s*\\)",
+					"message": "Toggle the class <kbd>\"on\"</kbd>"
+				},
+				{
+					"type": "contains",
+					"value": "addEventListener",
+					"message": "Use <kbd>addEventListener</kbd> to listen for clicks"
+				}
+			]
+		},
+		{
+			"id": "js-counter",
+			"title": "Simple Counter",
+			"description": "Combine variables and event listeners to build interactive features. Use <kbd>let</kbd> for a value that changes, and update the display each time the button is clicked.",
+			"task": "In the click handler, increment <kbd>count</kbd> by 1 and set <kbd>out.textContent</kbd> to <kbd>count</kbd>",
+			"previewHTML": "<button id=\"btn\" style=\"padding:8px 16px;font-size:1rem;\">Add 1</button>\n<p id=\"out\">0</p>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; }",
+			"sandboxCSS": "",
+			"initialCode": "",
+			"solution": "btn.addEventListener(\"click\", () => {\n  count++;\n  out.textContent = count;\n});",
+			"codePrefix": "const btn = document.querySelector(\"#btn\");\nconst out = document.querySelector(\"#out\");\nlet count = 0;\n",
+			"codeSuffix": "",
+			"previewContainer": "preview-area",
+			"validations": [
+				{
+					"type": "contains",
+					"value": "addEventListener",
+					"message": "Use <kbd>addEventListener</kbd> to listen for clicks"
+				},
+				{
+					"type": "regex",
+					"value": "count\\s*\\+\\+|count\\s*\\+=\\s*1|count\\s*=\\s*count\\s*\\+\\s*1",
+					"message": "Increment <kbd>count</kbd> by 1 (use <kbd>count++</kbd>)"
+				},
+				{
+					"type": "regex",
+					"value": "out\\.textContent\\s*=\\s*count",
+					"message": "Update the display with <kbd>out.textContent = count</kbd>"
+				}
+			]
+		}
+	]
+}
--- a/lessons/ar/01-box-model.json
+++ b/lessons/ar/01-box-model.json
@@ -22,7 +22,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "padding", "expected": "1rem" },
-					"message": "أي خاصية تضيف مساحة بين المحتوى وحافة العنصر؟"
+					"message": "اضبط <kbd>padding: 1rem</kbd>"
 				}
 			]
 		},
@@ -43,7 +43,7 @@
 				{
 					"type": "regex",
 					"value": "border-left:\\s*4px\\s+solid\\s+steelblue",
-					"message": "استخدم الاختصار الذي يحدد حداً على جانب واحد فقط",
+					"message": "اضبط <kbd>border-left: 4px solid steelblue</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -65,7 +65,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "margin-bottom", "expected": "1rem" },
-					"message": "أي خاصية تدفع العناصر المجاورة بعيداً من الأسفل؟"
+					"message": "اضبط <kbd>margin-bottom: 1rem</kbd>"
 				}
 			]
 		},
@@ -86,7 +86,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "box-sizing", "expected": "border-box" },
-					"message": "أي وضع تحجيم يشمل padding والحدود في عرض العنصر؟"
+					"message": "اضبط <kbd>box-sizing: border-box</kbd>"
 				}
 			]
 		},
@@ -107,7 +107,7 @@
 				{
 					"type": "regex",
 					"value": "padding:\\s*8px\\s+1rem",
-					"message": "استخدم اختصار القيمتين: العمودي أولاً، ثم الأفقي",
+					"message": "اضبط <kbd>padding: 8px 1rem</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -129,7 +129,7 @@
 				{
 					"type": "regex",
 					"value": "margin:\\s*0\\s+auto",
-					"message": "استخدم الاختصار الذي يحسب هوامش أفقية متساوية تلقائياً",
+					"message": "اضبط <kbd>margin: 0 auto</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -151,7 +151,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "border-radius", "expected": "50%" },
-					"message": "أي خاصية تدوّر الزوايا؟ فكر في النسبة المئوية التي تصنع دائرة"
+					"message": "اضبط <kbd>border-radius: 50%</kbd>"
 				}
 			]
 		},
@@ -172,18 +172,18 @@
 				{
 					"type": "property_value",
 					"value": { "property": "padding", "expected": "1rem" },
-					"message": "أضف مساحة داخلية للإشعار"
+					"message": "اضبط <kbd>padding: 1rem</kbd>"
 				},
 				{
 					"type": "regex",
 					"value": "border-left:\\s*4px\\s+solid\\s+coral",
-					"message": "أضف لمسة ملونة على الحافة اليسرى",
+					"message": "اضبط <kbd>border-left: 4px solid coral</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "border-radius", "expected": "4px" },
-					"message": "نعّم زوايا الإشعار"
+					"message": "اضبط <kbd>border-radius: 4px</kbd>"
 				}
 			]
 		}
--- a/lessons/de/01-box-model.json
+++ b/lessons/de/01-box-model.json
@@ -22,7 +22,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "padding", "expected": "1rem" },
-					"message": "Welche Eigenschaft fügt Abstand zwischen Inhalt und Elementrand hinzu?"
+					"message": "Setze <kbd>padding: 1rem</kbd>"
 				}
 			]
 		},
@@ -43,7 +43,7 @@
 				{
 					"type": "regex",
 					"value": "border-left:\\s*4px\\s+solid\\s+steelblue",
-					"message": "Verwende die Kurzschreibweise, die einen Rahmen auf nur einer Seite setzt",
+					"message": "Setze <kbd>border-left: 4px solid steelblue</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -65,7 +65,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "margin-bottom", "expected": "1rem" },
-					"message": "Welche Eigenschaft schiebt benachbarte Elemente nach unten weg?"
+					"message": "Setze <kbd>margin-bottom: 1rem</kbd>"
 				}
 			]
 		},
@@ -86,7 +86,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "box-sizing", "expected": "border-box" },
-					"message": "Welcher Größenmodus bezieht Padding und Rahmen in die Breite des Elements ein?"
+					"message": "Setze <kbd>box-sizing: border-box</kbd>"
 				}
 			]
 		},
@@ -107,7 +107,7 @@
 				{
 					"type": "regex",
 					"value": "padding:\\s*8px\\s+1rem",
-					"message": "Verwende die Zwei-Werte-Kurzschreibweise: vertikal zuerst, dann horizontal",
+					"message": "Setze <kbd>padding: 8px 1rem</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -129,7 +129,7 @@
 				{
 					"type": "regex",
 					"value": "margin:\\s*0\\s+auto",
-					"message": "Verwende die Kurzschreibweise, die gleiche horizontale Abstände automatisch berechnet",
+					"message": "Setze <kbd>margin: 0 auto</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -151,7 +151,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "border-radius", "expected": "50%" },
-					"message": "Welche Eigenschaft rundet Ecken? Denke daran, welcher Prozentwert einen Kreis ergibt"
+					"message": "Setze <kbd>border-radius: 50%</kbd>"
 				}
 			]
 		},
@@ -172,18 +172,18 @@
 				{
 					"type": "property_value",
 					"value": { "property": "padding", "expected": "1rem" },
-					"message": "Füge inneren Abstand zur Benachrichtigung hinzu"
+					"message": "Setze <kbd>padding: 1rem</kbd>"
 				},
 				{
 					"type": "regex",
 					"value": "border-left:\\s*4px\\s+solid\\s+coral",
-					"message": "Füge einen farbigen Akzent an der linken Kante hinzu",
+					"message": "Setze <kbd>border-left: 4px solid coral</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "border-radius", "expected": "4px" },
-					"message": "Runde die Ecken der Benachrichtigung ab"
+					"message": "Setze <kbd>border-radius: 4px</kbd>"
 				}
 			]
 		}
--- a/lessons/es/01-box-model.json
+++ b/lessons/es/01-box-model.json
@@ -22,7 +22,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "padding", "expected": "1rem" },
-					"message": "¿Qué propiedad añade espacio entre el contenido y el borde del elemento?"
+					"message": "Establece <kbd>padding: 1rem</kbd>"
 				}
 			]
 		},
@@ -43,7 +43,7 @@
 				{
 					"type": "regex",
 					"value": "border-left:\\s*4px\\s+solid\\s+steelblue",
-					"message": "Usa el atajo que define un borde en un solo lado",
+					"message": "Establece <kbd>border-left: 4px solid steelblue</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -65,7 +65,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "margin-bottom", "expected": "1rem" },
-					"message": "¿Qué propiedad empuja los elementos vecinos hacia abajo?"
+					"message": "Establece <kbd>margin-bottom: 1rem</kbd>"
 				}
 			]
 		},
@@ -86,7 +86,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "box-sizing", "expected": "border-box" },
-					"message": "¿Qué modo de tamaño incluye padding y borde en el ancho del elemento?"
+					"message": "Establece <kbd>box-sizing: border-box</kbd>"
 				}
 			]
 		},
@@ -107,7 +107,7 @@
 				{
 					"type": "regex",
 					"value": "padding:\\s*8px\\s+1rem",
-					"message": "Usa el atajo de dos valores: vertical primero, luego horizontal",
+					"message": "Establece <kbd>padding: 8px 1rem</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -129,7 +129,7 @@
 				{
 					"type": "regex",
 					"value": "margin:\\s*0\\s+auto",
-					"message": "Usa el atajo que calcula márgenes horizontales iguales automáticamente",
+					"message": "Establece <kbd>margin: 0 auto</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -151,7 +151,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "border-radius", "expected": "50%" },
-					"message": "¿Qué propiedad redondea las esquinas? Piensa en qué porcentaje crea un círculo"
+					"message": "Establece <kbd>border-radius: 50%</kbd>"
 				}
 			]
 		},
@@ -172,18 +172,18 @@
 				{
 					"type": "property_value",
 					"value": { "property": "padding", "expected": "1rem" },
-					"message": "Añade espacio interior a la notificación"
+					"message": "Establece <kbd>padding: 1rem</kbd>"
 				},
 				{
 					"type": "regex",
 					"value": "border-left:\\s*4px\\s+solid\\s+coral",
-					"message": "Añade un acento de color en el borde izquierdo",
+					"message": "Establece <kbd>border-left: 4px solid coral</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "border-radius", "expected": "4px" },
-					"message": "Suaviza las esquinas de la notificación"
+					"message": "Establece <kbd>border-radius: 4px</kbd>"
 				}
 			]
 		}
--- a/lessons/flexbox.json
+++ b/lessons/flexbox.json
@@ -9,7 +9,7 @@
 			"id": "flexbox-1",
 			"title": "Container",
 			"description": "Before flexbox, creating even simple layouts required floats, positioning hacks, or table-based layouts. Flexbox (Flexible Box Layout) revolutionized CSS by providing a one-dimensional layout system designed specifically for distributing space and aligning content.<br><br><strong>How it works:</strong> When you set <kbd>display: flex</kbd> on an element, it becomes a <em>flex container</em>. Its direct children automatically become <em>flex items</em> that flow along a main axis (horizontal by default). This single property transforms stacked block elements into a horizontal row.<br><br><strong>The two axes:</strong><br>• <em>Main axis</em> – The primary direction items flow (row = left→right)<br>• <em>Cross axis</em> – Perpendicular to main (row = top→bottom)<br><br><pre>.nav {\n  display: flex;\n}</pre>",
-			"task": "The navigation links are stacking vertically. Make them display side by side in a horizontal row.",
+			"task": "This navigation menu stacks vertically. Add <kbd>display: flex</kbd> to <kbd>.nav</kbd> to arrange the links horizontally.",
 			"previewHTML": "<nav class=\"nav\"><a href=\"#\">Home</a><a href=\"#\">Products</a><a href=\"#\">About</a><a href=\"#\">Contact</a></nav>",
 			"previewBaseCSS": "body { font-family: system-ui, sans-serif; margin: 0; } .nav { background: #1a1a2e; padding: 1rem; } .nav a { color: white; text-decoration: none; padding: 8px 1rem; border-radius: 4px; } .nav a:hover { background: rgba(255,255,255,0.1); }",
 			"sandboxCSS": "",
@@ -22,7 +22,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "display", "expected": "flex" },
-					"message": "Try changing the display mode to create a flex container"
+					"message": "Set <kbd>display: flex</kbd>"
 				}
 			]
 		},
@@ -30,7 +30,7 @@
 			"id": "flexbox-2",
 			"title": "Gap",
 			"description": "The <kbd>gap</kbd> property adds consistent spacing between flex items without needing margins. It only creates space between items, not around the edges.",
-			"task": "The navigation links are crammed together with no breathing room. Add 1rem of spacing between them.",
+			"task": "Add <kbd>gap: 1rem</kbd> to space out the navigation links evenly.",
 			"previewHTML": "<nav class=\"nav\"><a href=\"#\">Home</a><a href=\"#\">Products</a><a href=\"#\">About</a><a href=\"#\">Contact</a></nav>",
 			"previewBaseCSS": "body { font-family: system-ui, sans-serif; margin: 0; } .nav { background: #1a1a2e; padding: 1rem; display: flex; } .nav a { color: white; text-decoration: none; padding: 8px 1rem; border-radius: 4px; background: rgba(255,255,255,0.1); }",
 			"sandboxCSS": "",
@@ -43,7 +43,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "gap", "expected": "1rem" },
-					"message": "Use the property that adds spacing between flex items"
+					"message": "Set <kbd>gap: 1rem</kbd>"
 				}
 			]
 		},
@@ -51,7 +51,7 @@
 			"id": "flexbox-3",
 			"title": "Justify Content",
 			"description": "<kbd>justify-content</kbd> distributes items along the main axis. Common values:<br>• <kbd>flex-start</kbd> – pack items at the start<br>• <kbd>flex-end</kbd> – pack at the end<br>• <kbd>center</kbd> – center items<br>• <kbd>space-between</kbd> – equal space between items<br>• <kbd>space-around</kbd> – equal space around items",
-			"task": "The Login button should sit on the far right, with the other links staying on the left. Distribute the space between them.",
+			"task": "Push the \"Login\" button to the right by setting <kbd>justify-content: space-between</kbd> on the nav.",
 			"previewHTML": "<nav class=\"nav\"><div class=\"links\"><a href=\"#\">Home</a><a href=\"#\">Products</a><a href=\"#\">About</a></div><a href=\"#\" class=\"login\">Login</a></nav>",
 			"previewBaseCSS": "body { font-family: system-ui, sans-serif; margin: 0; } .nav { background: #1a1a2e; padding: 1rem; display: flex; } .links { display: flex; gap: 8px; } .nav a { color: white; text-decoration: none; padding: 8px 1rem; border-radius: 4px; } .nav a:hover { background: rgba(255,255,255,0.1); } .login { background: steelblue; }",
 			"sandboxCSS": "",
@@ -64,7 +64,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "justify-content", "expected": "space-between" },
-					"message": "Use the property that distributes items along the main axis"
+					"message": "Set <kbd>justify-content: space-between</kbd>"
 				}
 			]
 		},
@@ -72,7 +72,7 @@
 			"id": "flexbox-4",
 			"title": "Align Items",
 			"description": "<kbd>align-items</kbd> controls alignment on the cross axis (vertical when flex-direction is row). Values include:<br>• <kbd>stretch</kbd> – stretch to fill (default)<br>• <kbd>flex-start</kbd> – align to top<br>• <kbd>flex-end</kbd> – align to bottom<br>• <kbd>center</kbd> – center vertically",
-			"task": "The logo and nav links sit at different heights. Center them vertically so they line up.",
+			"task": "The logo and nav links have different heights. Center them vertically with <kbd>align-items: center</kbd>.",
 			"previewHTML": "<header class=\"header\"><div class=\"logo\">ACME</div><nav><a href=\"#\">Products</a><a href=\"#\">Pricing</a><a href=\"#\">Docs</a></nav></header>",
 			"previewBaseCSS": "body { font-family: system-ui, sans-serif; margin: 0; } .header { background: white; padding: 1rem 2rem; display: flex; justify-content: space-between; border-bottom: 1px solid #eee; } .logo { font-size: 1.5rem; font-weight: bold; color: steelblue; } nav { display: flex; gap: 1rem; } nav a { color: #333; text-decoration: none; font-size: 0.9rem; }",
 			"sandboxCSS": "",
@@ -85,7 +85,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "align-items", "expected": "center" },
-					"message": "Use the property that controls cross-axis alignment"
+					"message": "Set <kbd>align-items: center</kbd>"
 				}
 			]
 		},
@@ -93,7 +93,7 @@
 			"id": "flexbox-5",
 			"title": "Flex Wrap",
 			"description": "By default, flex items squeeze onto one line. <kbd>flex-wrap: wrap</kbd> allows items to flow onto multiple lines when they run out of space.",
-			"task": "The cards overflow the container instead of fitting within it. Allow the items to flow onto new rows when they run out of space.",
+			"task": "These cards overflow the container. Add <kbd>flex-wrap: wrap</kbd> to allow them to wrap to new rows.",
 			"previewHTML": "<div class=\"cards\"><article class=\"card\">Card 1</article><article class=\"card\">Card 2</article><article class=\"card\">Card 3</article><article class=\"card\">Card 4</article><article class=\"card\">Card 5</article><article class=\"card\">Card 6</article></div>",
 			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .cards { display: flex; gap: 1rem; } .card { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); min-width: 120px; text-align: center; }",
 			"sandboxCSS": "",
@@ -106,7 +106,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "flex-wrap", "expected": "wrap" },
-					"message": "Use the property that allows flex items to wrap onto new lines"
+					"message": "Set <kbd>flex-wrap: wrap</kbd>"
 				}
 			]
 		},
@@ -114,7 +114,7 @@
 			"id": "flexbox-6",
 			"title": "Flex Grow",
 			"description": "The <kbd>flex</kbd> property on items controls how they grow and shrink. <kbd>flex: 1</kbd> makes an item grow to fill available space. Multiple items with <kbd>flex: 1</kbd> share space equally.",
-			"task": "The search input is too narrow. Make it stretch to fill all the remaining space in the toolbar.",
+			"task": "Make the search input expand to fill available space by setting <kbd>flex: 1</kbd> on <kbd>.search</kbd>.",
 			"previewHTML": "<div class=\"toolbar\"><input class=\"search\" type=\"text\" placeholder=\"Search...\"><button class=\"btn\">Search</button><button class=\"btn\">Filters</button></div>",
 			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .toolbar { display: flex; gap: 8px; padding: 1rem; background: #f5f5f5; border-radius: 8px; } .search { padding: 8px 1rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem; } .btn { padding: 8px 1rem; background: steelblue; color: white; border: none; border-radius: 4px; cursor: pointer; }",
 			"sandboxCSS": "",
@@ -125,9 +125,9 @@
 			"previewContainer": "preview-area",
 			"validations": [
 				{
-					"type": "regex",
-					"value": "(flex\\s*:\\s*1|flex-grow\\s*:\\s*1)",
-					"message": "Use the property that makes a flex item grow to fill available space"
+					"type": "property_value",
+					"value": { "property": "flex", "expected": "1" },
+					"message": "Set <kbd>flex: 1</kbd>"
 				}
 			]
 		}
--- a/lessons/pl/01-box-model.json
+++ b/lessons/pl/01-box-model.json
@@ -22,7 +22,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "padding", "expected": "1rem" },
-					"message": "Która właściwość dodaje przestrzeń między treścią a krawędzią elementu?"
+					"message": "Ustaw <kbd>padding: 1rem</kbd>"
 				}
 			]
 		},
@@ -43,7 +43,7 @@
 				{
 					"type": "regex",
 					"value": "border-left:\\s*4px\\s+solid\\s+steelblue",
-					"message": "Użyj skrótu, który ustawia ramkę tylko po jednej stronie",
+					"message": "Ustaw <kbd>border-left: 4px solid steelblue</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -65,7 +65,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "margin-bottom", "expected": "1rem" },
-					"message": "Która właściwość odpycha sąsiednie elementy w dół?"
+					"message": "Ustaw <kbd>margin-bottom: 1rem</kbd>"
 				}
 			]
 		},
@@ -86,7 +86,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "box-sizing", "expected": "border-box" },
-					"message": "Który tryb rozmiaru uwzględnia padding i ramkę w szerokości elementu?"
+					"message": "Ustaw <kbd>box-sizing: border-box</kbd>"
 				}
 			]
 		},
@@ -107,7 +107,7 @@
 				{
 					"type": "regex",
 					"value": "padding:\\s*8px\\s+1rem",
-					"message": "Użyj skrótu dwuwartościowego: najpierw pionowo, potem poziomo",
+					"message": "Ustaw <kbd>padding: 8px 1rem</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -129,7 +129,7 @@
 				{
 					"type": "regex",
 					"value": "margin:\\s*0\\s+auto",
-					"message": "Użyj skrótu, który automatycznie oblicza równe marginesy poziome",
+					"message": "Ustaw <kbd>margin: 0 auto</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -151,7 +151,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "border-radius", "expected": "50%" },
-					"message": "Która właściwość zaokrągla rogi? Pomyśl, jaki procent tworzy koło"
+					"message": "Ustaw <kbd>border-radius: 50%</kbd>"
 				}
 			]
 		},
@@ -172,18 +172,18 @@
 				{
 					"type": "property_value",
 					"value": { "property": "padding", "expected": "1rem" },
-					"message": "Dodaj wewnętrzny odstęp do powiadomienia"
+					"message": "Ustaw <kbd>padding: 1rem</kbd>"
 				},
 				{
 					"type": "regex",
 					"value": "border-left:\\s*4px\\s+solid\\s+coral",
-					"message": "Dodaj kolorowy akcent na lewej krawędzi",
+					"message": "Ustaw <kbd>border-left: 4px solid coral</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "border-radius", "expected": "4px" },
-					"message": "Wygładź rogi powiadomienia"
+					"message": "Ustaw <kbd>border-radius: 4px</kbd>"
 				}
 			]
 		}
--- a/lessons/uk/01-box-model.json
+++ b/lessons/uk/01-box-model.json
@@ -22,7 +22,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "padding", "expected": "1rem" },
-					"message": "Яка властивість додає простір між контентом і краєм елемента?"
+					"message": "Встановіть <kbd>padding: 1rem</kbd>"
 				}
 			]
 		},
@@ -43,7 +43,7 @@
 				{
 					"type": "regex",
 					"value": "border-left:\\s*4px\\s+solid\\s+steelblue",
-					"message": "Використайте скорочення, яке встановлює межу лише з одного боку",
+					"message": "Встановіть <kbd>border-left: 4px solid steelblue</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -65,7 +65,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "margin-bottom", "expected": "1rem" },
-					"message": "Яка властивість відштовхує сусідні елементи знизу?"
+					"message": "Встановіть <kbd>margin-bottom: 1rem</kbd>"
 				}
 			]
 		},
@@ -86,7 +86,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "box-sizing", "expected": "border-box" },
-					"message": "Який режим розміру включає padding і межу в ширину елемента?"
+					"message": "Встановіть <kbd>box-sizing: border-box</kbd>"
 				}
 			]
 		},
@@ -107,7 +107,7 @@
 				{
 					"type": "regex",
 					"value": "padding:\\s*8px\\s+1rem",
-					"message": "Використайте скорочення з двома значеннями: спочатку вертикальне, потім горизонтальне",
+					"message": "Встановіть <kbd>padding: 8px 1rem</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -129,7 +129,7 @@
 				{
 					"type": "regex",
 					"value": "margin:\\s*0\\s+auto",
-					"message": "Використайте скорочення, яке автоматично розраховує рівні горизонтальні поля",
+					"message": "Встановіть <kbd>margin: 0 auto</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -151,7 +151,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "border-radius", "expected": "50%" },
-					"message": "Яка властивість заокруглює кути? Подумайте, який відсоток створює коло"
+					"message": "Встановіть <kbd>border-radius: 50%</kbd>"
 				}
 			]
 		},
@@ -172,18 +172,18 @@
 				{
 					"type": "property_value",
 					"value": { "property": "padding", "expected": "1rem" },
-					"message": "Додайте внутрішній відступ до сповіщення"
+					"message": "Встановіть <kbd>padding: 1rem</kbd>"
 				},
 				{
 					"type": "regex",
 					"value": "border-left:\\s*4px\\s+solid\\s+coral",
-					"message": "Додайте кольоровий акцент на лівому краю",
+					"message": "Встановіть <kbd>border-left: 4px solid coral</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "border-radius", "expected": "4px" },
-					"message": "Згладьте кути сповіщення"
+					"message": "Встановіть <kbd>border-radius: 4px</kbd>"
 				}
 			]
 		}
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
 				"@codemirror/commands": "^6.10.1",
 				"@codemirror/lang-css": "^6.3.1",
 				"@codemirror/lang-html": "^6.4.11",
+				"@codemirror/lang-javascript": "^6.2.5",
 				"@codemirror/lang-markdown": "^6.5.0",
 				"@codemirror/state": "^6.5.2",
 				"@codemirror/theme-one-dark": "^6.1.3",
@@ -208,9 +209,9 @@
 			}
 		},
 		"node_modules/@codemirror/lang-javascript": {
-			"version": "6.2.4",
-			"resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.4.tgz",
-			"integrity": "sha512-0WVmhp1QOqZ4Rt6GlVGwKJN3KW7Xh4H2q8ZZNGZaP6lRdxXJzmjm4FqvmOojVj6khWJHIb9sp7U/72W7xQgqAA==",
+			"version": "6.2.5",
+			"resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.5.tgz",
+			"integrity": "sha512-zD4e5mS+50htS7F+TYjBPsiIFGanfVqg4HyUz6WNFikgOPf2BgKlx+TQedI1w6n/IqRBVBbBWmGFdLB/7uxO4A==",
 			"license": "MIT",
 			"dependencies": {
 				"@codemirror/autocomplete": "^6.0.0",
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
 		"@codemirror/commands": "^6.10.1",
 		"@codemirror/lang-css": "^6.3.1",
 		"@codemirror/lang-html": "^6.4.11",
+		"@codemirror/lang-javascript": "^6.2.5",
 		"@codemirror/lang-markdown": "^6.5.0",
 		"@codemirror/state": "^6.5.2",
 		"@codemirror/theme-one-dark": "^6.1.3",
--- a/schemas/code-crispies-module-schema.json
+++ b/schemas/code-crispies-module-schema.json
@@ -19,8 +19,8 @@
 		},
 		"mode": {
 			"type": "string",
-			"enum": ["css", "tailwind", "html", "markdown"],
-			"description": "Whether this module teaches CSS, Tailwind, HTML, or Markdown"
+			"enum": ["css", "tailwind", "html", "markdown", "javascript"],
+			"description": "Whether this module teaches CSS, Tailwind, HTML, Markdown, or JavaScript"
 		},
 		"difficulty": {
 			"type": "string",
@@ -60,7 +60,7 @@
 					},
 					"mode": {
 						"type": "string",
-						"enum": ["css", "tailwind", "html", "markdown"],
+						"enum": ["css", "tailwind", "html", "markdown", "javascript"],
 						"description": "Override module mode for individual lessons"
 					},
 					"tailwindConfig": {
--- a/specs/003-flexbox-task-wording/plan.md
+++ b/specs/003-flexbox-task-wording/plan.md
@@ -1,76 +0,0 @@
-# Implementation Plan
-
-## Objective
-
-Rewrite all 6 flexbox lesson task descriptions to describe the desired visual outcome instead of giving the exact CSS declaration. Update validation messages to hint without revealing answers, and accept alternative valid solutions where applicable.
-
-## Approach
-
-This is a content-only change to a single JSON file (`lessons/flexbox.json`). Each lesson needs three edits:
-
-1. **Task text**: Replace copy-pasteable CSS declarations with outcome-oriented descriptions
-2. **Validation messages**: Replace answer-revealing messages with pedagogical hints
-3. **Validations array**: Add alternative accepted solutions where multiple CSS approaches achieve the same visual result
-
-The lesson `description` fields (which teach concepts with code examples) remain unchanged — they are the learning material, not the exercise prompt.
-
-## File Mapping
-
-| File | Action | Description |
-|------|--------|-------------|
-| `lessons/flexbox.json` | modify | Rewrite `task` and validation `message` fields for all 6 lessons; add alternative validations for flexbox-6 |
-
-No new files need to be created. No validator code changes needed — the existing `property_value` and `regex` validation types already support everything required.
-
-## Detailed Changes Per Lesson
-
-### flexbox-1 (Container)
- **Task**: Describe that nav links stack vertically and should display side by side
- **Validation msg**: Hint at display property for flex layout
- **Alt solutions**: None — `display: flex` is the only correct answer (inline-flex changes block behavior)
-
-### flexbox-2 (Gap)
- **Task**: Describe that links are crammed together and need 1rem of spacing between them
- **Validation msg**: Hint at the gap property
- **Alt solutions**: None — `gap: 1rem` is the specific expected value
-
-### flexbox-3 (Justify Content)
- **Task**: Describe that Login button should be pushed to the far right, with nav links on the left
- **Validation msg**: Hint at main-axis distribution property
- **Alt solutions**: None — `justify-content: space-between` is the only property that works when targeting `.nav`
-
-### flexbox-4 (Align Items)
- **Task**: Describe the visual misalignment and ask for vertical centering
- **Validation msg**: Hint at cross-axis alignment property
- **Alt solutions**: None — `align-items: center` is the correct answer
-
-### flexbox-5 (Flex Wrap)
- **Task**: Describe cards overflowing and needing to flow onto new rows
- **Validation msg**: Hint at wrapping property
- **Alt solutions**: None — `flex-wrap: wrap` is the only answer
-
-### flexbox-6 (Flex Grow)
- **Task**: Describe that the search input should stretch to fill remaining space
- **Validation msg**: Hint at flex growth property
- **Alt solutions**: Accept both `flex: 1` and `flex-grow: 1` via regex validation
-
-## Architecture Decisions
-
-1. **No validator code changes**: The existing `regex` validation type can handle alternative solutions for flexbox-6. No need to add a new validation type.
-2. **Keep values in tasks where needed**: Some tasks mention target values like "1rem" since the validator checks exact values and students need to know the amount. The key change is removing the *property name* from the task.
-3. **Solution field unchanged**: The `solution` field is used for the "show solution" feature and should remain as the canonical answer.
-4. **codePrefix unchanged**: The existing codePrefix already shows the selector context (e.g., `.nav {`), which is enough guidance for students.
-
-## Risks
-
-| Risk | Likelihood | Mitigation |
-|------|-----------|------------|
-| Tasks become too vague for beginners | Low | Descriptions still teach the property; tasks describe specific visual outcomes |
-| Alternative regex validation too permissive | Low | Regex will be specific to `flex:\s*1` and `flex-grow:\s*1` patterns |
-| Validation messages too cryptic | Low | Messages will hint at the property category without giving the exact declaration |
-
-## Testing Strategy
-
-1. **Run existing test suite**: `npm run test` — all tests should pass since no code or module structure changes
-2. **Manual verification**: Validate that each rewritten task accurately describes the visual outcome shown in the preview
-3. **JSON schema validation**: Ensure `lessons/flexbox.json` still conforms to the module schema
--- a/specs/003-flexbox-task-wording/spec.md
+++ b/specs/003-flexbox-task-wording/spec.md
@@ -1,35 +0,0 @@
-# fix: remove answers from flexbox task descriptions (copy-paste score 95%)
-
-**Issue**: [libretech/code-crispies#3](https://git.librete.ch/libretech/code-crispies/issues/3)
-**State**: open
-**Author**: libretech
-**Labels**: none
-**Complexity**: simple
-
-## Issue Body
-
-Pedagogy audit: All 6 flexbox exercises give the exact CSS declaration in the task text. Students type without understanding. Rewrite tasks to describe the DESIRED OUTCOME instead of the exact code. Example: 'Add display: flex' → 'The navigation links stack vertically. Make them display side by side.' Accept multiple valid solutions in validations.
-
-## Current State
-
-All 6 lessons in `lessons/flexbox.json` have task descriptions that include the exact CSS declaration students need to type:
-
-| Lesson | Current Task (gives away answer) |
-|--------|----------------------------------|
-| flexbox-1 | "Add `display: flex` to `.nav`" |
-| flexbox-2 | "Add `gap: 1rem` to space out..." |
-| flexbox-3 | "setting `justify-content: space-between` on the nav" |
-| flexbox-4 | "Center them vertically with `align-items: center`" |
-| flexbox-5 | "Add `flex-wrap: wrap` to allow them to wrap" |
-| flexbox-6 | "setting `flex: 1` on `.search`" |
-
-Validation error messages also give away answers (e.g., "Set `display: flex`").
-
-## Acceptance Criteria
-
-1. All 6 flexbox task descriptions rewritten to describe the desired visual outcome, not the exact CSS code
-2. Students cannot copy-paste from the task into the editor to pass
-3. Validation error messages updated to provide hints without revealing the exact declaration
-4. Where applicable, validations accept multiple valid CSS solutions (e.g., `flex: 1` and `flex-grow: 1`)
-5. Existing tests continue to pass
-6. Lesson descriptions (which teach the concepts) remain unchanged
--- a/specs/003-flexbox-task-wording/tasks.md
+++ b/specs/003-flexbox-task-wording/tasks.md
@@ -1,13 +0,0 @@
-# Tasks
-
-## Phase 1: Core Content Changes
- [X] Task 1.1: Rewrite task text for all 6 flexbox lessons to describe visual outcomes [P]
- [X] Task 1.2: Rewrite validation error messages to hint without revealing answers [P]
-
-## Phase 2: Alternative Validations
- [X] Task 2.1: Add regex validation for flexbox-6 to accept both `flex: 1` and `flex-grow: 1`
-
-## Phase 3: Validation
- [X] Task 3.1: Run existing test suite to confirm no regressions
- [X] Task 3.2: Verify flexbox.json still conforms to module schema
- [X] Task 3.3: Run lesson format check (`npm run format.lessons`)
--- a/specs/004-validation-messages/plan.md
+++ b/specs/004-validation-messages/plan.md
@@ -1,77 +0,0 @@
-# Implementation Plan
-
-## Objective
-
-Rewrite validation error messages in the box-model and colors lesson modules (and their localizations) so they guide learners toward the answer instead of revealing it. This breaks the "fail-then-copy" loop identified in the pedagogy audit.
-
-## Approach
-
-1. Rewrite each validation `message` field in the English box-model and colors JSON files using question/hint phrasing that describes the *concept* without stating the exact property-value pair
-2. Use the flexbox module's existing messages as the style guide
-3. Apply equivalent translations to all 5 localized box-model files (ar, de, es, pl, uk)
-4. Run the format-lessons script and tests to verify nothing breaks
-5. Commit as a docs/content fix (`fix:` conventional commit)
-
-## File Mapping
-
-### Files to Modify
-
-| File | Action | Changes |
-|------|--------|---------|
-| `lessons/01-box-model.json` | modify | Rewrite 11 validation messages |
-| `lessons/03-colors.json` | modify | Rewrite 4 validation messages |
-| `lessons/ar/01-box-model.json` | modify | Translate 11 new guiding messages to Arabic |
-| `lessons/de/01-box-model.json` | modify | Translate 11 new guiding messages to German |
-| `lessons/es/01-box-model.json` | modify | Translate 11 new guiding messages to Spanish |
-| `lessons/pl/01-box-model.json` | modify | Translate 11 new guiding messages to Polish |
-| `lessons/uk/01-box-model.json` | modify | Translate 11 new guiding messages to Ukrainian |
-
-### Files NOT Changed
-
- `lessons/flexbox.json` — already uses guiding messages
- All localized flexbox files — already correct
- No colors localizations exist
-
-## Architecture Decisions
-
-1. **Message style**: Use the same imperative hint style as flexbox ("Use the property that...", "Try the property that...") rather than pure questions. This is consistent with the existing codebase and gives just enough direction without revealing the answer.
-
-2. **No `<kbd>` tags in new messages**: The current answer-revealing messages use `<kbd>` to format exact code. The new guiding messages should avoid `<kbd>` since they won't contain code literals — they describe concepts.
-
-3. **Preserve validation logic**: Only the `message` field changes. The `type`, `value`, `options`, and all other fields remain untouched.
-
-4. **Localization approach**: Translate the English guiding messages into each target language, maintaining the same hint/question style. Keep CSS property names untranslated (they are code).
-
-## Message Mapping (English)
-
-| Lesson | Current Message | New Message |
-|--------|----------------|-------------|
-| box-model-1 | Set `padding: 1rem` | Which property adds space between content and the element's edge? |
-| box-model-2 | Set `border-left: 4px solid steelblue` | Use the shorthand that sets a border on just one side |
-| box-model-3 | Set `margin-bottom: 1rem` | Which property pushes neighboring elements away from the bottom? |
-| box-model-4 | Set `box-sizing: border-box` | Which sizing mode includes padding and border in the element's width? |
-| box-model-5 | Set `padding: 8px 1rem` | Use the two-value shorthand: vertical first, then horizontal |
-| box-model-6 | Set `margin: 0 auto` | Use the shorthand that auto-calculates equal horizontal margins |
-| box-model-7 | Set `border-radius: 50%` | Which property rounds corners? Think about what percentage makes a circle |
-| box-model-8 v1 | Set `padding: 1rem` | Add inner spacing to the notification |
-| box-model-8 v2 | Set `border-left: 4px solid coral` | Add a colored accent on the left edge |
-| box-model-8 v3 | Set `border-radius: 4px` | Soften the corners of the notification |
-| colors-1 | Set `background-color: seashell` | Which property fills the area behind the content? |
-| colors-2 | Set `color: coral` | Which property changes the text color? |
-| colors-3 | Set `border-color: coral` | Which property changes just the border's color without redefining the whole border? |
-| colors-4 | Set `background-color: #ffd700` | Use the same background property, but with a hex code this time |
-
-## Risks
-
-| Risk | Likelihood | Mitigation |
-|------|-----------|------------|
-| Translation quality for 5 languages | Medium | Use consistent patterns; CSS property names stay in English; keep messages short |
-| Messages too vague, frustrating learners | Low | Each message still hints at the concept/direction; task descriptions already contain the answer for early lessons |
-| Schema validation failure | Very Low | Only `message` string changes; no structural changes |
-
-## Testing Strategy
-
-1. **Automated**: Run `npm run test` — existing unit tests validate the validator logic, not message content, so they should pass unchanged
-2. **Automated**: Run `npm run format.lessons` — ensures JSON formatting is correct
-3. **Manual verification**: Spot-check that each new message conceptually matches its lesson without revealing the answer
-4. **Schema validation**: JSON files reference the schema; any structural errors would be caught by the editor/tooling
--- a/specs/004-validation-messages/spec.md
+++ b/specs/004-validation-messages/spec.md
@@ -1,57 +0,0 @@
-# fix: validation error messages reveal the solution instead of guiding learning
-
-**Issue:** [#4](https://git.librete.ch/libretech/code-crispies/issues/4)
-**Repository:** libretech/code-crispies
-**Author:** libretech
-**State:** open
-**Labels:** none
-
-## Issue Body
-
-Pedagogy audit: 88% of exercises reveal the answer in error messages, creating a fail-then-copy loop. Change validation messages from 'Set padding: 1rem' to 'Which property adds space between content and the element edge?' This applies across all modules — start with flexbox, box-model, and colors (the 3 worst offenders).
-
-## Scope
-
-The three priority modules:
-
-1. **Flexbox** (`lessons/flexbox.json`) — already uses guiding messages (0 messages need changes)
-2. **Box Model** (`lessons/01-box-model.json`) — 11 validation messages reveal exact answers
-3. **Colors** (`lessons/03-colors.json`) — 4 validation messages reveal exact answers
-
-Localized versions that need corresponding updates:
- `lessons/ar/01-box-model.json`
- `lessons/de/01-box-model.json`
- `lessons/es/01-box-model.json`
- `lessons/pl/01-box-model.json`
- `lessons/uk/01-box-model.json`
-
-No localized versions exist for colors.
-
-## Acceptance Criteria
-
- [ ] All validation messages in box-model module guide the learner instead of revealing the answer
- [ ] All validation messages in colors module guide the learner instead of revealing the answer
- [ ] Messages use question or hint phrasing (e.g., "Which property..." or "Try the property that...")
- [ ] Messages never include the exact property-value pair that solves the exercise
- [ ] All 5 localized box-model files receive equivalent translated guiding messages
- [ ] Existing tests continue to pass (message content is not tested, only validation logic)
- [ ] Lesson JSON files remain valid against the module schema
-
-## Current vs Desired Pattern
-
-**Current (answer-revealing):**
-```
-"message": "Set <kbd>padding: 1rem</kbd>"
-```
-
-**Desired (guiding):**
-```
-"message": "Which property adds space between the content and the element's edge?"
-```
-
-## Prior Art
-
-The flexbox module already follows the desired pattern. Its messages serve as the style reference:
- "Try changing the display mode to create a flex container"
- "Use the property that adds spacing between flex items"
- "Use the property that distributes items along the main axis"
--- a/specs/004-validation-messages/tasks.md
+++ b/specs/004-validation-messages/tasks.md
@@ -1,20 +0,0 @@
-# Tasks
-
-## Phase 1: English Lesson Files
- [X] Task 1.1: Rewrite 11 validation messages in `lessons/01-box-model.json`
- [X] Task 1.2: Rewrite 4 validation messages in `lessons/03-colors.json`
-
-## Phase 2: Localized Box-Model Files
- [X] Task 2.1: Update validation messages in `lessons/ar/01-box-model.json` (Arabic) [P]
- [X] Task 2.2: Update validation messages in `lessons/de/01-box-model.json` (German) [P]
- [X] Task 2.3: Update validation messages in `lessons/es/01-box-model.json` (Spanish) [P]
- [X] Task 2.4: Update validation messages in `lessons/pl/01-box-model.json` (Polish) [P]
- [X] Task 2.5: Update validation messages in `lessons/uk/01-box-model.json` (Ukrainian) [P]
-
-## Phase 3: Validation
- [X] Task 3.1: Run `npm run format.lessons` to normalize JSON formatting
- [X] Task 3.2: Run `npm run test` to verify no regressions
- [X] Task 3.3: Spot-check that no message reveals the exact answer
-
-## Phase 4: Commit
- [X] Task 4.1: Commit all changes with conventional commit message
--- a/src/app.js
+++ b/src/app.js
@@ -578,6 +578,11 @@ function updateEditorForMode(mode) {
 			label: "Markdown Editor",
 			cmMode: "markdown"
 		},
+		javascript: {
+			placeholder: "// Write your JavaScript here...",
+			label: "JavaScript Editor",
+			cmMode: "javascript"
+		},
 		playground: {
 			placeholder: "<style>\n  /* CSS here */\n</style>\n\n<!-- HTML here -->",
 			label: "HTML & CSS",
@@ -1493,6 +1498,64 @@ This is \`inline code\`.</code></pre>
 				</div>
 			</div>
 		</div>
+	`,
+	javascript: `
+		<div class="section-overview">
+			<p><strong>JavaScript</strong> is the programming language of the web. It makes pages interactive—responding to clicks, updating content, and manipulating the DOM (Document Object Model). Every modern website uses JavaScript to create dynamic user experiences.</p>
+			<p>Start with the fundamentals: declaring variables with <code>const</code> and <code>let</code>, selecting elements with <code>querySelector</code>, changing content and styles, and responding to user events like clicks.</p>
+		</div>
+
+		<div class="topic-row">
+			<div class="topic-text">
+				<h2>Variables</h2>
+				<p>Store values using <code>const</code> (cannot be reassigned) and <code>let</code> (can be updated). Use template literals with backticks to build dynamic strings with embedded expressions.</p>
+				<p>
+					<a href="#js-variables/0" class="topic-link">Practice variables</a>
+				</p>
+			</div>
+			<div class="topic-code">
+				<div class="code-block">
+					<pre><code>const name = "Ada";
+let score = 0;
+const msg = \`Hi, \${name}!\`;</code></pre>
+				</div>
+			</div>
+		</div>
+
+		<div class="topic-row">
+			<div class="topic-text">
+				<h2>DOM Manipulation</h2>
+				<p>Use <code>document.querySelector()</code> to find elements, <code>textContent</code> to change text, and <code>style</code> to modify CSS properties directly from JavaScript.</p>
+				<p>
+					<a href="#js-dom/0" class="topic-link">Practice DOM</a>
+				</p>
+			</div>
+			<div class="topic-code">
+				<div class="code-block">
+					<pre><code>const el = document.querySelector("#box");
+el.textContent = "Hello!";
+el.style.backgroundColor = "gold";</code></pre>
+				</div>
+			</div>
+		</div>
+
+		<div class="topic-row">
+			<div class="topic-text">
+				<h2>Events</h2>
+				<p>Use <code>addEventListener</code> to respond to user interactions. Handle clicks, toggle classes, and build interactive features like counters and toggles.</p>
+				<p>
+					<a href="#js-events/0" class="topic-link">Practice events</a>
+				</p>
+			</div>
+			<div class="topic-code">
+				<div class="code-block">
+					<pre><code>btn.addEventListener("click", () => {
+  count++;
+  out.textContent = count;
+});</code></pre>
+				</div>
+			</div>
+		</div>
 	`
 };

@@ -2310,7 +2373,7 @@ function showLandingPage() {
 */
 function renderFooterLessonLinks() {
 	const modules = lessonEngine.modules || [];
-	const sectionGroups = { css: [], html: [] };
+	const sectionGroups = { css: [], html: [], markdown: [], javascript: [] };

 	modules.forEach((module) => {
 		if (module.excludeFromProgress) return;
@@ -2347,7 +2410,7 @@ function renderFooterLessonLinks() {
 * Update progress indicators on landing page
 */
 function updateLandingProgress() {
-	["css", "html", "markdown"].forEach((sectionId) => { // tailwind temporarily disabled
+	["css", "html", "markdown", "javascript"].forEach((sectionId) => { // tailwind temporarily disabled
 		const progressEl = document.getElementById(`${sectionId}-progress`);
 		if (progressEl) {
 			const sectionModules = getModulesBySection(lessonEngine.modules, sectionId);
--- a/src/config/lessons.js
+++ b/src/config/lessons.js
@@ -31,6 +31,9 @@ import filtersEN from "../../lessons/11-filters.json";
 import positioningEN from "../../lessons/12-positioning.json";
 import pseudoElementsEN from "../../lessons/13-pseudo-elements.json";
 import markdownBasicsEN from "../../lessons/40-markdown-basics.json";
+import jsVariablesEN from "../../lessons/50-js-variables.json";
+import jsDomEN from "../../lessons/51-js-dom.json";
+import jsEventsEN from "../../lessons/52-js-events.json";
 import playgroundEN from "../../lessons/98-playground.json";
 import goodbyeEN from "../../lessons/99-goodbye.json";

@@ -165,6 +168,10 @@ const moduleStoreEN = [
 	htmlTablesEN,
 	// Markdown
 	markdownBasicsEN,
+	// JavaScript
+	jsVariablesEN,
+	jsDomEN,
+	jsEventsEN,
 	// Outro
 	goodbyeEN,
 	playgroundEN
@@ -206,6 +213,10 @@ const moduleStoreDE = [
 	htmlTablesDE,
 	// Markdown
 	markdownBasicsEN, // Using EN fallback until translated
+	// JavaScript
+	jsVariablesEN, // Using EN fallback until translated
+	jsDomEN, // Using EN fallback until translated
+	jsEventsEN, // Using EN fallback until translated
 	// Outro
 	goodbyeEN,
 	playgroundEN
@@ -247,6 +258,10 @@ const moduleStorePL = [
 	htmlTablesPL,
 	// Markdown
 	markdownBasicsEN, // Using EN fallback until translated
+	// JavaScript
+	jsVariablesEN, // Using EN fallback until translated
+	jsDomEN, // Using EN fallback until translated
+	jsEventsEN, // Using EN fallback until translated
 	// Outro
 	goodbyeEN,
 	playgroundEN
@@ -288,6 +303,10 @@ const moduleStoreES = [
 	htmlTablesES,
 	// Markdown
 	markdownBasicsEN, // Using EN fallback until translated
+	// JavaScript
+	jsVariablesEN, // Using EN fallback until translated
+	jsDomEN, // Using EN fallback until translated
+	jsEventsEN, // Using EN fallback until translated
 	// Outro
 	goodbyeEN,
 	playgroundEN
@@ -329,6 +348,10 @@ const moduleStoreAR = [
 	htmlTablesAR,
 	// Markdown
 	markdownBasicsEN, // Using EN fallback until translated
+	// JavaScript
+	jsVariablesEN, // Using EN fallback until translated
+	jsDomEN, // Using EN fallback until translated
+	jsEventsEN, // Using EN fallback until translated
 	// Outro
 	goodbyeEN,
 	playgroundEN
@@ -370,6 +393,10 @@ const moduleStoreUK = [
 	htmlTablesUK,
 	// Markdown
 	markdownBasicsEN, // Using EN fallback until translated
+	// JavaScript
+	jsVariablesEN, // Using EN fallback until translated
+	jsDomEN, // Using EN fallback until translated
+	jsEventsEN, // Using EN fallback until translated
 	// Outro
 	goodbyeEN,
 	playgroundEN
@@ -385,6 +412,58 @@ const moduleStores = {
 	uk: moduleStoreUK
 };

+/**
+ * Category labels for sidebar section headers.
+ * Maps module IDs to their visual grouping label.
+ */
+const moduleCategories = {
+	// CSS Basics
+	"css-basic-selectors": "CSS Basics",
+	colors: "CSS Basics",
+	gradients: "CSS Basics",
+	typography: "CSS Basics",
+	"box-model": "CSS Basics",
+	// CSS Layout
+	flexbox: "CSS Layout",
+	grid: "CSS Layout",
+	positioning: "CSS Layout",
+	"units-variables": "CSS Layout",
+	responsive: "CSS Layout",
+	// CSS Polish
+	"transitions-animations": "CSS Polish",
+	filters: "CSS Polish",
+	"pseudo-elements": "CSS Polish",
+	// HTML Structure
+	"html-elements": "HTML Structure",
+	"html-semantic": "HTML Structure",
+	"html-figure": "HTML Structure",
+	"html-svg": "HTML Structure",
+	// HTML Interactive
+	"html-details-summary": "HTML Interactive",
+	"html-dialog": "HTML Interactive",
+	"html-progress-meter": "HTML Interactive",
+	"html-forms-basic": "HTML Interactive",
+	"html-forms-validation": "HTML Interactive",
+	"html-forms-fieldset": "HTML Interactive",
+	"html-datalist": "HTML Interactive",
+	"html-tables": "HTML Interactive",
+	// Markdown
+	"markdown-basics": "Markdown",
+	// JavaScript
+	"js-variables": "JavaScript",
+	"js-dom": "JavaScript",
+	"js-events": "JavaScript"
+};
+
+/**
+ * Get the sidebar category label for a module
+ * @param {string} moduleId - The module ID
+ * @returns {string|null} The category label, or null for uncategorized modules (welcome, outro)
+ */
+export function getModuleCategory(moduleId) {
+	return moduleCategories[moduleId] || null;
+}
+
 /**
 * Load all available modules for a given language
 * @param {string} language - Language code ('en', 'de', 'pl', 'es', 'ar', 'uk')
--- a/src/config/sections.js
+++ b/src/config/sections.js
@@ -31,6 +31,13 @@ export const sections = {
 		description: "Lightweight markup language for formatting text",
 		color: "#5b8dd9",
 		order: 4
+	},
+	javascript: {
+		id: "javascript",
+		title: "JavaScript",
+		description: "Variables, DOM manipulation, and event handling",
+		color: "#f0c040",
+		order: 5
 	}
 };

@@ -65,6 +72,7 @@ export function getModuleSection(module) {
 	if (mode === "html") return "html";
 	if (mode === "tailwind") return "tailwind";
 	if (mode === "markdown") return "markdown";
+	if (mode === "javascript") return "javascript";
 	return "css";
 }

--- a/src/helpers/renderer.js
+++ b/src/helpers/renderer.js
@@ -2,6 +2,7 @@
 * Renderer - Handles UI updates for the CSS learning platform
 */
 import { t } from "../i18n.js";
+import { getModuleCategory } from "../config/lessons.js";

 /**
 * Compute lesson difficulty based on lesson structure
@@ -72,8 +73,21 @@ export function renderModuleList(container, modules, onSelectModule, onSelectLes
 		}
 	}

+	// Track current category for section headers
+	let currentCategory = null;
+
 	// Create list items for each module
 	modules.forEach((module) => {
+		// Insert section header when category changes
+		const category = getModuleCategory(module.id);
+		if (category && category !== currentCategory) {
+			currentCategory = category;
+			const header = document.createElement("h3");
+			header.className = "module-section-header";
+			header.textContent = category;
+			header.setAttribute("aria-hidden", "true");
+			container.appendChild(header);
+		}
 		// Create module container
 		// Use native <details>/<summary> for expand/collapse
 		const moduleContainer = document.createElement("details");
--- a/src/helpers/validator.js
+++ b/src/helpers/validator.js
@@ -10,6 +10,8 @@ export function validateUserCode(userCode, lesson) {
 			return validateHtmlCode(userCode, lesson);
 		case "tailwind":
 			return validateTailwindClasses(userCode, lesson);
+		case "javascript":
+			return validateJavaScriptCode(userCode, lesson);
 		case "css":
 		default:
 			return validateCssCode(userCode, lesson);
@@ -204,6 +206,80 @@ function validateHtmlCode(userHtml, lesson) {
 	return result;
 }

+/**
+ * Validate user JavaScript code against the lesson requirements
+ * @param {string} userCode - User submitted JavaScript code
+ * @param {Object} lesson - The current lesson object
+ * @returns {Object} Validation result with isValid and message properties
+ */
+function validateJavaScriptCode(userCode, lesson) {
+	if (!lesson || !lesson.validations) {
+		return { isValid: true, message: "No validations specified for this lesson." };
+	}
+
+	const validations = lesson.validations;
+
+	let result = {
+		isValid: true,
+		validCases: 0,
+		totalCases: validations.length,
+		message: "Your CODE looks CRISPY!"
+	};
+
+	for (const validation of validations) {
+		const { type, value, message, options } = validation;
+		let validationPassed = false;
+
+		switch (type) {
+			case "contains":
+				validationPassed = containsValidation(userCode, value, options);
+				if (!validationPassed) {
+					result = {
+						...result,
+						isValid: false,
+						message: message || `Your code should include "${value}".`
+					};
+				}
+				break;
+
+			case "not_contains":
+				validationPassed = !containsValidation(userCode, value, options);
+				if (!validationPassed) {
+					result = {
+						...result,
+						isValid: false,
+						message: message || `Your code should not include "${value}".`
+					};
+				}
+				break;
+
+			case "regex":
+				validationPassed = regexValidation(userCode, value, options);
+				if (!validationPassed) {
+					result = {
+						...result,
+						isValid: false,
+						message: message || "Your code does not match the expected pattern."
+					};
+				}
+				break;
+
+			default:
+				console.warn(`Unknown JavaScript validation type: ${type}`);
+				validationPassed = true;
+		}
+
+		if (validationPassed) {
+			result.validCases++;
+		} else {
+			return result;
+		}
+	}
+
+	result.validCases = validations.length;
+	return result;
+}
+
 function validateTailwindClasses(userClasses, lesson) {
 	if (!lesson || !lesson.validations) {
 		return { isValid: true, message: "No validations specified for this lesson." };
--- a/src/impl/CodeEditor.js
+++ b/src/impl/CodeEditor.js
@@ -8,12 +8,13 @@ import { history } from "@codemirror/commands";
 import { html } from "@codemirror/lang-html";
 import { css } from "@codemirror/lang-css";
 import { markdown } from "@codemirror/lang-markdown";
+import { javascript } from "@codemirror/lang-javascript";
 import { autocompletion } from "@codemirror/autocomplete";
 import { abbreviationTracker, expandAbbreviation } from "@emmetio/codemirror6-plugin";
 import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
 import { tags } from "@lezer/highlight";

-// Custom theme with pink accent colors (matching app completed state)
+// Custom theme with purple accent colors (matching app completed state)
 const crispyTheme = EditorView.theme(
 	{
 		"&": {
@@ -21,10 +22,10 @@ const crispyTheme = EditorView.theme(
 			color: "#c8c8d0"
 		},
 		".cm-content": {
-			caretColor: "#d46d9b"
+			caretColor: "#9b6dd4"
 		},
 		".cm-cursor, .cm-dropCursor": {
-			borderLeftColor: "#d46d9b"
+			borderLeftColor: "#9b6dd4"
 		},
 		"&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": {
 			backgroundColor: "#3e3e4a"
@@ -35,10 +36,10 @@ const crispyTheme = EditorView.theme(
 		},
 		".cm-searchMatch": {
 			backgroundColor: "#3e3e4a",
-			outline: "1px solid #d46d9b"
+			outline: "1px solid #9b6dd4"
 		},
 		".cm-searchMatch.cm-searchMatch-selected": {
-			backgroundColor: "rgba(212, 109, 155, 0.3)"
+			backgroundColor: "rgba(155, 109, 212, 0.3)"
 		},
 		".cm-activeLine": {
 			backgroundColor: "#2e2e3a"
@@ -63,13 +64,13 @@ const crispyTheme = EditorView.theme(

 // Default syntax highlighting (blue accent)
 const defaultHighlight = HighlightStyle.define([
-	{ tag: tags.keyword, color: "#eba6c9" },
+	{ tag: tags.keyword, color: "#c9a6eb" },
 	{ tag: tags.operator, color: "#cdd6f4" },
 	{ tag: tags.variableName, color: "#89b4fa" },
 	{ tag: tags.propertyName, color: "#89b4fa" },
 	{ tag: tags.attributeName, color: "#89b4fa" },
 	{ tag: tags.className, color: "#89b4fa" },
-	{ tag: tags.tagName, color: "#eba6c9" },
+	{ tag: tags.tagName, color: "#c9a6eb" },
 	{ tag: tags.string, color: "#a6e3a1" },
 	{ tag: tags.number, color: "#fab387" },
 	{ tag: tags.bool, color: "#fab387" },
@@ -79,20 +80,20 @@ const defaultHighlight = HighlightStyle.define([
 	{ tag: tags.punctuation, color: "#cdd6f4" },
 	{ tag: tags.definition(tags.variableName), color: "#89b4fa" },
 	{ tag: tags.function(tags.variableName), color: "#89b4fa" },
-	{ tag: tags.atom, color: "#eba6c9" },
+	{ tag: tags.atom, color: "#c9a6eb" },
 	{ tag: tags.unit, color: "#a6e3a1" },
 	{ tag: tags.color, color: "#f9e2af" }
 ]);

-// CSS section highlighting (pink selectors)
+// CSS section highlighting (purple selectors)
 const cssHighlight = HighlightStyle.define([
-	{ tag: tags.keyword, color: "#eba6c9" },
+	{ tag: tags.keyword, color: "#c9a6eb" },
 	{ tag: tags.operator, color: "#cdd6f4" },
-	{ tag: tags.variableName, color: "#eba6c9" },
+	{ tag: tags.variableName, color: "#c9a6eb" },
 	{ tag: tags.propertyName, color: "#89b4fa" },
 	{ tag: tags.attributeName, color: "#89b4fa" },
-	{ tag: tags.className, color: "#eba6c9" },
-	{ tag: tags.tagName, color: "#eba6c9" },
+	{ tag: tags.className, color: "#c9a6eb" },
+	{ tag: tags.tagName, color: "#c9a6eb" },
 	{ tag: tags.string, color: "#a6e3a1" },
 	{ tag: tags.number, color: "#fab387" },
 	{ tag: tags.bool, color: "#fab387" },
@@ -100,9 +101,9 @@ const cssHighlight = HighlightStyle.define([
 	{ tag: tags.comment, color: "#6c7086", fontStyle: "italic" },
 	{ tag: tags.bracket, color: "#cdd6f4" },
 	{ tag: tags.punctuation, color: "#cdd6f4" },
-	{ tag: tags.definition(tags.variableName), color: "#eba6c9" },
+	{ tag: tags.definition(tags.variableName), color: "#c9a6eb" },
 	{ tag: tags.function(tags.variableName), color: "#89b4fa" },
-	{ tag: tags.atom, color: "#eba6c9" },
+	{ tag: tags.atom, color: "#c9a6eb" },
 	{ tag: tags.unit, color: "#a6e3a1" },
 	{ tag: tags.color, color: "#f9e2af" }
 ]);
@@ -181,7 +182,7 @@ export class CodeEditor {
 		const fullDoc = prefix + initialValue + suffix;

 		// Get language extension based on mode
-		const langExtension = this.mode === "html" ? html() : this.mode === "markdown" ? markdown() : css();
+		const langExtension = this.mode === "html" ? html() : this.mode === "markdown" ? markdown() : this.mode === "javascript" ? javascript() : css();

 		// Create read-only zones decorations
 		const readOnlyMark = Decoration.mark({ class: "cm-readonly-zone" });
--- a/src/impl/LessonEngine.js
+++ b/src/impl/LessonEngine.js
@@ -216,18 +216,18 @@ export class LessonEngine {
 		iframe.style.height = "100%";
 		iframe.style.border = "none";
 		iframe.title = "Preview";
-		iframe.setAttribute("sandbox", "allow-scripts");

 		const container = document.getElementById(previewContainer || "preview-area");
 		container.innerHTML = "";
 		container.appendChild(iframe);

-		let html;
+		const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
+		iframeDoc.open();

 		if (mode === "html" || mode === "playground") {
 			// For HTML/playground mode, user code IS the HTML content (may include <style> blocks)
 			const userHtml = this.userCode || "";
-			html = `
+			iframeDoc.write(`
      <!DOCTYPE html>
      <html>
        <head>
@@ -239,11 +239,11 @@ export class LessonEngine {
          ${userHtml}
        </body>
      </html>
-    `;
+    `);
 		} else if (mode === "tailwind") {
 			// For Tailwind mode, user code goes directly in HTML classes
 			const htmlWithClasses = this.injectTailwindClasses(previewHTML, this.userCode);
-			html = `
+			iframeDoc.write(`
      <!DOCTYPE html>
      <html>
        <head>
@@ -256,11 +256,11 @@ export class LessonEngine {
          ${htmlWithClasses}
        </body>
      </html>
-    `;
+    `);
 		} else if (mode === "markdown") {
 			// For Markdown mode, parse user code to HTML
 			const renderedHtml = marked.parse(this.userCode || "");
-			html = `
+			iframeDoc.write(`
      <!DOCTYPE html>
      <html>
        <head>
@@ -288,11 +288,35 @@ export class LessonEngine {
          ${renderedHtml}
        </body>
      </html>
-    `;
+    `);
+		} else if (mode === "javascript") {
+			// For JavaScript mode, inject user code as a script
+			const { codePrefix, codeSuffix } = this.currentLesson;
+			const fullScript = `${codePrefix || ""}${this.userCode || ""}${codeSuffix || ""}`;
+			iframeDoc.write(`
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <style>html, body { min-height: 100%; margin: 0; }</style>
+          <style>${previewBaseCSS || ""}</style>
+          <style>${sandboxCSS || ""}</style>
+        </head>
+        <body>
+          ${previewHTML || ""}
+          <script>
+            try {
+              ${fullScript}
+            } catch (e) {
+              console.error("Script error:", e);
+            }
+          </script>
+        </body>
+      </html>
+    `);
 		} else {
 			// Original CSS mode
 			const userCssWithWrapper = this.getCompleteCss();
-			html = `
+			iframeDoc.write(`
      <!DOCTYPE html>
      <html>
        <head>
@@ -305,10 +329,10 @@ export class LessonEngine {
          ${previewHTML}
        </body>
      </html>
-    `;
+    `);
 		}

-		iframe.srcdoc = html;
+		iframeDoc.close();
 	}

 	injectTailwindClasses(html, userClasses) {
@@ -341,7 +365,6 @@ export class LessonEngine {
 		iframe.style.height = "100%";
 		iframe.style.border = "none";
 		iframe.title = "Expected Result";
-		iframe.setAttribute("sandbox", "allow-scripts");

 		const container = document.getElementById("preview-expected");
 		if (!container) return;
@@ -349,11 +372,12 @@ export class LessonEngine {
 		container.innerHTML = "";
 		container.appendChild(iframe);

-		let html;
+		const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
+		iframeDoc.open();

 		if (mode === "html" || mode === "playground") {
 			// For HTML/playground mode, solution code IS the HTML content
-			html = `
+			iframeDoc.write(`
      <!DOCTYPE html>
      <html>
        <head>
@@ -365,11 +389,11 @@ export class LessonEngine {
          ${solutionCode}
        </body>
      </html>
-    `;
+    `);
 		} else if (mode === "tailwind") {
 			// For Tailwind mode, inject solution classes into HTML
 			const htmlWithClasses = this.injectTailwindClasses(previewHTML, solutionCode);
-			html = `
+			iframeDoc.write(`
      <!DOCTYPE html>
      <html>
        <head>
@@ -382,11 +406,11 @@ export class LessonEngine {
          ${htmlWithClasses}
        </body>
      </html>
-    `;
+    `);
 		} else if (mode === "markdown") {
 			// For Markdown mode, parse solution to HTML
 			const renderedHtml = marked.parse(solutionCode || "");
-			html = `
+			iframeDoc.write(`
      <!DOCTYPE html>
      <html>
        <head>
@@ -414,12 +438,36 @@ export class LessonEngine {
          ${renderedHtml}
        </body>
      </html>
-    `;
+    `);
+		} else if (mode === "javascript") {
+			// For JavaScript mode, inject solution code as a script
+			const { codePrefix, codeSuffix } = this.currentLesson;
+			const fullScript = `${codePrefix || ""}${solutionCode}${codeSuffix || ""}`;
+			iframeDoc.write(`
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <style>html, body { min-height: 100%; margin: 0; }</style>
+          <style>${previewBaseCSS || ""}</style>
+          <style>${sandboxCSS || ""}</style>
+        </head>
+        <body>
+          ${previewHTML || ""}
+          <script>
+            try {
+              ${fullScript}
+            } catch (e) {
+              console.error("Script error:", e);
+            }
+          </script>
+        </body>
+      </html>
+    `);
 		} else {
 			// CSS mode - wrap solution with prefix/suffix
 			const { codePrefix, codeSuffix } = this.currentLesson;
 			const solutionCss = `${codePrefix || ""}${solutionCode}${codeSuffix || ""}`;
-			html = `
+			iframeDoc.write(`
      <!DOCTYPE html>
      <html>
        <head>
@@ -432,10 +480,10 @@ export class LessonEngine {
          ${previewHTML}
        </body>
      </html>
-    `;
+    `);
 		}

-		iframe.srcdoc = html;
+		iframeDoc.close();
 	}

 	/**
--- a/src/index.html
+++ b/src/index.html
@@ -4,7 +4,6 @@
 		<meta charset="UTF-8" />
 		<link rel="icon" href="./favicon.ico" type="image/x-icon" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' https://librete.ch https://liberapay.com; style-src 'self' 'unsafe-inline'; connect-src 'self' https://*.supabase.co wss://*.supabase.co; img-src 'self' https://liberapay.com data:; font-src 'self'; frame-src 'self' blob:" />

 		<!-- Primary Meta Tags -->
 		<title>CODE CRISPIES - Learn HTML & CSS Interactively | Free Coding Practice</title>
@@ -77,6 +76,7 @@
 						<a href="#html" class="nav-link" data-section="html">HTML</a>
 						<!-- <a href="#tailwind" class="nav-link" data-section="tailwind">Tailwind</a> -->
 						<a href="#markdown" class="nav-link" data-section="markdown">Markdown</a>
+						<a href="#javascript" class="nav-link" data-section="javascript">JS</a>
 						<a href="#reference/css" class="nav-link nav-link-ref" data-section="reference">Reference</a>
 					</nav>
 					<button id="auth-trigger-header" class="btn btn-outline btn-sm" data-i18n="authLogin">Log In</button>
@@ -178,6 +178,12 @@
 								<p data-i18n="landingMarkdownDesc">Lightweight markup for formatting text</p>
 								<span class="section-card-progress" id="markdown-progress"></span>
 							</a>
+							<a href="#javascript" class="section-card" data-section="javascript">
+								<div class="section-card-icon" style="background: #f0c040">JS</div>
+								<h3>JavaScript</h3>
+								<p data-i18n="landingJsDesc">Variables, DOM manipulation, and event handling</p>
+								<span class="section-card-progress" id="javascript-progress"></span>
+							</a>
 						</div>
 						<p class="device-notice" data-i18n-html="deviceNotice">
 							<strong>Best on desktop or tablet (landscape).</strong> Mobile works, but larger screens make coding easier.
@@ -478,6 +484,8 @@
 					<a href="#css" class="sidebar-nav-link" data-section="css">CSS</a>
 					<a href="#html" class="sidebar-nav-link" data-section="html">HTML</a>
 					<!-- <a href="#tailwind" class="sidebar-nav-link" data-section="tailwind">Tailwind</a> -->
+					<a href="#markdown" class="sidebar-nav-link" data-section="markdown">Markdown</a>
+					<a href="#javascript" class="sidebar-nav-link" data-section="javascript">JavaScript</a>
 					<button id="auth-trigger-mobile" class="sidebar-nav-link sidebar-auth-link" data-i18n="authLogin">Log In</button>
 				</nav>

--- a/src/main.css
+++ b/src/main.css
@@ -1,15 +1,15 @@
 /* ================= BASE THEME ================= */
 :root {
 	/* Primary colors */
-	--primary-color: #c9507a;
-	--primary-light: #e077a0;
-	--primary-dark: #a83d65;
+	--primary-color: #5e4b8b;
+	--primary-light: #8a77b5;
+	--primary-dark: #724a95;

-	/* Section colors (default to CSS pink) */
-	--section-color: #d95a8a;
-	--section-color-light: #e87da6;
-	--section-color-dark: #b84472;
-	--section-color-rgb: 217, 90, 138;
+	/* Section colors (default to CSS purple) */
+	--section-color: #9163b8;
+	--section-color-light: #a87dc8;
+	--section-color-dark: #724a95;
+	--section-color-rgb: 145, 99, 184;

 	/* Secondary colors */
 	--secondary-color: #444444;
@@ -23,9 +23,9 @@
 	--white-text: #ffffff;

 	/* Background colors */
-	--bg-color: #fcf7f9;
+	--bg-color: #f8f7fc;
 	--panel-bg: #ffffff;
-	--code-bg: #faf5f7;
+	--code-bg: #f7f5fa;
 	--editor-bg: #1e1e1e;
 	--editor-highlight: #303030;

@@ -34,9 +34,9 @@

 	/* Status colors */
 	--info-color: #7a93fe;
-	--success-color: #d46d9b;
-	--success-color-dark: #b84472;
-	--success-color-light: #e8b8d0;
+	--success-color: #9b6dd4;
+	--success-color-dark: #7c4dff;
+	--success-color-light: #c9b8e8;
 	--error-color: #cb6e75;
 	--danger-color: #dc3545;

@@ -252,11 +252,11 @@ kbd {
 }

 .logo h1 .code-text {
-	color: #d95a8a;
+	color: #9163b8;
 }

 .logo h1 .crispies-text {
-	background: #d95a8a;
+	background: #9163b8;
 	color: white;
 	padding: 0.15rem 0.35rem;
 	border-radius: 4px;
@@ -291,6 +291,14 @@ kbd {
 	background: #5b8dd9;
 }

+[data-section="javascript"] .logo h1 .code-text {
+	color: #d4a020;
+}
+
+[data-section="javascript"] .logo h1 .crispies-text {
+	background: #d4a020;
+}
+
 .help-toggle {
 	width: 28px;
 	height: 28px;
@@ -468,7 +476,7 @@ kbd {
 .completion-badge {
 	display: inline-block;
 	padding: 0.15rem 0.5rem;
-	background: linear-gradient(135deg, #d95a8a, #d45aa0, #1aafb8, #ff4d88);
+	background: linear-gradient(135deg, #9163b8, #d45aa0, #1aafb8, #7c4dff);
 	color: white;
 	font-size: 0.7rem;
 	font-weight: 600;
@@ -714,7 +722,7 @@ kbd {
 	position: absolute;
 	inset: var(--spacing-md);
 	border-radius: var(--border-radius-md);
-	background: conic-gradient(from var(--border-angle), #d95a8a, #d45aa0, #1aafb8, #ff4d88, #d95a8a);
+	background: conic-gradient(from var(--border-angle), #9163b8, #d45aa0, #1aafb8, #7c4dff, #9163b8);
 	filter: blur(30px);
 	opacity: 0;
 	animation: spin-glow 3s ease-out forwards;
@@ -727,7 +735,7 @@ kbd {
 	position: absolute;
 	inset: var(--spacing-md);
 	border-radius: var(--border-radius-md);
-	background: conic-gradient(from 0deg, #d95a8a, #d45aa0, #1aafb8, #ff4d88, #d95a8a);
+	background: conic-gradient(from 0deg, #9163b8, #d45aa0, #1aafb8, #7c4dff, #9163b8);
 	filter: blur(30px);
 	opacity: 0.35;
 	pointer-events: none;
@@ -816,7 +824,7 @@ kbd {
 	border: 6px solid transparent;
 	background:
 		linear-gradient(var(--panel-bg), var(--panel-bg)) padding-box,
-		conic-gradient(from 0deg, #d95a8a, #d45aa0, #1aafb8, #ff4d88, #d95a8a) border-box;
+		conic-gradient(from 0deg, #9163b8, #d45aa0, #1aafb8, #7c4dff, #9163b8) border-box;
 }

 .preview-wrapper.matched {
@@ -824,7 +832,7 @@ kbd {
 	border: 6px solid transparent;
 	background:
 		linear-gradient(var(--panel-bg), var(--panel-bg)) padding-box,
-		conic-gradient(from var(--border-angle), #d95a8a, #d45aa0, #1aafb8, #ff4d88, #d95a8a) border-box;
+		conic-gradient(from var(--border-angle), #9163b8, #d45aa0, #1aafb8, #7c4dff, #9163b8) border-box;
 	animation: spin-border 3s ease-out forwards;
 	overflow: visible;
 }
@@ -844,7 +852,7 @@ kbd {
 	font-weight: 800;
 	letter-spacing: 0.05em;
 	color: white;
-	background: linear-gradient(135deg, #d95a8a 0%, #d45aa0 50%, #ff4d88 100%);
+	background: linear-gradient(135deg, #9163b8 0%, #d45aa0 50%, #7c4dff 100%);
 	padding: 1.25rem 2rem 1.75rem;
 	z-index: 10;
 	pointer-events: none;
@@ -1142,7 +1150,7 @@ nav.sidebar-section:not(.sidebar-nav-mobile) {

 .progress-fill {
 	height: 100%;
-	background: linear-gradient(90deg, #d95a8a, #d45aa0, #1aafb8, #ff4d88);
+	background: linear-gradient(90deg, #9163b8, #d45aa0, #1aafb8, #7c4dff);
 	background-size: calc(100% * 100 / var(--progress-percent, 100)) 100%;
 	border-radius: 4px;
 	transition: width 0.3s ease;
@@ -1206,7 +1214,7 @@ nav.sidebar-section:not(.sidebar-nav-mobile) {
 }

 /* Each milestone gets a color evenly distributed across the gradient
-   Gradient: #d95a8a (0%) → #d45aa0 (33%) → #1aafb8 (67%) → #ff4d88 (100%) */
+   Gradient: #9163b8 (0%) → #d45aa0 (33%) → #1aafb8 (67%) → #7c4dff (100%) */
 .milestone.reached:nth-child(1) { background: #a55eac; } /* ~14% */
 .milestone.reached:nth-child(2) { background: #c459a2; } /* ~28% */
 .milestone.reached:nth-child(3) { background: #d45aa0; } /* ~33% pink */
@@ -1214,12 +1222,12 @@ nav.sidebar-section:not(.sidebar-nav-mobile) {
 .milestone.reached:nth-child(5) { background: #7785ac; } /* ~50% */
 .milestone.reached:nth-child(6) { background: #33a3b6; } /* ~62% */
 .milestone.reached:nth-child(7) { background: #4889d8; } /* ~80% */
-.milestone.reached:nth-child(8) { background: #ff4d88; } /* 100% */
+.milestone.reached:nth-child(8) { background: #7c4dff; } /* 100% */

 .milestone.current {
 	color: white;
 	transform: scale(1.15);
-	box-shadow: 0 2px 8px rgba(217, 90, 138, 0.4);
+	box-shadow: 0 2px 8px rgba(145, 99, 184, 0.4);
 }

 .milestone.next {
@@ -1249,6 +1257,17 @@ nav.sidebar-section:not(.sidebar-nav-mobile) {
 	/* No max-height - parent nav.sidebar-section handles overflow */
 }

+.module-section-header {
+	font-size: 0.7rem;
+	text-transform: uppercase;
+	color: #888;
+	letter-spacing: 0.08em;
+	padding: 0.75rem var(--spacing-sm) 0.25rem;
+	margin: 0;
+	font-weight: 600;
+	pointer-events: none;
+}
+
 .module-container {
 	margin-bottom: 4px;
 }
@@ -2590,7 +2609,7 @@ input:checked + .toggle-slider::before {
 	margin-top: var(--spacing-lg);
 	text-align: center;
 	padding: 0.75rem 1.5rem;
-	background: linear-gradient(135deg, rgba(217, 90, 138, 0.1), rgba(212, 90, 160, 0.1), rgba(26, 175, 184, 0.1));
+	background: linear-gradient(135deg, rgba(145, 99, 184, 0.1), rgba(212, 90, 160, 0.1), rgba(26, 175, 184, 0.1));
 	border-radius: var(--border-radius-md);
 	color: var(--light-text);
 	font-size: 0.9rem;
@@ -2840,7 +2859,7 @@ input:checked + .toggle-slider::before {
 }

 .section-overview code {
-	background: rgba(var(--section-color-rgb, 217, 90, 138), 0.1);
+	background: rgba(var(--section-color-rgb, 145, 99, 184), 0.1);
 	color: var(--section-color-dark, var(--primary-dark));
 	padding: 0.1rem 0.35rem;
 	border-radius: 4px;
@@ -2950,7 +2969,7 @@ input:checked + .toggle-slider::before {

 /* Inline code in topic text */
 .topic-text code {
-	background: rgba(var(--section-color-rgb, 217, 90, 138), 0.1);
+	background: rgba(var(--section-color-rgb, 145, 99, 184), 0.1);
 	color: var(--section-color-dark, var(--primary-dark));
 	padding: 0.15rem 0.4rem;
 	border-radius: 4px;
@@ -3592,7 +3611,7 @@ input:checked + .toggle-slider::before {
 }

 /* ================= SECTION COLOR CODING ================= */
-/* CSS Section uses default pink from :root */
+/* CSS Section uses default purple from :root */

 /* HTML Section - Pink (balanced) */
 [data-section="html"] {
@@ -3618,9 +3637,17 @@ input:checked + .toggle-slider::before {
 	--section-color-rgb: 91, 141, 217;
 }

+/* JavaScript Section - Gold */
+[data-section="javascript"] {
+	--section-color: #d4a020;
+	--section-color-light: #e0b840;
+	--section-color-dark: #b08818;
+	--section-color-rgb: 212, 160, 32;
+}
+
 /* Apply section colors to nav links */
 .nav-link[data-section="css"] {
-	color: #d95a8a;
+	color: #9163b8;
 }

 .nav-link[data-section="html"] {
@@ -3635,10 +3662,14 @@ input:checked + .toggle-slider::before {
 	color: #5b8dd9;
 }

+.nav-link[data-section="javascript"] {
+	color: #d4a020;
+}
+
 .nav-link[data-section="css"]:hover,
 .nav-link[data-section="css"].active {
-	background: rgba(217, 90, 138, 0.1);
-	color: #a83d65;
+	background: rgba(145, 99, 184, 0.1);
+	color: #724a95;
 }

 .nav-link[data-section="html"]:hover,
@@ -3659,14 +3690,20 @@ input:checked + .toggle-slider::before {
 	color: #4070b8;
 }

+.nav-link[data-section="javascript"]:hover,
+.nav-link[data-section="javascript"].active {
+	background: rgba(212, 160, 32, 0.1);
+	color: #b08818;
+}
+
 /* Hint section colors */
 body[data-section="css"] .hint {
-	background: rgba(217, 90, 138, 0.3);
+	background: rgba(145, 99, 184, 0.3);
 	border-left-color: #a98cd6;
 }

 body[data-section="css"] .hint-progress {
-	background: #d95a8a;
+	background: #9163b8;
 }

 body[data-section="html"] .hint {
@@ -3696,6 +3733,15 @@ body[data-section="markdown"] .hint-progress {
 	background: #5b8dd9;
 }

+body[data-section="javascript"] .hint {
+	background: rgba(212, 160, 32, 0.3);
+	border-left-color: #e0b840;
+}
+
+body[data-section="javascript"] .hint-progress {
+	background: #d4a020;
+}
+
 /* RTL hint border */
 [dir="rtl"] body[data-section="css"] .hint {
 	border-right-color: #a98cd6;
@@ -3713,12 +3759,16 @@ body[data-section="markdown"] .hint-progress {
 	border-right-color: #7ba3e5;
 }

+[dir="rtl"] body[data-section="javascript"] .hint {
+	border-right-color: #e0b840;
+}
+
 /* Reference nav link colors */
 .ref-nav-link[data-ref="css"],
 .ref-nav-link[data-ref="selectors"],
 .ref-nav-link[data-ref="flexbox"],
 .ref-nav-link[data-ref="grid"] {
-	color: #d95a8a;
+	color: #9163b8;
 }

 .ref-nav-link[data-ref="css"]:hover,
@@ -3729,8 +3779,8 @@ body[data-section="markdown"] .hint-progress {
 .ref-nav-link[data-ref="flexbox"].active,
 .ref-nav-link[data-ref="grid"]:hover,
 .ref-nav-link[data-ref="grid"].active {
-	background: rgba(217, 90, 138, 0.15);
-	color: #a83d65;
+	background: rgba(145, 99, 184, 0.15);
+	color: #724a95;
 }

 .ref-nav-link[data-ref="html"] {
@@ -3745,21 +3795,21 @@ body[data-section="markdown"] .hint-progress {

 /* CodeMirror section color overrides */
 body[data-section="css"] .cm-editor .cm-content {
-	caret-color: #d95a8a !important;
+	caret-color: #9163b8 !important;
 }

 body[data-section="css"] .cm-editor .cm-cursor,
 body[data-section="css"] .cm-editor .cm-dropCursor {
-	border-left-color: #d95a8a !important;
+	border-left-color: #9163b8 !important;
 }

 body[data-section="css"] .cm-editor .cm-selectionBackground,
 body[data-section="css"] .cm-editor .cm-content ::selection {
-	background-color: rgba(217, 90, 138, 0.25) !important;
+	background-color: rgba(145, 99, 184, 0.25) !important;
 }

 body[data-section="css"] .cm-editor .cm-activeLine {
-	background-color: rgba(217, 90, 138, 0.08) !important;
+	background-color: rgba(145, 99, 184, 0.08) !important;
 }

 body[data-section="html"] .cm-editor .cm-content {
@@ -3816,14 +3866,32 @@ body[data-section="markdown"] .cm-editor .cm-activeLine {
 	background-color: rgba(91, 141, 217, 0.08) !important;
 }

+body[data-section="javascript"] .cm-editor .cm-content {
+	caret-color: #d4a020 !important;
+}
+
+body[data-section="javascript"] .cm-editor .cm-cursor,
+body[data-section="javascript"] .cm-editor .cm-dropCursor {
+	border-left-color: #d4a020 !important;
+}
+
+body[data-section="javascript"] .cm-editor .cm-selectionBackground,
+body[data-section="javascript"] .cm-editor .cm-content ::selection {
+	background-color: rgba(212, 160, 32, 0.25) !important;
+}
+
+body[data-section="javascript"] .cm-editor .cm-activeLine {
+	background-color: rgba(212, 160, 32, 0.08) !important;
+}
+
 /* Module pill section colors */
 body[data-section="css"] .module-pill {
-	background: rgba(217, 90, 138, 0.1);
-	color: #d95a8a;
+	background: rgba(145, 99, 184, 0.1);
+	color: #9163b8;
 }

 body[data-section="css"] .module-pill .level-indicator {
-	color: #a83d65;
+	color: #724a95;
 }

 body[data-section="html"] .module-pill {
@@ -3853,9 +3921,18 @@ body[data-section="markdown"] .module-pill .level-indicator {
 	color: #4070b8;
 }

+body[data-section="javascript"] .module-pill {
+	background: rgba(212, 160, 32, 0.1);
+	color: #d4a020;
+}
+
+body[data-section="javascript"] .module-pill .level-indicator {
+	color: #b08818;
+}
+
 /* Code block border section colors */
 body[data-section="css"] .code-block {
-	border-color: rgba(217, 90, 138, 0.4);
+	border-color: rgba(145, 99, 184, 0.4);
 }

 body[data-section="html"] .code-block {
@@ -3870,6 +3947,10 @@ body[data-section="markdown"] .code-block {
 	border-color: rgba(91, 141, 217, 0.4);
 }

+body[data-section="javascript"] .code-block {
+	border-color: rgba(212, 160, 32, 0.4);
+}
+
 /* Section code block CodeMirror syntax highlighting overrides */
 body[data-section="css"] .code-block .cm-editor .cm-line {
 	color: #c9c0e0;
@@ -3887,9 +3968,13 @@ body[data-section="markdown"] .code-block .cm-editor .cm-line {
 	color: #c0d0e8;
 }

+body[data-section="javascript"] .code-block .cm-editor .cm-line {
+	color: #e8dcc0;
+}
+
 /* Task instruction bubble section colors */
 [data-section="css"] .task-instruction {
-	background: rgba(217, 90, 138, 0.92);
+	background: rgba(145, 99, 184, 0.92);
 }

 [data-section="html"] .task-instruction {
@@ -3904,9 +3989,13 @@ body[data-section="markdown"] .code-block .cm-editor .cm-line {
 	background: rgba(91, 141, 217, 0.92);
 }

+[data-section="javascript"] .task-instruction {
+	background: rgba(212, 160, 32, 0.92);
+}
+
 /* Section page progress bar colors */
 body[data-section="css"] .section-progress-bar .progress-fill {
-	background: #d95a8a;
+	background: #9163b8;
 }

 body[data-section="html"] .section-progress-bar .progress-fill {
@@ -3921,9 +4010,13 @@ body[data-section="markdown"] .section-progress-bar .progress-fill {
 	background: #5b8dd9;
 }

+body[data-section="javascript"] .section-progress-bar .progress-fill {
+	background: #d4a020;
+}
+
 /* Section page header colors */
 [data-section="css"] .section-hero h1 {
-	color: #d95a8a;
+	color: #9163b8;
 }

 [data-section="html"] .section-hero h1 {
@@ -3938,9 +4031,13 @@ body[data-section="markdown"] .section-progress-bar .progress-fill {
 	color: #5b8dd9;
 }

+[data-section="javascript"] .section-hero h1 {
+	color: #d4a020;
+}
+
 /* Lesson title h2 section colors */
 body[data-section="css"] #lesson-title {
-	color: #d95a8a;
+	color: #9163b8;
 }

 body[data-section="html"] #lesson-title {
@@ -3955,6 +4052,10 @@ body[data-section="markdown"] #lesson-title {
 	color: #5b8dd9;
 }

+body[data-section="javascript"] #lesson-title {
+	color: #d4a020;
+}
+
 /* Section and Reference footer - override landing-footer styles */
 .section-footer.landing-footer,
 .reference-footer.landing-footer {
--- a/tests/unit/lessons.test.js
+++ b/tests/unit/lessons.test.js
@@ -27,7 +27,35 @@ describe("Lessons Config Module", () => {
 			modules.forEach((module) => {
 				module.lessons.forEach((lesson) => {
 					expect(lesson.mode).toBeDefined();
-					expect(["html", "css", "tailwind", "markdown", "playground"]).toContain(lesson.mode);
+					expect(["html", "css", "tailwind", "markdown", "javascript", "playground"]).toContain(lesson.mode);
+				});
+			});
+		});
+	});
+
+	describe("JavaScript modules", () => {
+		test("should include JavaScript modules", async () => {
+			const modules = await loadModules();
+			const moduleIds = modules.map((m) => m.id);
+
+			expect(moduleIds).toContain("js-variables");
+			expect(moduleIds).toContain("js-dom");
+			expect(moduleIds).toContain("js-events");
+		});
+
+		test("JavaScript modules should have correct mode and structure", async () => {
+			const modules = await loadModules();
+			const jsModules = modules.filter((m) => m.mode === "javascript");
+
+			expect(jsModules.length).toBe(3);
+
+			jsModules.forEach((module) => {
+				expect(module.lessons.length).toBeGreaterThanOrEqual(3);
+				module.lessons.forEach((lesson) => {
+					expect(lesson.mode).toBe("javascript");
+					expect(lesson.validations.length).toBeGreaterThan(0);
+					expect(lesson.task).toBeTruthy();
+					expect(lesson.solution).toBeTruthy();
 				});
 			});
 		});
--- a/tests/unit/renderer-extended.test.js
+++ b/tests/unit/renderer-extended.test.js
@@ -1,538 +0,0 @@
-import { describe, test, expect, vi, beforeEach, afterEach } from "vitest";
-import {
-	renderModuleList,
-	renderLesson,
-	renderLevelIndicator,
-	renderDifficultyBadge,
-	showFeedback,
-	clearFeedback,
-	updateActiveLessonInSidebar,
-	computeLessonDifficulty
-} from "../../src/helpers/renderer.js";
-
-// Mock i18n
-vi.mock("../../src/i18n.js", () => ({
-	t: (key, params = {}) => {
-		const translations = {
-			lessonLabel: "Lesson",
-			untitledLesson: "Untitled Lesson",
-			lessonFallback: `Lesson ${params.index || ""}`,
-			difficulty_easy_label: "Easy difficulty",
-			difficulty_medium_label: "Medium difficulty",
-			difficulty_hard_label: "Hard difficulty",
-			difficulty_easy: "Easy",
-			difficulty_medium: "Medium",
-			difficulty_hard: "Hard"
-		};
-		return translations[key] || key;
-	}
-}));
-
-describe("Renderer Extended Coverage", () => {
-	beforeEach(() => {
-		document.body.innerHTML = `
-			<div id="module-list"></div>
-			<div class="lesson-title-row">
-				<h2 id="title"></h2>
-			</div>
-			<div id="description"></div>
-			<div id="task"></div>
-			<div id="preview"></div>
-			<div id="prefix"></div>
-			<textarea id="input"></textarea>
-			<div id="suffix"></div>
-			<div id="level-indicator"></div>
-			<div class="editor-content"></div>
-			<input type="checkbox" id="disable-feedback-toggle" checked>
-		`;
-		localStorage.clear();
-	});
-
-	describe("renderModuleList - progress tracking", () => {
-		test("renderModuleList_CorruptedProgress_HandlesGracefully", () => {
-			const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
-			localStorage.setItem("codeCrispies.progress", "not-valid-json{{{");
-
-			const container = document.getElementById("module-list");
-			const modules = [{ id: "mod1", title: "Module 1", lessons: [{ title: "L1" }] }];
-
-			renderModuleList(container, modules, vi.fn(), vi.fn());
-
-			expect(errorSpy).toHaveBeenCalledWith(expect.stringContaining("Error parsing progress"), expect.anything());
-			// Should still render modules despite parse error
-			expect(container.querySelectorAll(".module-header").length).toBe(1);
-			errorSpy.mockRestore();
-		});
-
-		test("renderModuleList_CompletedModule_AddedCompletedClass", () => {
-			localStorage.setItem(
-				"codeCrispies.progress",
-				JSON.stringify({
-					mod1: { completed: [0, 1], current: 1 }
-				})
-			);
-
-			const container = document.getElementById("module-list");
-			const modules = [{ id: "mod1", title: "Module 1", lessons: [{ title: "L1" }, { title: "L2" }] }];
-
-			renderModuleList(container, modules, vi.fn(), vi.fn());
-
-			const header = container.querySelector(".module-header");
-			expect(header.classList.contains("completed")).toBe(true);
-		});
-
-		test("renderModuleList_PartiallyCompleted_NoCompletedClass", () => {
-			localStorage.setItem(
-				"codeCrispies.progress",
-				JSON.stringify({
-					mod1: { completed: [0], current: 1 }
-				})
-			);
-
-			const container = document.getElementById("module-list");
-			const modules = [{ id: "mod1", title: "Module 1", lessons: [{ title: "L1" }, { title: "L2" }] }];
-
-			renderModuleList(container, modules, vi.fn(), vi.fn());
-
-			const header = container.querySelector(".module-header");
-			expect(header.classList.contains("completed")).toBe(false);
-		});
-
-		test("renderModuleList_CompletedLesson_HasCompletedClass", () => {
-			localStorage.setItem(
-				"codeCrispies.progress",
-				JSON.stringify({
-					mod1: { completed: [0], current: 1 }
-				})
-			);
-
-			const container = document.getElementById("module-list");
-			const modules = [{ id: "mod1", title: "Module 1", lessons: [{ title: "L1" }, { title: "L2" }] }];
-
-			renderModuleList(container, modules, vi.fn(), vi.fn());
-
-			const lessonItems = container.querySelectorAll(".lesson-list-item");
-			expect(lessonItems[0].classList.contains("completed")).toBe(true);
-			expect(lessonItems[1].classList.contains("completed")).toBe(false);
-		});
-
-		test("renderModuleList_CurrentLesson_HasCurrentClass", () => {
-			localStorage.setItem(
-				"codeCrispies.progress",
-				JSON.stringify({
-					mod1: { completed: [0], current: 1 }
-				})
-			);
-
-			const container = document.getElementById("module-list");
-			const modules = [{ id: "mod1", title: "Module 1", lessons: [{ title: "L1" }, { title: "L2" }] }];
-
-			renderModuleList(container, modules, vi.fn(), vi.fn());
-
-			const lessonItems = container.querySelectorAll(".lesson-list-item");
-			expect(lessonItems[1].classList.contains("current")).toBe(true);
-			expect(lessonItems[0].classList.contains("current")).toBe(false);
-		});
-	});
-
-	describe("renderModuleList - welcome/playground always expanded", () => {
-		test("renderModuleList_WelcomeModule_AlwaysExpanded", () => {
-			const container = document.getElementById("module-list");
-			const modules = [{ id: "welcome", title: "Welcome", lessons: [{ title: "Intro" }] }];
-
-			renderModuleList(container, modules, vi.fn(), vi.fn());
-
-			const details = container.querySelector("details.module-container");
-			expect(details.open).toBe(true);
-		});
-
-		test("renderModuleList_PlaygroundModule_AlwaysExpanded", () => {
-			const container = document.getElementById("module-list");
-			const modules = [{ id: "playground", title: "Playground", lessons: [{ title: "Play" }] }];
-
-			renderModuleList(container, modules, vi.fn(), vi.fn());
-
-			const details = container.querySelector("details.module-container");
-			expect(details.open).toBe(true);
-		});
-
-		test("renderModuleList_RegularModule_CollapsedByDefault", () => {
-			const container = document.getElementById("module-list");
-			const modules = [{ id: "flexbox", title: "Flexbox", lessons: [{ title: "L1" }] }];
-
-			renderModuleList(container, modules, vi.fn(), vi.fn());
-
-			const details = container.querySelector("details.module-container");
-			expect(details.open).toBe(false);
-		});
-	});
-
-	describe("renderModuleList - lesson fallback title", () => {
-		test("renderModuleList_NoLessonTitle_UsesFallback", () => {
-			const container = document.getElementById("module-list");
-			const modules = [{ id: "mod1", title: "Module 1", lessons: [{}] }];
-
-			renderModuleList(container, modules, vi.fn(), vi.fn());
-
-			const lessonItem = container.querySelector(".lesson-list-item");
-			expect(lessonItem.textContent).toContain("Lesson");
-		});
-	});
-
-	describe("renderModuleList - click behavior", () => {
-		test("renderModuleList_LessonClick_RemovesActiveFromOthers", () => {
-			const container = document.getElementById("module-list");
-			const modules = [
-				{
-					id: "mod1",
-					title: "Module 1",
-					lessons: [{ title: "L1" }, { title: "L2" }]
-				}
-			];
-			const onSelectLesson = vi.fn();
-
-			renderModuleList(container, modules, vi.fn(), onSelectLesson);
-
-			const lessonItems = container.querySelectorAll(".lesson-list-item");
-
-			// Click first lesson
-			lessonItems[0].click();
-			expect(lessonItems[0].classList.contains("active")).toBe(true);
-			expect(onSelectLesson).toHaveBeenCalledWith("mod1", 0);
-
-			// Click second lesson
-			lessonItems[1].click();
-			expect(lessonItems[0].classList.contains("active")).toBe(false);
-			expect(lessonItems[1].classList.contains("active")).toBe(true);
-			expect(onSelectLesson).toHaveBeenCalledWith("mod1", 1);
-		});
-	});
-
-	describe("renderModuleList - module dataset", () => {
-		test("renderModuleList_DataAttributes_SetCorrectly", () => {
-			const container = document.getElementById("module-list");
-			const modules = [{ id: "flex-mod", title: "Flex Module", lessons: [{ title: "L1" }] }];
-
-			renderModuleList(container, modules, vi.fn(), vi.fn());
-
-			const details = container.querySelector("details.module-container");
-			expect(details.dataset.moduleId).toBe("flex-mod");
-
-			const header = container.querySelector(".module-header");
-			expect(header.dataset.moduleId).toBe("flex-mod");
-
-			const lesson = container.querySelector(".lesson-list-item");
-			expect(lesson.dataset.moduleId).toBe("flex-mod");
-			expect(lesson.dataset.lessonIndex).toBe("0");
-		});
-	});
-
-	describe("renderModuleList - empty lessons", () => {
-		test("renderModuleList_EmptyLessonsArray_RendersModuleOnly", () => {
-			const container = document.getElementById("module-list");
-			const modules = [{ id: "mod1", title: "Module 1", lessons: [] }];
-
-			renderModuleList(container, modules, vi.fn(), vi.fn());
-
-			expect(container.querySelectorAll(".module-header").length).toBe(1);
-			expect(container.querySelectorAll(".lesson-list-item").length).toBe(0);
-		});
-	});
-
-	describe("renderDifficultyBadge", () => {
-		test("renderDifficultyBadge_EasyLesson_CreatesEasyBadge", () => {
-			const container = document.querySelector(".lesson-title-row");
-			const lesson = { codePrefix: ".box {\n  ", solution: "color: red;" };
-
-			renderDifficultyBadge(container, lesson);
-
-			const badge = container.querySelector(".difficulty-badge");
-			expect(badge).not.toBeNull();
-			expect(badge.classList.contains("difficulty-easy")).toBe(true);
-			expect(badge.querySelectorAll(".bar").length).toBe(3);
-		});
-
-		test("renderDifficultyBadge_MediumLesson_CreatesMediumBadge", () => {
-			const container = document.querySelector(".lesson-title-row");
-			const lesson = { codePrefix: "", solution: "p {\n  color: red;\n}" };
-
-			renderDifficultyBadge(container, lesson);
-
-			const badge = container.querySelector(".difficulty-badge");
-			expect(badge.classList.contains("difficulty-medium")).toBe(true);
-		});
-
-		test("renderDifficultyBadge_HardLesson_CreatesHardBadge", () => {
-			const container = document.querySelector(".lesson-title-row");
-			const lesson = { codePrefix: "", solution: ".nav a {\n  color: white;\n}" };
-
-			renderDifficultyBadge(container, lesson);
-
-			const badge = container.querySelector(".difficulty-badge");
-			expect(badge.classList.contains("difficulty-hard")).toBe(true);
-		});
-
-		test("renderDifficultyBadge_CalledTwice_RemovesPreviousBadge", () => {
-			const container = document.querySelector(".lesson-title-row");
-			const lesson1 = { codePrefix: ".box {\n  ", solution: "color: red;" };
-			const lesson2 = { codePrefix: "", solution: ".nav a {\n  color: white;\n}" };
-
-			renderDifficultyBadge(container, lesson1);
-			expect(container.querySelectorAll(".difficulty-wrapper").length).toBe(1);
-
-			renderDifficultyBadge(container, lesson2);
-			expect(container.querySelectorAll(".difficulty-wrapper").length).toBe(1);
-
-			const badge = container.querySelector(".difficulty-badge");
-			expect(badge.classList.contains("difficulty-hard")).toBe(true);
-		});
-
-		test("renderDifficultyBadge_HasAriaLabel", () => {
-			const container = document.querySelector(".lesson-title-row");
-			const lesson = { codePrefix: ".box {", solution: "color: red;" };
-
-			renderDifficultyBadge(container, lesson);
-
-			const badge = container.querySelector(".difficulty-badge");
-			expect(badge.getAttribute("aria-label")).toBeTruthy();
-			expect(badge.getAttribute("title")).toBeTruthy();
-		});
-	});
-
-	describe("showFeedback", () => {
-		test("showFeedback_Success_CreatesSuccessElement", () => {
-			showFeedback(true, "Great job!");
-
-			const feedback = document.querySelector(".feedback-success");
-			expect(feedback).not.toBeNull();
-			expect(feedback.innerHTML).toBe("Great job!");
-		});
-
-		test("showFeedback_Success_InsertedAfterEditorContent", () => {
-			showFeedback(true, "Good!");
-
-			const editorContent = document.querySelector(".editor-content");
-			const feedback = editorContent.nextSibling;
-			expect(feedback).not.toBeNull();
-			expect(feedback.classList.contains("feedback-success")).toBe(true);
-		});
-
-		test("showFeedback_Error_ToggleChecked_ShowsError", () => {
-			const toggle = document.getElementById("disable-feedback-toggle");
-			toggle.checked = true;
-
-			showFeedback(false, "Try again");
-
-			const feedback = document.querySelector(".feedback-error");
-			expect(feedback).not.toBeNull();
-			expect(feedback.innerHTML).toBe("Try again");
-		});
-
-		test("showFeedback_Error_ToggleUnchecked_HidesError", () => {
-			const toggle = document.getElementById("disable-feedback-toggle");
-			toggle.checked = false;
-
-			showFeedback(false, "Try again");
-
-			const feedback = document.querySelector(".feedback-error");
-			expect(feedback).toBeNull();
-		});
-
-		test("showFeedback_Error_AutoClearsAfterTimeout", () => {
-			vi.useFakeTimers();
-			const toggle = document.getElementById("disable-feedback-toggle");
-			toggle.checked = true;
-
-			showFeedback(false, "Error!");
-
-			expect(document.querySelector(".feedback-error")).not.toBeNull();
-
-			vi.advanceTimersByTime(3000);
-
-			expect(document.querySelector(".feedback-error")).toBeNull();
-			vi.useRealTimers();
-		});
-
-		test("showFeedback_Success_DoesNotAutoCleanup", () => {
-			vi.useFakeTimers();
-
-			showFeedback(true, "Good!");
-
-			vi.advanceTimersByTime(5000);
-
-			expect(document.querySelector(".feedback-success")).not.toBeNull();
-			vi.useRealTimers();
-		});
-
-		test("showFeedback_CalledTwice_ClearsPrevious", () => {
-			showFeedback(true, "First");
-			showFeedback(true, "Second");
-
-			const feedbacks = document.querySelectorAll(".feedback-success");
-			expect(feedbacks.length).toBe(1);
-			expect(feedbacks[0].innerHTML).toBe("Second");
-		});
-	});
-
-	describe("clearFeedback", () => {
-		test("clearFeedback_NoExistingFeedback_DoesNotThrow", () => {
-			expect(() => clearFeedback()).not.toThrow();
-		});
-
-		test("clearFeedback_ExistingFeedback_RemovesIt", () => {
-			showFeedback(true, "Test");
-			expect(document.querySelector(".feedback-success")).not.toBeNull();
-
-			clearFeedback();
-			expect(document.querySelector(".feedback-success")).toBeNull();
-		});
-
-		test("clearFeedback_CalledMultipleTimes_Safe", () => {
-			showFeedback(true, "Test");
-			clearFeedback();
-			clearFeedback();
-			clearFeedback();
-			expect(document.querySelector(".feedback-success")).toBeNull();
-		});
-
-		test("clearFeedback_ClearsTimeout", () => {
-			vi.useFakeTimers();
-			const toggle = document.getElementById("disable-feedback-toggle");
-			toggle.checked = true;
-
-			showFeedback(false, "Error");
-			clearFeedback();
-
-			// Advance past the timeout - should not throw
-			vi.advanceTimersByTime(5000);
-
-			vi.useRealTimers();
-		});
-	});
-
-	describe("updateActiveLessonInSidebar", () => {
-		beforeEach(() => {
-			document.body.innerHTML = `
-				<details class="module-container" data-module-id="mod1">
-					<summary class="module-header">Module 1</summary>
-					<div class="lessons-container">
-						<button class="lesson-list-item active" data-module-id="mod1" data-lesson-index="0">L1</button>
-						<button class="lesson-list-item" data-module-id="mod1" data-lesson-index="1">L2</button>
-					</div>
-				</details>
-				<details class="module-container" data-module-id="mod2">
-					<summary class="module-header">Module 2</summary>
-					<div class="lessons-container">
-						<button class="lesson-list-item" data-module-id="mod2" data-lesson-index="0">L1</button>
-					</div>
-				</details>
-			`;
-			// Mock scrollIntoView on all lesson items (not available in jsdom)
-			document.querySelectorAll(".lesson-list-item").forEach((el) => {
-				el.scrollIntoView = vi.fn();
-			});
-		});
-
-		test("updateActiveLessonInSidebar_ValidLesson_ActivatesCorrectItem", () => {
-			updateActiveLessonInSidebar("mod1", 1);
-
-			const items = document.querySelectorAll(".lesson-list-item");
-			expect(items[0].classList.contains("active")).toBe(false);
-			expect(items[1].classList.contains("active")).toBe(true);
-		});
-
-		test("updateActiveLessonInSidebar_DifferentModule_ExpandsParent", () => {
-			const details = document.querySelector('details[data-module-id="mod2"]');
-			expect(details.open).toBe(false);
-
-			updateActiveLessonInSidebar("mod2", 0);
-
-			expect(details.open).toBe(true);
-			const mod2Lesson = document.querySelector('.lesson-list-item[data-module-id="mod2"]');
-			expect(mod2Lesson.classList.contains("active")).toBe(true);
-		});
-
-		test("updateActiveLessonInSidebar_RemovesPreviousActive", () => {
-			const firstItem = document.querySelector('.lesson-list-item[data-module-id="mod1"][data-lesson-index="0"]');
-			expect(firstItem.classList.contains("active")).toBe(true);
-
-			updateActiveLessonInSidebar("mod2", 0);
-
-			expect(firstItem.classList.contains("active")).toBe(false);
-		});
-
-		test("updateActiveLessonInSidebar_NonExistentItem_DoesNotThrow", () => {
-			expect(() => {
-				updateActiveLessonInSidebar("nonexistent", 99);
-			}).not.toThrow();
-
-			// All active classes should still be removed
-			const activeItems = document.querySelectorAll(".lesson-list-item.active");
-			expect(activeItems.length).toBe(0);
-		});
-
-		test("updateActiveLessonInSidebar_ScrollsToLesson", () => {
-			const targetItem = document.querySelector('.lesson-list-item[data-module-id="mod1"][data-lesson-index="1"]');
-
-			updateActiveLessonInSidebar("mod1", 1);
-
-			expect(targetItem.scrollIntoView).toHaveBeenCalledWith({ behavior: "smooth", block: "nearest" });
-		});
-	});
-
-	describe("computeLessonDifficulty - additional edge cases", () => {
-		test("computeLessonDifficulty_NoSolution_ReturnsMedium", () => {
-			expect(computeLessonDifficulty({ codePrefix: "" })).toBe("medium");
-		});
-
-		test("computeLessonDifficulty_SolutionNoBrace_ReturnsMedium", () => {
-			expect(
-				computeLessonDifficulty({
-					codePrefix: "",
-					solution: "color: red;"
-				})
-			).toBe("medium");
-		});
-
-		test("computeLessonDifficulty_CodePrefixWithBrace_IgnoresSolution", () => {
-			expect(
-				computeLessonDifficulty({
-					codePrefix: ".nav a {",
-					solution: ".nav a {\n  color: white;\n}"
-				})
-			).toBe("easy");
-		});
-
-		test("computeLessonDifficulty_NullCodePrefix_ReturnsMedium", () => {
-			expect(computeLessonDifficulty({ codePrefix: null, solution: null })).toBe("medium");
-		});
-	});
-
-	describe("renderLesson - edge cases", () => {
-		test("renderLesson_NullInputEl_DoesNotThrow", () => {
-			const titleEl = document.getElementById("title");
-			const descriptionEl = document.getElementById("description");
-			const taskEl = document.getElementById("task");
-			const previewEl = document.getElementById("preview");
-			const prefixEl = document.getElementById("prefix");
-			const suffixEl = document.getElementById("suffix");
-			const lesson = { title: "Test", description: "Desc", task: "Task" };
-
-			expect(() => {
-				renderLesson(titleEl, descriptionEl, taskEl, previewEl, prefixEl, null, suffixEl, lesson);
-			}).not.toThrow();
-		});
-	});
-
-	describe("renderLevelIndicator - formatting", () => {
-		test("renderLevelIndicator_ContainsLabelSpan", () => {
-			const element = document.getElementById("level-indicator");
-			renderLevelIndicator(element, 5, 12);
-
-			const label = element.querySelector(".level-label");
-			expect(label).not.toBeNull();
-			expect(label.textContent).toBe("Lesson");
-			expect(element.textContent).toContain("5 / 12");
-		});
-	});
-});
--- a/tests/unit/renderer.test.js
+++ b/tests/unit/renderer.test.js
@@ -240,4 +240,67 @@ describe("Renderer Module", () => {
 			expect(computeLessonDifficulty({ codePrefix: null })).toBe("medium");
 		});
 	});
+
+	describe("renderModuleList section headers", () => {
+		const noop = () => {};
+
+		test("inserts section header elements between different category groups", () => {
+			const container = document.getElementById("module-list");
+			const modules = [
+				{ id: "css-basic-selectors", title: "CSS Selectors", lessons: [{ title: "L1" }] },
+				{ id: "colors", title: "Colors", lessons: [{ title: "L1" }] },
+				{ id: "flexbox", title: "Flexbox", lessons: [{ title: "L1" }] },
+				{ id: "html-elements", title: "HTML Elements", lessons: [{ title: "L1" }] }
+			];
+
+			renderModuleList(container, modules, noop, noop);
+
+			const headers = container.querySelectorAll(".module-section-header");
+			expect(headers.length).toBe(3); // CSS Basics, CSS Layout, HTML Structure
+		});
+
+		test("section headers display correct category text", () => {
+			const container = document.getElementById("module-list");
+			const modules = [
+				{ id: "css-basic-selectors", title: "CSS Selectors", lessons: [{ title: "L1" }] },
+				{ id: "flexbox", title: "Flexbox", lessons: [{ title: "L1" }] }
+			];
+
+			renderModuleList(container, modules, noop, noop);
+
+			const headers = container.querySelectorAll(".module-section-header");
+			expect(headers[0].textContent).toBe("CSS Basics");
+			expect(headers[1].textContent).toBe("CSS Layout");
+		});
+
+		test("no section header is inserted between modules in the same category", () => {
+			const container = document.getElementById("module-list");
+			const modules = [
+				{ id: "css-basic-selectors", title: "CSS Selectors", lessons: [{ title: "L1" }] },
+				{ id: "colors", title: "Colors", lessons: [{ title: "L1" }] },
+				{ id: "typography", title: "Typography", lessons: [{ title: "L1" }] }
+			];
+
+			renderModuleList(container, modules, noop, noop);
+
+			const headers = container.querySelectorAll(".module-section-header");
+			expect(headers.length).toBe(1);
+			expect(headers[0].textContent).toBe("CSS Basics");
+		});
+
+		test("Welcome and Outro modules have no section headers", () => {
+			const container = document.getElementById("module-list");
+			const modules = [
+				{ id: "welcome", title: "Welcome", lessons: [{ title: "L1" }] },
+				{ id: "css-basic-selectors", title: "CSS Selectors", lessons: [{ title: "L1" }] },
+				{ id: "playground", title: "Playground", lessons: [{ title: "L1" }] }
+			];
+
+			renderModuleList(container, modules, noop, noop);
+
+			const headers = container.querySelectorAll(".module-section-header");
+			expect(headers.length).toBe(1);
+			expect(headers[0].textContent).toBe("CSS Basics");
+		});
+	});
 });
--- a/tests/unit/router.test.js
+++ b/tests/unit/router.test.js
@@ -1,232 +0,0 @@
-import { describe, test, expect, vi, beforeEach, afterEach } from "vitest";
-import { parseHash, updateHash, navigateTo, replaceHash, replaceTo, getShareableUrl, getSectionIds, RouteType } from "../../src/helpers/router.js";
-
-describe("Router", () => {
-	let pushStateSpy;
-	let replaceStateSpy;
-
-	beforeEach(() => {
-		// Reset hash
-		window.location.hash = "";
-		pushStateSpy = vi.spyOn(history, "pushState").mockImplementation(() => {});
-		replaceStateSpy = vi.spyOn(history, "replaceState").mockImplementation(() => {});
-	});
-
-	afterEach(() => {
-		pushStateSpy.mockRestore();
-		replaceStateSpy.mockRestore();
-	});
-
-	describe("RouteType", () => {
-		test("RouteType_Constants_CorrectValues", () => {
-			expect(RouteType.HOME).toBe("home");
-			expect(RouteType.SECTION).toBe("section");
-			expect(RouteType.REFERENCE).toBe("reference");
-			expect(RouteType.LESSON).toBe("lesson");
-			expect(RouteType.LANGUAGE).toBe("language");
-		});
-	});
-
-	describe("parseHash", () => {
-		test("parseHash_EmptyHash_ReturnsHome", () => {
-			window.location.hash = "";
-			const result = parseHash();
-			expect(result).toEqual({ type: RouteType.HOME });
-		});
-
-		test("parseHash_HashOnly_ReturnsHome", () => {
-			window.location.hash = "#";
-			const result = parseHash();
-			expect(result).toEqual({ type: RouteType.HOME });
-		});
-
-		test.each([
-			["de", "de"],
-			["pl", "pl"],
-			["ar", "ar"],
-			["es", "es"],
-			["en", "en"],
-			["uk", "uk"]
-		])("parseHash_LanguageCode_%s_ReturnsLanguageRoute", (code, expectedLang) => {
-			window.location.hash = `#${code}`;
-			const result = parseHash();
-			expect(result).toEqual({ type: RouteType.LANGUAGE, lang: expectedLang });
-		});
-
-		test.each([
-			["css", "css"],
-			["html", "html"],
-			["markdown", "markdown"]
-		])("parseHash_SectionId_%s_ReturnsSectionRoute", (sectionId, expectedId) => {
-			window.location.hash = `#${sectionId}`;
-			const result = parseHash();
-			expect(result).toEqual({ type: RouteType.SECTION, sectionId: expectedId });
-		});
-
-		test("parseHash_ReferenceWithoutSubpage_ReturnsReferenceRouteNullRefId", () => {
-			window.location.hash = "#reference";
-			const result = parseHash();
-			expect(result).toEqual({ type: RouteType.REFERENCE, refId: null });
-		});
-
-		test("parseHash_ReferenceWithSubpage_ReturnsReferenceRouteWithRefId", () => {
-			window.location.hash = "#reference/css";
-			const result = parseHash();
-			expect(result).toEqual({ type: RouteType.REFERENCE, refId: "css" });
-		});
-
-		test("parseHash_ReferenceWithFlexboxSubpage_ReturnsCorrectRefId", () => {
-			window.location.hash = "#reference/flexbox";
-			const result = parseHash();
-			expect(result).toEqual({ type: RouteType.REFERENCE, refId: "flexbox" });
-		});
-
-		test("parseHash_SingleUnknownSegment_ReturnsLessonWithIndex0", () => {
-			window.location.hash = "#flexbox";
-			const result = parseHash();
-			expect(result).toEqual({ type: RouteType.LESSON, moduleId: "flexbox", lessonIndex: 0 });
-		});
-
-		test("parseHash_ModuleWithLessonIndex_ReturnsLessonRoute", () => {
-			window.location.hash = "#flexbox/2";
-			const result = parseHash();
-			expect(result).toEqual({ type: RouteType.LESSON, moduleId: "flexbox", lessonIndex: 2 });
-		});
-
-		test("parseHash_ModuleWithIndex0_ReturnsLessonRoute", () => {
-			window.location.hash = "#box-model/0";
-			const result = parseHash();
-			expect(result).toEqual({ type: RouteType.LESSON, moduleId: "box-model", lessonIndex: 0 });
-		});
-
-		test("parseHash_NegativeLessonIndex_ReturnsNull", () => {
-			window.location.hash = "#module/-1";
-			const result = parseHash();
-			expect(result).toBeNull();
-		});
-
-		test("parseHash_NonNumericLessonIndex_ReturnsNull", () => {
-			window.location.hash = "#module/abc";
-			const result = parseHash();
-			expect(result).toBeNull();
-		});
-
-		test("parseHash_ThreeOrMoreSegments_ReturnsNull", () => {
-			window.location.hash = "#a/b/c";
-			const result = parseHash();
-			expect(result).toBeNull();
-		});
-
-		test("parseHash_EmptyModuleIdWithIndex_ReturnsNull", () => {
-			// #/0 → parts = ["", "0"], moduleId is empty string (falsy)
-			window.location.hash = "#/0";
-			const result = parseHash();
-			expect(result).toBeNull();
-		});
-	});
-
-	describe("updateHash", () => {
-		test("updateHash_NewHash_CallsPushState", () => {
-			window.location.hash = "";
-			updateHash("flexbox", 2);
-			expect(pushStateSpy).toHaveBeenCalledWith(null, "", "#flexbox/2");
-		});
-
-		test("updateHash_SameHash_DoesNotCallPushState", () => {
-			window.location.hash = "#flexbox/2";
-			updateHash("flexbox", 2);
-			expect(pushStateSpy).not.toHaveBeenCalled();
-		});
-
-		test("updateHash_DifferentModule_CallsPushState", () => {
-			window.location.hash = "#flexbox/0";
-			updateHash("box-model", 0);
-			expect(pushStateSpy).toHaveBeenCalledWith(null, "", "#box-model/0");
-		});
-	});
-
-	describe("navigateTo", () => {
-		test("navigateTo_SectionRoute_CallsPushState", () => {
-			window.location.hash = "";
-			navigateTo("css");
-			expect(pushStateSpy).toHaveBeenCalledWith(null, "", "#css");
-		});
-
-		test("navigateTo_EmptyRoute_NavigatesToHash", () => {
-			window.location.hash = "#something";
-			navigateTo("");
-			expect(pushStateSpy).toHaveBeenCalledWith(null, "", "#");
-		});
-
-		test("navigateTo_SameHash_DoesNotCallPushState", () => {
-			window.location.hash = "#css";
-			navigateTo("css");
-			expect(pushStateSpy).not.toHaveBeenCalled();
-		});
-	});
-
-	describe("replaceHash", () => {
-		test("replaceHash_ValidArgs_CallsReplaceState", () => {
-			replaceHash("flexbox", 3);
-			expect(replaceStateSpy).toHaveBeenCalledWith(null, "", "#flexbox/3");
-		});
-
-		test("replaceHash_Index0_FormatsCorrectly", () => {
-			replaceHash("box-model", 0);
-			expect(replaceStateSpy).toHaveBeenCalledWith(null, "", "#box-model/0");
-		});
-	});
-
-	describe("replaceTo", () => {
-		test("replaceTo_Route_CallsReplaceState", () => {
-			replaceTo("css");
-			expect(replaceStateSpy).toHaveBeenCalledWith(null, "", "#css");
-		});
-
-		test("replaceTo_EmptyRoute_ReplacesToHash", () => {
-			replaceTo("");
-			expect(replaceStateSpy).toHaveBeenCalledWith(null, "", "#");
-		});
-
-		test("replaceTo_ReferenceRoute_FormatsCorrectly", () => {
-			replaceTo("reference/flexbox");
-			expect(replaceStateSpy).toHaveBeenCalledWith(null, "", "#reference/flexbox");
-		});
-	});
-
-	describe("getShareableUrl", () => {
-		test("getShareableUrl_ValidArgs_ReturnsFullUrl", () => {
-			const url = getShareableUrl("flexbox", 2);
-			expect(url).toContain("#flexbox/2");
-			expect(url).toMatch(/^https?:\/\/.+#flexbox\/2$/);
-		});
-
-		test("getShareableUrl_Index0_IncludesIndex", () => {
-			const url = getShareableUrl("box-model", 0);
-			expect(url).toContain("#box-model/0");
-		});
-	});
-
-	describe("getSectionIds", () => {
-		test("getSectionIds_ReturnsCopy_NotOriginalArray", () => {
-			const ids1 = getSectionIds();
-			const ids2 = getSectionIds();
-			expect(ids1).toEqual(ids2);
-			expect(ids1).not.toBe(ids2); // Different references
-		});
-
-		test("getSectionIds_ContainsExpectedSections", () => {
-			const ids = getSectionIds();
-			expect(ids).toContain("css");
-			expect(ids).toContain("html");
-			expect(ids).toContain("markdown");
-		});
-
-		test("getSectionIds_MutatingCopy_DoesNotAffectOriginal", () => {
-			const ids = getSectionIds();
-			ids.push("custom");
-			const freshIds = getSectionIds();
-			expect(freshIds).not.toContain("custom");
-		});
-	});
-});
--- a/tests/unit/sections.test.js
+++ b/tests/unit/sections.test.js
@@ -1,172 +0,0 @@
-import { describe, test, expect } from "vitest";
-import { sections, getSection, getSectionList, getModuleSection, getModulesBySection } from "../../src/config/sections.js";
-
-describe("Sections Config", () => {
-	describe("sections constant", () => {
-		test("sections_AllDefined_HasFourSections", () => {
-			expect(Object.keys(sections)).toHaveLength(4);
-			expect(sections).toHaveProperty("css");
-			expect(sections).toHaveProperty("html");
-			expect(sections).toHaveProperty("tailwind");
-			expect(sections).toHaveProperty("markdown");
-		});
-
-		test("sections_EachSection_HasRequiredFields", () => {
-			for (const [key, section] of Object.entries(sections)) {
-				expect(section.id).toBe(key);
-				expect(section.title).toBeTruthy();
-				expect(section.description).toBeTruthy();
-				expect(section.color).toMatch(/^#[0-9a-f]{6}$/);
-				expect(typeof section.order).toBe("number");
-			}
-		});
-	});
-
-	describe("getSection", () => {
-		test.each([
-			["css", "CSS"],
-			["html", "HTML"],
-			["tailwind", "Tailwind CSS"],
-			["markdown", "Markdown"]
-		])("getSection_%s_ReturnsCorrectSection", (id, expectedTitle) => {
-			const section = getSection(id);
-			expect(section).not.toBeNull();
-			expect(section.id).toBe(id);
-			expect(section.title).toBe(expectedTitle);
-		});
-
-		test("getSection_NonExistentId_ReturnsNull", () => {
-			expect(getSection("nonexistent")).toBeNull();
-		});
-
-		test("getSection_Undefined_ReturnsNull", () => {
-			expect(getSection(undefined)).toBeNull();
-		});
-
-		test("getSection_EmptyString_ReturnsNull", () => {
-			expect(getSection("")).toBeNull();
-		});
-	});
-
-	describe("getSectionList", () => {
-		test("getSectionList_Default_ReturnsSortedByOrder", () => {
-			const list = getSectionList();
-			expect(list).toHaveLength(4);
-
-			// Verify sorted by order
-			for (let i = 1; i < list.length; i++) {
-				expect(list[i].order).toBeGreaterThan(list[i - 1].order);
-			}
-		});
-
-		test("getSectionList_Default_CSSIsFirst", () => {
-			const list = getSectionList();
-			expect(list[0].id).toBe("css");
-		});
-
-		test("getSectionList_Default_MarkdownIsLast", () => {
-			const list = getSectionList();
-			expect(list[list.length - 1].id).toBe("markdown");
-		});
-
-		test("getSectionList_Default_ContainsAllSections", () => {
-			const list = getSectionList();
-			const ids = list.map((s) => s.id);
-			expect(ids).toContain("css");
-			expect(ids).toContain("html");
-			expect(ids).toContain("tailwind");
-			expect(ids).toContain("markdown");
-		});
-	});
-
-	describe("getModuleSection", () => {
-		test("getModuleSection_ExplicitSection_UsesExplicitValue", () => {
-			const module = { mode: "css", section: "html" };
-			expect(getModuleSection(module)).toBe("html");
-		});
-
-		test.each([
-			["css", "css"],
-			["html", "html"],
-			["tailwind", "tailwind"],
-			["markdown", "markdown"]
-		])("getModuleSection_Mode%s_InfersCorrectSection", (mode, expectedSection) => {
-			const module = { mode };
-			expect(getModuleSection(module)).toBe(expectedSection);
-		});
-
-		test("getModuleSection_NoMode_DefaultsToCss", () => {
-			expect(getModuleSection({})).toBe("css");
-		});
-
-		test("getModuleSection_UndefinedMode_DefaultsToCss", () => {
-			expect(getModuleSection({ mode: undefined })).toBe("css");
-		});
-
-		test("getModuleSection_UnknownMode_DefaultsToCss", () => {
-			expect(getModuleSection({ mode: "javascript" })).toBe("css");
-		});
-
-		test("getModuleSection_ExplicitSectionOverridesMode_UsesSection", () => {
-			const module = { mode: "html", section: "tailwind" };
-			expect(getModuleSection(module)).toBe("tailwind");
-		});
-	});
-
-	describe("getModulesBySection", () => {
-		const testModules = [
-			{ id: "css-basics", mode: "css" },
-			{ id: "flexbox", mode: "css" },
-			{ id: "html-elements", mode: "html" },
-			{ id: "tailwind-intro", mode: "tailwind" },
-			{ id: "markdown-basics", mode: "markdown" },
-			{ id: "welcome", mode: "css", excludeFromProgress: true },
-			{ id: "playground", mode: "css", excludeFromProgress: true }
-		];
-
-		test("getModulesBySection_Css_ReturnsCssModules", () => {
-			const result = getModulesBySection(testModules, "css");
-			expect(result).toHaveLength(2);
-			expect(result.map((m) => m.id)).toEqual(["css-basics", "flexbox"]);
-		});
-
-		test("getModulesBySection_Html_ReturnsHtmlModules", () => {
-			const result = getModulesBySection(testModules, "html");
-			expect(result).toHaveLength(1);
-			expect(result[0].id).toBe("html-elements");
-		});
-
-		test("getModulesBySection_Tailwind_ReturnsTailwindModules", () => {
-			const result = getModulesBySection(testModules, "tailwind");
-			expect(result).toHaveLength(1);
-			expect(result[0].id).toBe("tailwind-intro");
-		});
-
-		test("getModulesBySection_ExcludesFromProgress_FiltersOut", () => {
-			const result = getModulesBySection(testModules, "css");
-			const ids = result.map((m) => m.id);
-			expect(ids).not.toContain("welcome");
-			expect(ids).not.toContain("playground");
-		});
-
-		test("getModulesBySection_EmptyModules_ReturnsEmptyArray", () => {
-			const result = getModulesBySection([], "css");
-			expect(result).toEqual([]);
-		});
-
-		test("getModulesBySection_NonExistentSection_ReturnsEmptyArray", () => {
-			const result = getModulesBySection(testModules, "nonexistent");
-			expect(result).toEqual([]);
-		});
-
-		test("getModulesBySection_ExplicitSectionOverride_IncludesModule", () => {
-			const modules = [
-				{ id: "special", mode: "css", section: "html" },
-				{ id: "normal-html", mode: "html" }
-			];
-			const result = getModulesBySection(modules, "html");
-			expect(result).toHaveLength(2);
-			expect(result.map((m) => m.id)).toContain("special");
-		});
-	});
-});
--- a/tests/unit/validator-extended.test.js
+++ b/tests/unit/validator-extended.test.js
@@ -1,735 +0,0 @@
-import { describe, test, expect, vi, beforeEach } from "vitest";
-import { validateUserCode, validateCssCode } from "../../src/helpers/validator.js";
-
-describe("Validator Extended Coverage", () => {
-	describe("validateUserCode mode dispatch", () => {
-		test("validateUserCode_NoMode_DefaultsToCss", () => {
-			const result = validateUserCode("color: red;", {
-				validations: [{ type: "contains", value: "color: red" }]
-			});
-			expect(result.isValid).toBe(true);
-		});
-
-		test("validateUserCode_CssMode_UsesCssValidator", () => {
-			const result = validateUserCode("display: flex;", {
-				mode: "css",
-				validations: [{ type: "contains", value: "display: flex" }]
-			});
-			expect(result.isValid).toBe(true);
-		});
-
-		test("validateUserCode_TailwindMode_UsesTailwindValidator", () => {
-			const result = validateUserCode("flex items-center", {
-				mode: "tailwind",
-				validations: [{ type: "contains_class", value: "flex" }]
-			});
-			expect(result.isValid).toBe(true);
-		});
-
-		test("validateUserCode_HtmlMode_UsesHtmlValidator", () => {
-			const result = validateUserCode("<div>Hello</div>", {
-				mode: "html",
-				validations: [{ type: "element_exists", value: "div" }]
-			});
-			expect(result.isValid).toBe(true);
-		});
-
-		test("validateUserCode_UnknownMode_DefaultsToCss", () => {
-			const result = validateUserCode("color: red;", {
-				mode: "javascript",
-				validations: [{ type: "contains", value: "color: red" }]
-			});
-			expect(result.isValid).toBe(true);
-		});
-
-		test("validateUserCode_NullLesson_Throws", () => {
-			expect(() => validateUserCode("anything", null)).toThrow();
-		});
-
-		test("validateUserCode_UndefinedLesson_Throws", () => {
-			expect(() => validateUserCode("anything", undefined)).toThrow();
-		});
-	});
-
-	describe("Tailwind validation", () => {
-		test("tailwind_ContainsClass_Pass", () => {
-			const result = validateUserCode("flex items-center justify-between", {
-				mode: "tailwind",
-				validations: [{ type: "contains_class", value: "flex" }]
-			});
-			expect(result.isValid).toBe(true);
-			expect(result.validCases).toBe(1);
-		});
-
-		test("tailwind_ContainsClass_Fail_ReturnsMessage", () => {
-			const result = validateUserCode("items-center", {
-				mode: "tailwind",
-				validations: [{ type: "contains_class", value: "flex", message: "Add flex class" }]
-			});
-			expect(result.isValid).toBe(false);
-			expect(result.message).toBe("Add flex class");
-		});
-
-		test("tailwind_ContainsClass_Fail_DefaultMessage", () => {
-			const result = validateUserCode("items-center", {
-				mode: "tailwind",
-				validations: [{ type: "contains_class", value: "flex" }]
-			});
-			expect(result.isValid).toBe(false);
-			expect(result.message).toContain("flex");
-		});
-
-		test("tailwind_ContainsClass_PartialMatch_Fails", () => {
-			// "flex-1" contains "flex" as substring but split should not match
-			const result = validateUserCode("flex-1 items-center", {
-				mode: "tailwind",
-				validations: [{ type: "contains_class", value: "flex" }]
-			});
-			expect(result.isValid).toBe(false);
-		});
-
-		test("tailwind_ContainsPattern_Pass", () => {
-			const result = validateUserCode("text-lg font-bold", {
-				mode: "tailwind",
-				validations: [{ type: "contains_pattern", value: "text-\\w+" }]
-			});
-			expect(result.isValid).toBe(true);
-		});
-
-		test("tailwind_ContainsPattern_Fail_ReturnsMessage", () => {
-			const result = validateUserCode("font-bold", {
-				mode: "tailwind",
-				validations: [{ type: "contains_pattern", value: "text-\\w+", message: "Add text size" }]
-			});
-			expect(result.isValid).toBe(false);
-			expect(result.message).toBe("Add text size");
-		});
-
-		test("tailwind_ContainsPattern_Fail_DefaultMessage", () => {
-			const result = validateUserCode("font-bold", {
-				mode: "tailwind",
-				validations: [{ type: "contains_pattern", value: "text-\\w+" }]
-			});
-			expect(result.isValid).toBe(false);
-			expect(result.message).toContain("pattern");
-		});
-
-		test("tailwind_DefaultType_FallsBackToContains", () => {
-			const result = validateUserCode("flex items-center", {
-				mode: "tailwind",
-				validations: [{ type: "contains", value: "items-center" }]
-			});
-			expect(result.isValid).toBe(true);
-		});
-
-		test("tailwind_NoValidations_ReturnsValid", () => {
-			const result = validateUserCode("flex", { mode: "tailwind" });
-			expect(result.isValid).toBe(true);
-			expect(result.message).toContain("No validations specified");
-		});
-
-		test("tailwind_NullLesson_ReturnsValid", () => {
-			const result = validateUserCode("flex", { mode: "tailwind", validations: null });
-			// validateTailwindClasses checks !lesson.validations
-			expect(result.isValid).toBe(true);
-		});
-
-		test("tailwind_MultipleValidations_AllPass", () => {
-			const result = validateUserCode("flex items-center gap-4", {
-				mode: "tailwind",
-				validations: [
-					{ type: "contains_class", value: "flex" },
-					{ type: "contains_class", value: "items-center" },
-					{ type: "contains_class", value: "gap-4" }
-				]
-			});
-			expect(result.isValid).toBe(true);
-			expect(result.validCases).toBe(3);
-		});
-
-		test("tailwind_MultipleValidations_EarlyReturn", () => {
-			const result = validateUserCode("flex", {
-				mode: "tailwind",
-				validations: [
-					{ type: "contains_class", value: "flex" },
-					{ type: "contains_class", value: "items-center", message: "Missing items-center" },
-					{ type: "contains_class", value: "gap-4" }
-				]
-			});
-			expect(result.isValid).toBe(false);
-			expect(result.message).toBe("Missing items-center");
-			expect(result.validCases).toBe(1);
-		});
-
-		test("tailwind_WhitespaceHandling_LeadingTrailing", () => {
-			const result = validateUserCode("  flex  items-center  ", {
-				mode: "tailwind",
-				validations: [{ type: "contains_class", value: "flex" }]
-			});
-			expect(result.isValid).toBe(true);
-		});
-
-		test("tailwind_EmptyUserClasses_Fails", () => {
-			const result = validateUserCode("", {
-				mode: "tailwind",
-				validations: [{ type: "contains_class", value: "flex" }]
-			});
-			expect(result.isValid).toBe(false);
-		});
-	});
-
-	describe("HTML validation - sibling type", () => {
-		test("sibling_ValidOrder_Passes", () => {
-			const result = validateUserCode("<h1>Title</h1><p>Content</p>", {
-				mode: "html",
-				validations: [{ type: "sibling", value: { first: "h1", then: "p" } }]
-			});
-			expect(result.isValid).toBe(true);
-		});
-
-		test("sibling_NonAdjacentButAfter_Passes", () => {
-			const result = validateUserCode("<h1>Title</h1><span>Middle</span><p>Content</p>", {
-				mode: "html",
-				validations: [{ type: "sibling", value: { first: "h1", then: "p" } }]
-			});
-			expect(result.isValid).toBe(true);
-		});
-
-		test("sibling_WrongOrder_Fails", () => {
-			const result = validateUserCode("<p>Content</p><h1>Title</h1>", {
-				mode: "html",
-				validations: [{ type: "sibling", value: { first: "h1", then: "p" } }]
-			});
-			// h1 is after p, so p is not a sibling after h1 - but wait, h1 exists and p is before h1...
-			// Actually h1 exists. nextElementSibling of h1 is nothing. So it fails.
-			expect(result.isValid).toBe(false);
-		});
-
-		test("sibling_FirstNotFound_Fails", () => {
-			const result = validateUserCode("<p>Content</p>", {
-				mode: "html",
-				validations: [{ type: "sibling", value: { first: "h1", then: "p" }, message: "h1 not found" }]
-			});
-			expect(result.isValid).toBe(false);
-			expect(result.message).toBe("h1 not found");
-		});
-
-		test("sibling_ThenNotFound_Fails", () => {
-			const result = validateUserCode("<h1>Title</h1><span>Only span</span>", {
-				mode: "html",
-				validations: [{ type: "sibling", value: { first: "h1", then: "p" } }]
-			});
-			expect(result.isValid).toBe(false);
-		});
-
-		test("sibling_DefaultMessage_ContainsBothSelectors", () => {
-			const result = validateUserCode("<div>Only div</div>", {
-				mode: "html",
-				validations: [{ type: "sibling", value: { first: "h1", then: "p" } }]
-			});
-			expect(result.isValid).toBe(false);
-			expect(result.message).toContain("p");
-			expect(result.message).toContain("h1");
-		});
-
-		test("sibling_NoFollowingSiblings_Fails", () => {
-			const result = validateUserCode("<div><h1>Title</h1></div>", {
-				mode: "html",
-				validations: [{ type: "sibling", value: { first: "h1", then: "p" } }]
-			});
-			expect(result.isValid).toBe(false);
-		});
-	});
-
-	describe("HTML validation - not_contains type", () => {
-		test("htmlNotContains_AbsentText_Passes", () => {
-			const result = validateUserCode("<p>Hello</p>", {
-				mode: "html",
-				validations: [{ type: "not_contains", value: "class=" }]
-			});
-			expect(result.isValid).toBe(true);
-		});
-
-		test("htmlNotContains_PresentText_Fails", () => {
-			const result = validateUserCode('<p class="red">Hello</p>', {
-				mode: "html",
-				validations: [{ type: "not_contains", value: "class=", message: "Remove classes" }]
-			});
-			expect(result.isValid).toBe(false);
-			expect(result.message).toBe("Remove classes");
-		});
-
-		test("htmlNotContains_DefaultMessage", () => {
-			const result = validateUserCode('<p class="red">Hello</p>', {
-				mode: "html",
-				validations: [{ type: "not_contains", value: "class=" }]
-			});
-			expect(result.isValid).toBe(false);
-			expect(result.message).toContain("should not include");
-		});
-	});
-
-	describe("HTML validation - regex type", () => {
-		test("htmlRegex_MatchingPattern_Passes", () => {
-			const result = validateUserCode('<img src="photo.jpg" alt="A photo">', {
-				mode: "html",
-				validations: [{ type: "regex", value: 'alt="[^"]+"' }]
-			});
-			expect(result.isValid).toBe(true);
-		});
-
-		test("htmlRegex_NonMatchingPattern_Fails", () => {
-			const result = validateUserCode('<img src="photo.jpg">', {
-				mode: "html",
-				validations: [{ type: "regex", value: 'alt="[^"]+"', message: "Add alt text" }]
-			});
-			expect(result.isValid).toBe(false);
-			expect(result.message).toBe("Add alt text");
-		});
-
-		test("htmlRegex_DefaultMessage", () => {
-			const result = validateUserCode("<p>Hello</p>", {
-				mode: "html",
-				validations: [{ type: "regex", value: "<h1>" }]
-			});
-			expect(result.isValid).toBe(false);
-			expect(result.message).toContain("pattern");
-		});
-	});
-
-	describe("HTML validation - unknown type", () => {
-		test("htmlUnknownType_SkipsAndPasses", () => {
-			const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
-			const result = validateUserCode("<p>Hello</p>", {
-				mode: "html",
-				validations: [{ type: "unknown_type", value: "anything" }]
-			});
-			expect(result.isValid).toBe(true);
-			expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("Unknown HTML validation type"));
-			warnSpy.mockRestore();
-		});
-	});
-
-	describe("HTML validation - element_count fallback (>0)", () => {
-		test("elementCount_NoCountNoMin_ChecksGreaterThanZero_Pass", () => {
-			const result = validateUserCode("<ul><li>Item</li></ul>", {
-				mode: "html",
-				validations: [{ type: "element_count", value: { selector: "li" } }]
-			});
-			expect(result.isValid).toBe(true);
-		});
-
-		test("elementCount_NoCountNoMin_NoElements_Fails", () => {
-			const result = validateUserCode("<ul></ul>", {
-				mode: "html",
-				validations: [{ type: "element_count", value: { selector: "li" } }]
-			});
-			expect(result.isValid).toBe(false);
-		});
-	});
-
-	describe("HTML validation - attribute_value edge cases", () => {
-		test("attributeValue_ElementNotFound_Fails", () => {
-			const result = validateUserCode("<p>Hello</p>", {
-				mode: "html",
-				validations: [{ type: "attribute_value", value: { selector: "input", attr: "type", value: "email" } }]
-			});
-			expect(result.isValid).toBe(false);
-		});
-
-		test("attributeValue_NullValue_ChecksExists", () => {
-			const result = validateUserCode('<input data-test="anything">', {
-				mode: "html",
-				validations: [{ type: "attribute_value", value: { selector: "input", attr: "data-test", value: null } }]
-			});
-			expect(result.isValid).toBe(true);
-		});
-
-		test("attributeValue_NullValue_AttributeMissing_Fails", () => {
-			const result = validateUserCode("<input>", {
-				mode: "html",
-				validations: [{ type: "attribute_value", value: { selector: "input", attr: "data-test", value: null } }]
-			});
-			expect(result.isValid).toBe(false);
-		});
-	});
-
-	describe("HTML validation - element_text edge cases", () => {
-		test("elementText_ElementNotFound_Fails", () => {
-			const result = validateUserCode("<p>Hello</p>", {
-				mode: "html",
-				validations: [{ type: "element_text", value: { selector: "button", text: "Submit" } }]
-			});
-			expect(result.isValid).toBe(false);
-		});
-
-		test("elementText_EmptyTextContent_FailsForNonEmptyExpected", () => {
-			const result = validateUserCode("<button></button>", {
-				mode: "html",
-				validations: [{ type: "element_text", value: { selector: "button", text: "Submit" } }]
-			});
-			expect(result.isValid).toBe(false);
-		});
-
-		test("elementText_EmptyExpectedText_MatchesEmptyElement", () => {
-			const result = validateUserCode("<button></button>", {
-				mode: "html",
-				validations: [{ type: "element_text", value: { selector: "button", text: "" } }]
-			});
-			expect(result.isValid).toBe(true);
-		});
-	});
-
-	describe("CSS validation - containsValidation wholeWord option", () => {
-		test("contains_WholeWord_ExactMatch_Passes", () => {
-			const result = validateUserCode("color: red;", {
-				validations: [{ type: "contains", value: "red", options: { wholeWord: true } }]
-			});
-			expect(result.isValid).toBe(true);
-		});
-
-		test("contains_WholeWord_PartialMatch_Fails", () => {
-			const result = validateUserCode("color: darkred;", {
-				validations: [{ type: "contains", value: "red", options: { wholeWord: true } }]
-			});
-			expect(result.isValid).toBe(false);
-		});
-
-		test("contains_WholeWord_CaseInsensitive_Passes", () => {
-			const result = validateUserCode("COLOR: RED;", {
-				validations: [{ type: "contains", value: "red", options: { wholeWord: true, caseSensitive: false } }]
-			});
-			expect(result.isValid).toBe(true);
-		});
-
-		test("contains_WholeWord_SpecialChars_Escaped", () => {
-			// \b doesn't match at non-word chars like ".", so use a word value with special chars around it
-			const result = validateUserCode("value: calc(100% - 20px);", {
-				validations: [{ type: "contains", value: "calc", options: { wholeWord: true } }]
-			});
-			expect(result.isValid).toBe(true);
-
-			// "calc" should not match "recalculate"
-			const failResult = validateUserCode("/* recalculate */", {
-				validations: [{ type: "contains", value: "calc", options: { wholeWord: true } }]
-			});
-			expect(failResult.isValid).toBe(false);
-		});
-	});
-
-	describe("CSS validation - regexValidation options", () => {
-		test("regex_CaseInsensitive_Passes", () => {
-			const result = validateUserCode("COLOR: RED;", {
-				validations: [{ type: "regex", value: "color:\\s*red", options: { caseSensitive: false } }]
-			});
-			expect(result.isValid).toBe(true);
-		});
-
-		test("regex_CaseSensitive_Default_FailsOnCaseMismatch", () => {
-			const result = validateUserCode("COLOR: RED;", {
-				validations: [{ type: "regex", value: "color:\\s*red" }]
-			});
-			expect(result.isValid).toBe(false);
-		});
-
-		test("regex_MultilineFalse_DoesNotMatchAcrossLines", () => {
-			const code = "body {\n  color: red;\n}";
-			// With multiline=false, ^ should not match beginning of each line
-			const result = validateUserCode(code, {
-				validations: [{ type: "regex", value: "^\\s*color", options: { multiline: false } }]
-			});
-			expect(result.isValid).toBe(false);
-		});
-
-		test("regex_MultilineTrue_Default_MatchesEachLine", () => {
-			const code = "body {\n  color: red;\n}";
-			const result = validateUserCode(code, {
-				validations: [{ type: "regex", value: "^\\s*color", options: { multiline: true } }]
-			});
-			expect(result.isValid).toBe(true);
-		});
-
-		test("regex_InvalidPattern_ReturnsFalse", () => {
-			const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
-			const result = validateUserCode("color: red;", {
-				validations: [{ type: "regex", value: "[invalid(regex" }]
-			});
-			expect(result.isValid).toBe(false);
-			expect(errorSpy).toHaveBeenCalled();
-			errorSpy.mockRestore();
-		});
-
-		test("regex_EmptyPattern_MatchesEverything", () => {
-			const result = validateUserCode("color: red;", {
-				validations: [{ type: "regex", value: "" }]
-			});
-			expect(result.isValid).toBe(true);
-		});
-	});
-
-	describe("CSS validation - propertyValueValidation edge cases", () => {
-		test("propertyValue_PropertyNotFound_Fails", () => {
-			const result = validateUserCode("color: red;", {
-				validations: [
-					{
-						type: "property_value",
-						value: { property: "display", expected: "flex" }
-					}
-				]
-			});
-			expect(result.isValid).toBe(false);
-		});
-
-		test("propertyValue_ExactMatch_Passes", () => {
-			const result = validateUserCode("display: flex;", {
-				validations: [
-					{
-						type: "property_value",
-						value: { property: "display", expected: "flex" },
-						options: { exact: true }
-					}
-				]
-			});
-			expect(result.isValid).toBe(true);
-		});
-
-		test("propertyValue_ExactMatch_CaseMismatch_Fails", () => {
-			const result = validateUserCode("display: FLEX;", {
-				validations: [
-					{
-						type: "property_value",
-						value: { property: "display", expected: "flex" },
-						options: { exact: true }
-					}
-				]
-			});
-			expect(result.isValid).toBe(false);
-		});
-
-		test("propertyValue_FlexibleMatch_CaseInsensitive", () => {
-			const result = validateUserCode("display: FLEX;", {
-				validations: [
-					{
-						type: "property_value",
-						value: { property: "display", expected: "flex" }
-					}
-				]
-			});
-			expect(result.isValid).toBe(true);
-		});
-
-		test("propertyValue_ShorthandProperty_Passes", () => {
-			const result = validateUserCode("margin: 10px 20px;", {
-				validations: [
-					{
-						type: "property_value",
-						value: { property: "margin", expected: "10px 20px" }
-					}
-				]
-			});
-			expect(result.isValid).toBe(true);
-		});
-
-		test("propertyValue_DefaultMessage_IncludesPropertyAndExpected", () => {
-			const result = validateUserCode("color: red;", {
-				validations: [
-					{
-						type: "property_value",
-						value: { property: "display", expected: "flex" }
-					}
-				]
-			});
-			expect(result.isValid).toBe(false);
-			expect(result.message).toContain("display");
-			expect(result.message).toContain("flex");
-		});
-	});
-
-	describe("CSS validation - syntaxValidation", () => {
-		test("syntax_ValidCss_Passes", () => {
-			const result = validateUserCode("div { color: red; }", {
-				validations: [{ type: "syntax" }]
-			});
-			expect(result.isValid).toBe(true);
-		});
-	});
-
-	describe("CSS validation - custom edge cases", () => {
-		test("custom_NoValidatorFunction_ReturnsEarlyWithOriginalResult", () => {
-			const result = validateUserCode("color: red;", {
-				validations: [{ type: "custom" }]
-			});
-			// When validator is falsy, validationPassed stays false, but result.isValid was never set to false
-			// The function returns early with the unmodified result (isValid: true)
-			expect(result.isValid).toBe(true);
-		});
-
-		test("custom_NonFunctionValidator_ReturnsEarlyWithOriginalResult", () => {
-			const result = validateUserCode("color: red;", {
-				validations: [{ type: "custom", validator: "not-a-function" }]
-			});
-			// Same behavior: validator check fails, validationPassed stays false, returns unmodified result
-			expect(result.isValid).toBe(true);
-		});
-
-		test("custom_ValidatorReturnsNoMessage_UsesMessage", () => {
-			const result = validateUserCode("color: red;", {
-				validations: [
-					{
-						type: "custom",
-						validator: () => ({ isValid: false }),
-						message: "Fallback message"
-					}
-				]
-			});
-			expect(result.isValid).toBe(false);
-			expect(result.message).toBe("Fallback message");
-		});
-
-		test("custom_ValidatorReturnsNoMessage_NoLessonMessage_DefaultMessage", () => {
-			const result = validateUserCode("color: red;", {
-				validations: [
-					{
-						type: "custom",
-						validator: () => ({ isValid: false })
-					}
-				]
-			});
-			expect(result.isValid).toBe(false);
-			expect(result.message).toContain("does not meet the requirements");
-		});
-	});
-
-	describe("CSS validation - unknown type", () => {
-		test("unknownType_WarnsAndContinues", () => {
-			const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
-			const result = validateUserCode("color: red;", {
-				validations: [
-					{ type: "invented_type", value: "anything" },
-					{ type: "contains", value: "color: red" }
-				]
-			});
-			expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("Unknown validation type"));
-			// The unknown type is skipped (continue), then the next validation passes
-			expect(result.isValid).toBe(true);
-			warnSpy.mockRestore();
-		});
-	});
-
-	describe("CSS validation - empty and whitespace input", () => {
-		test("emptyString_ContainsValidation_Fails", () => {
-			const result = validateUserCode("", {
-				validations: [{ type: "contains", value: "color" }]
-			});
-			expect(result.isValid).toBe(false);
-		});
-
-		test("whitespaceOnly_ContainsValidation_Fails", () => {
-			const result = validateUserCode("   \n\t  ", {
-				validations: [{ type: "contains", value: "color" }]
-			});
-			expect(result.isValid).toBe(false);
-		});
-
-		test("emptyString_NotContains_Passes", () => {
-			const result = validateUserCode("", {
-				validations: [{ type: "not_contains", value: "color" }]
-			});
-			expect(result.isValid).toBe(true);
-		});
-	});
-
-	describe("CSS validation - validCases and totalCases tracking", () => {
-		test("allPassingValidations_ValidCasesEqualsTotalCases", () => {
-			const result = validateUserCode("display: flex; color: red;", {
-				validations: [
-					{ type: "contains", value: "display: flex" },
-					{ type: "contains", value: "color: red" }
-				]
-			});
-			expect(result.isValid).toBe(true);
-			expect(result.validCases).toBe(2);
-			expect(result.totalCases).toBe(2);
-		});
-
-		test("firstValidationFails_ValidCasesIs0", () => {
-			const result = validateUserCode("color: red;", {
-				validations: [
-					{ type: "contains", value: "display: flex" },
-					{ type: "contains", value: "color: red" }
-				]
-			});
-			expect(result.isValid).toBe(false);
-			expect(result.validCases).toBe(0);
-			expect(result.totalCases).toBe(2);
-		});
-
-		test("secondValidationFails_ValidCasesIs1", () => {
-			const result = validateUserCode("display: flex;", {
-				validations: [
-					{ type: "contains", value: "display: flex" },
-					{ type: "contains", value: "color: red" }
-				]
-			});
-			expect(result.isValid).toBe(false);
-			expect(result.validCases).toBe(1);
-			expect(result.totalCases).toBe(2);
-		});
-	});
-
-	describe("CSS validation - special regex metacharacters in contains", () => {
-		test("contains_DotInValue_TreatedAsLiteral", () => {
-			// ".class" should match literally, not any char + "class"
-			const result = validateUserCode(".card { color: red; }", {
-				validations: [{ type: "contains", value: ".card" }]
-			});
-			expect(result.isValid).toBe(true);
-		});
-
-		test("contains_BracketsInValue_TreatedAsLiteral", () => {
-			const result = validateUserCode("content: '[test]';", {
-				validations: [{ type: "contains", value: "[test]" }]
-			});
-			expect(result.isValid).toBe(true);
-		});
-	});
-
-	describe("HTML validation - deeply nested parent_child", () => {
-		test("parentChild_DeeplyNested_Passes", () => {
-			const html = "<div><section><article><p>Deep</p></article></section></div>";
-			const result = validateUserCode(html, {
-				mode: "html",
-				validations: [{ type: "parent_child", value: { parent: "div", child: "p" } }]
-			});
-			expect(result.isValid).toBe(true);
-		});
-	});
-
-	describe("HTML validation - validCases tracking", () => {
-		test("htmlAllPass_ValidCasesEqualsTotal", () => {
-			const result = validateUserCode("<h1>Title</h1><p>Content</p>", {
-				mode: "html",
-				validations: [
-					{ type: "element_exists", value: "h1" },
-					{ type: "element_exists", value: "p" }
-				]
-			});
-			expect(result.isValid).toBe(true);
-			expect(result.validCases).toBe(2);
-			expect(result.totalCases).toBe(2);
-		});
-
-		test("htmlPartialPass_EarlyReturn", () => {
-			const result = validateUserCode("<h1>Title</h1>", {
-				mode: "html",
-				validations: [
-					{ type: "element_exists", value: "h1" },
-					{ type: "element_exists", value: "p", message: "Need paragraph" }
-				]
-			});
-			expect(result.isValid).toBe(false);
-			expect(result.validCases).toBe(1);
-			expect(result.message).toBe("Need paragraph");
-		});
-	});
-});
--- a/tests/unit/validator.test.js
+++ b/tests/unit/validator.test.js
@@ -226,6 +226,69 @@ describe("CSS Validator", () => {
 	});
 });

+describe("JavaScript Validator", () => {
+	describe("validateUserCode with mode: javascript", () => {
+		it("should pass contains validation for correct code", () => {
+			const userCode = 'const name = "Ada";';
+			const lesson = {
+				mode: "javascript",
+				validations: [{ type: "contains", value: "const", message: "Use const" }]
+			};
+
+			const result = validateUserCode(userCode, lesson);
+			expect(result.isValid).toBe(true);
+		});
+
+		it("should fail contains validation for missing code", () => {
+			const userCode = 'var name = "Ada";';
+			const lesson = {
+				mode: "javascript",
+				validations: [{ type: "contains", value: "const", message: "Use const keyword" }]
+			};
+
+			const result = validateUserCode(userCode, lesson);
+			expect(result.isValid).toBe(false);
+			expect(result.message).toBe("Use const keyword");
+		});
+
+		it("should pass regex validation", () => {
+			const userCode = 'const name = "Ada";';
+			const lesson = {
+				mode: "javascript",
+				validations: [{ type: "regex", value: "const\\s+name\\s*=", message: "Declare name" }]
+			};
+
+			const result = validateUserCode(userCode, lesson);
+			expect(result.isValid).toBe(true);
+		});
+
+		it("should handle not_contains validation", () => {
+			const userCode = "let score = 0;";
+			const lesson = {
+				mode: "javascript",
+				validations: [{ type: "not_contains", value: "var", message: "Don't use var" }]
+			};
+
+			const result = validateUserCode(userCode, lesson);
+			expect(result.isValid).toBe(true);
+
+			const failLesson = {
+				mode: "javascript",
+				validations: [{ type: "not_contains", value: "let", message: "Don't use let" }]
+			};
+
+			const failResult = validateUserCode(userCode, failLesson);
+			expect(failResult.isValid).toBe(false);
+		});
+
+		it("should pass with no validations", () => {
+			const result = validateUserCode("const x = 1;", { mode: "javascript" });
+			expect(result.isValid).toBe(true);
+			expect(result.message).toContain("No validations specified");
+		});
+	});
+});
+
 describe("HTML Validator", () => {
 	describe("validateUserCode with mode: html", () => {
 		it("should validate element_exists correctly", () => {
--- a/wave.yaml
+++ b/wave.yaml
@@ -1,376 +0,0 @@
-adapters:
-    claude:
-        binary: claude
-        default_permissions:
-            allowed_tools:
-                - Read
-                - Write
-                - Edit
-                - Bash
-            deny: []
-        mode: headless
-        output_format: json
-        project_files:
-            - CLAUDE.md
-            - .claude/settings.json
-apiVersion: v1
-kind: WaveManifest
-metadata:
-    description: An interactive platform for learning CSS through practical challenges
-    name: code-crispies
-ontology:
-    telos: Interactive self-learning platform for web technologies (CSS, HTML, JavaScript, Markdown)
-personas:
-    auditor:
-        adapter: claude
-        description: Security review and quality assurance
-        model: claude-haiku
-        permissions:
-            allowed_tools:
-                - Read
-                - Write
-                - Grep
-                - Glob
-                - Bash
-            deny:
-                - Edit(*)
-                - Bash(rm -rf /*)
-                - Bash(git push*)
-                - Bash(git commit*)
-        system_prompt_file: .wave/personas/auditor.md
-        temperature: 0.1
-    craftsman:
-        adapter: claude
-        description: Code implementation and testing
-        model: claude-opus
-        permissions:
-            allowed_tools:
-                - Read
-                - Write
-                - Edit
-                - Bash
-            deny:
-                - Bash(rm -rf /*)
-        system_prompt_file: .wave/personas/craftsman.md
-        temperature: 0.7
-    debugger:
-        adapter: claude
-        description: Systematic debugging and root cause analysis
-        model: claude-opus
-        permissions:
-            allowed_tools:
-                - Read
-                - Write
-                - Glob
-                - Grep
-                - Bash
-            deny:
-                - Edit(*)
-                - Bash(rm -rf /*)
-                - Bash(git push*)
-                - Bash(git commit*)
-        system_prompt_file: .wave/personas/debugger.md
-        temperature: 0.1
-    gitea-analyst:
-        adapter: claude
-        description: Gitea issue analysis and scanning
-        permissions:
-            allowed_tools:
-                - Read
-                - Write
-                - Bash(tea issues view*)
-                - Bash(tea issues list*)
-                - Bash(tea releases list*)
-                - Bash(tea pulls view*)
-                - Bash(tea pulls list*)
-                - Bash(tea --version)
-                - Bash(git log*)
-                - Bash(git status*)
-                - Bash(ls *)
-            deny:
-                - Bash(tea issues edit*)
-                - Bash(tea issues create*)
-                - Bash(tea issues close*)
-                - Bash(gh *)
-                - Bash(glab *)
-                - Edit(*)
-        system_prompt_file: .wave/personas/gitea-analyst.md
-        temperature: 0.1
-    gitea-commenter:
-        adapter: claude
-        description: Posts comments on Gitea issues and pull requests
-        permissions:
-            allowed_tools:
-                - Read
-                - Write
-                - Bash(tea issues comment*)
-                - Bash(tea pulls create*)
-                - Bash(tea --version)
-                - Bash(git push*)
-                - Bash(git status*)
-                - Bash(git log*)
-                - Bash(git remote*)
-                - Bash(git diff*)
-            deny:
-                - Bash(tea issues edit*)
-                - Bash(tea issues close*)
-                - Bash(tea pulls merge*)
-                - Bash(tea pulls close*)
-                - Bash(gh *)
-                - Bash(glab *)
-                - Edit(*)
-        system_prompt_file: .wave/personas/gitea-commenter.md
-        temperature: 0.2
-    gitea-enhancer:
-        adapter: claude
-        description: Gitea issue enhancement and improvement
-        permissions:
-            allowed_tools:
-                - Read
-                - Write
-                - Bash(tea issues edit*)
-                - Bash(tea issues view*)
-                - Bash(tea --version)
-            deny:
-                - Bash(tea issues create*)
-                - Bash(tea issues close*)
-                - Bash(gh *)
-                - Bash(glab *)
-                - Edit(*)
-        system_prompt_file: .wave/personas/gitea-enhancer.md
-        temperature: 0.2
-    gitea-scoper:
-        adapter: claude
-        description: Gitea epic analysis, decomposition, and sub-issue creation
-        permissions:
-            allowed_tools:
-                - Read
-                - Write
-                - Bash(tea issues create*)
-                - Bash(tea issues view*)
-                - Bash(tea issues list*)
-                - Bash(tea --version)
-            deny:
-                - Bash(tea issues edit*)
-                - Bash(tea issues close*)
-                - Bash(gh *)
-                - Bash(glab *)
-                - Edit(*)
-        system_prompt_file: .wave/personas/gitea-scoper.md
-        temperature: 0.1
-    implementer:
-        adapter: claude
-        description: Execution specialist for code changes and structured output
-        model: claude-opus
-        permissions:
-            allowed_tools:
-                - Read
-                - Write
-                - Edit
-                - Bash
-                - Glob
-                - Grep
-            deny:
-                - Bash(rm -rf /*)
-                - Bash(sudo *)
-        system_prompt_file: .wave/personas/implementer.md
-        temperature: 0.3
-    navigator:
-        adapter: claude
-        description: Read-only codebase exploration and analysis
-        model: claude-haiku
-        permissions:
-            allowed_tools:
-                - Read
-                - Write
-                - Glob
-                - Grep
-                - Bash(git log*)
-                - Bash(git status*)
-            deny:
-                - Edit(*)
-                - Bash(git commit*)
-                - Bash(git push*)
-        system_prompt_file: .wave/personas/navigator.md
-        temperature: 0.1
-    philosopher:
-        adapter: claude
-        description: Architecture design and specification
-        model: claude-opus
-        permissions:
-            allowed_tools:
-                - Read
-                - Write
-                - Edit
-                - Bash
-                - Glob
-                - Grep
-            deny: []
-        system_prompt_file: .wave/personas/philosopher.md
-        temperature: 0.3
-    planner:
-        adapter: claude
-        description: Task breakdown and planning
-        model: claude-haiku
-        permissions:
-            allowed_tools:
-                - Read
-                - Write
-                - Edit
-                - Bash
-                - Glob
-                - Grep
-            deny: []
-        system_prompt_file: .wave/personas/planner.md
-        temperature: 0.2
-    provocateur:
-        adapter: claude
-        description: Creative challenger for divergent thinking and complexity hunting
-        model: claude-opus
-        permissions:
-            allowed_tools:
-                - Read
-                - Write
-                - Glob
-                - Grep
-                - Bash(wc *)
-                - Bash(git log*)
-                - Bash(git diff*)
-                - Bash(find*)
-                - Bash(ls*)
-            deny:
-                - Edit(*)
-                - Bash(git commit*)
-                - Bash(git push*)
-                - Bash(rm*)
-        system_prompt_file: .wave/personas/provocateur.md
-        temperature: 0.8
-    researcher:
-        adapter: claude
-        description: Deep codebase research and analysis
-        model: claude-opus
-        permissions:
-            allowed_tools:
-                - Read
-                - Write
-                - Edit
-                - Bash
-                - Glob
-                - Grep
-                - WebSearch
-                - WebFetch
-            deny: []
-        system_prompt_file: .wave/personas/researcher.md
-        temperature: 0.1
-    reviewer:
-        adapter: claude
-        description: Code review and quality checks
-        permissions:
-            allowed_tools:
-                - Read
-                - Write
-                - Glob
-                - Grep
-                - Bash
-            deny:
-                - Write(*.go)
-                - Write(*.ts)
-                - Write(*.py)
-                - Write(*.rs)
-                - Edit(*)
-                - Bash(rm *)
-                - Bash(git push*)
-                - Bash(git commit*)
-        system_prompt_file: .wave/personas/reviewer.md
-        temperature: 0.1
-    summarizer:
-        adapter: claude
-        description: Context compaction for relay handoffs
-        model: claude-haiku
-        permissions:
-            allowed_tools:
-                - Read
-                - Write
-                - Edit
-                - Bash
-                - Glob
-                - Grep
-            deny: []
-        system_prompt_file: .wave/personas/summarizer.md
-        temperature: 0
-    supervisor:
-        adapter: claude
-        description: Work supervision and quality evaluation
-        model: claude-opus
-        permissions:
-            allowed_tools:
-                - Read
-                - Write
-                - Glob
-                - Grep
-                - Bash
-            deny:
-                - Edit(*)
-                - Bash(git push*)
-                - Bash(git commit*)
-                - Bash(rm*)
-        system_prompt_file: .wave/personas/supervisor.md
-        temperature: 0.2
-    synthesizer:
-        adapter: claude
-        description: Structured synthesis of analysis findings into actionable JSON proposals
-        permissions:
-            allowed_tools:
-                - Read
-                - Write
-                - Edit
-                - Bash
-                - Glob
-                - Grep
-            deny: []
-        system_prompt_file: .wave/personas/synthesizer.md
-        temperature: 0.2
-    validator:
-        adapter: claude
-        description: Skeptical analysis and verification of findings against source code
-        permissions:
-            allowed_tools:
-                - Read
-                - Write
-                - Glob
-                - Grep
-                - Bash(wc *)
-                - Bash(git log*)
-                - Bash(git diff*)
-            deny:
-                - Edit(*)
-                - Bash(git commit*)
-                - Bash(git push*)
-                - Bash(rm*)
-        system_prompt_file: .wave/personas/validator.md
-        temperature: 0.1
-project:
-    build_command: npm run build
-    flavour: node
-    format_command: npm run format
-    language: javascript
-    lint_command: ""
-    skill: javascript
-    source_glob: '*.{js,jsx,ts,tsx}'
-    test_command: npm test
-runtime:
-    audit:
-        log_all_file_operations: false
-        log_all_tool_calls: true
-        log_dir: .wave/traces/
-    default_timeout_minutes: 30
-    max_concurrent_workers: 5
-    meta_pipeline:
-        max_depth: 2
-        max_total_steps: 20
-        max_total_tokens: 500000
-        timeout_minutes: 60
-    relay:
-        strategy: summarize_to_checkpoint
-        token_threshold_percent: 80
-    workspace_root: .wave/workspaces