fix: rewrite validation messages to guide learning instead of revealing answers (#4 )

2026-03-28 20:10:04 +01:00
30 changed files with 245 additions and 927 deletions
--- 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": "Set <kbd>padding: 1rem</kbd>"
+					"message": "Which property adds space between content and the element's edge?"
 				}
 			]
 		},
@@ -43,7 +43,7 @@
 				{
 					"type": "regex",
 					"value": "border-left:\\s*4px\\s+solid\\s+steelblue",
-					"message": "Set <kbd>border-left: 4px solid steelblue</kbd>",
+					"message": "Use the shorthand that sets a border on just one side",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -65,7 +65,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "margin-bottom", "expected": "1rem" },
-					"message": "Set <kbd>margin-bottom: 1rem</kbd>"
+					"message": "Which property pushes neighboring elements away from the bottom?"
 				}
 			]
 		},
@@ -86,7 +86,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "box-sizing", "expected": "border-box" },
-					"message": "Set <kbd>box-sizing: border-box</kbd>"
+					"message": "Which sizing mode includes padding and border in the element's width?"
 				}
 			]
 		},
@@ -107,7 +107,7 @@
 				{
 					"type": "regex",
 					"value": "padding:\\s*8px\\s+1rem",
-					"message": "Set <kbd>padding: 8px 1rem</kbd>",
+					"message": "Use the two-value shorthand: vertical first, then horizontal",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -129,7 +129,7 @@
 				{
 					"type": "regex",
 					"value": "margin:\\s*0\\s+auto",
-					"message": "Set <kbd>margin: 0 auto</kbd>",
+					"message": "Use the shorthand that auto-calculates equal horizontal margins",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -151,7 +151,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "border-radius", "expected": "50%" },
-					"message": "Set <kbd>border-radius: 50%</kbd>"
+					"message": "Which property rounds corners? Think about what percentage makes a circle"
 				}
 			]
 		},
@@ -172,18 +172,18 @@
 				{
 					"type": "property_value",
 					"value": { "property": "padding", "expected": "1rem" },
-					"message": "Set <kbd>padding: 1rem</kbd>"
+					"message": "Add inner spacing to the notification"
 				},
 				{
 					"type": "regex",
 					"value": "border-left:\\s*4px\\s+solid\\s+coral",
-					"message": "Set <kbd>border-left: 4px solid coral</kbd>",
+					"message": "Add a colored accent on the left edge",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "border-radius", "expected": "4px" },
-					"message": "Set <kbd>border-radius: 4px</kbd>"
+					"message": "Soften the corners of the notification"
 				}
 			]
 		}
--- a/lessons/03-colors.json
+++ b/lessons/03-colors.json
@@ -22,7 +22,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "background-color", "expected": "seashell" },
-					"message": "Set <kbd>background-color: seashell</kbd>"
+					"message": "Which property fills the area behind the content?"
 				}
 			]
 		},
@@ -43,7 +43,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "color", "expected": "coral" },
-					"message": "Set <kbd>color: coral</kbd>"
+					"message": "Which property changes the text color?"
 				}
 			]
 		},
@@ -64,7 +64,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "border-color", "expected": "coral" },
-					"message": "Set <kbd>border-color: coral</kbd>"
+					"message": "Which property changes just the border's color without redefining the whole border?"
 				}
 			]
 		},
@@ -85,7 +85,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "background-color", "expected": "#ffd700" },
-					"message": "Set <kbd>background-color: #ffd700</kbd>"
+					"message": "Use the same background property, but with a hex code this time"
 				}
 			]
 		}
--- a/lessons/50-js-variables.json
+++ b/lessons/50-js-variables.json
@@ -1,139 +0,0 @@
-{
-	"$schema": "../schemas/code-crispies-module-schema.json",
-	"id": "js-variables",
-	"title": "JS Variables",
-	"description": "Learn to declare variables with let and const, and work with basic data types in JavaScript.",
-	"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 the default choice for most values in modern JavaScript.",
-			"task": "Declare a constant named <kbd>name</kbd> with the value <kbd>\"Alice\"</kbd>",
-			"previewHTML": "<p id=\"out\">Waiting...</p>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; }",
-			"sandboxCSS": "",
-			"initialCode": "",
-			"codePrefix": "",
-			"codeSuffix": "\ndocument.getElementById('out').textContent = name;",
-			"solution": "const name = \"Alice\";",
-			"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": "Declare a constant called <kbd>name</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "\"Alice\"|'Alice'|`Alice`",
-					"message": "Set the value to <kbd>\"Alice\"</kbd>"
-				}
-			]
-		},
-		{
-			"id": "js-let",
-			"title": "Let Variables",
-			"description": "Use <kbd>let</kbd> to declare variables that you plan to reassign later. Unlike <kbd>const</kbd>, a <kbd>let</kbd> variable can change its value.",
-			"task": "Declare a variable <kbd>count</kbd> with <kbd>let</kbd> set to <kbd>0</kbd>, then reassign it to <kbd>5</kbd>",
-			"previewHTML": "<p id=\"out\">Waiting...</p>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; }",
-			"sandboxCSS": "",
-			"initialCode": "",
-			"codePrefix": "",
-			"codeSuffix": "\ndocument.getElementById('out').textContent = count;",
-			"solution": "let count = 0;\ncount = 5;",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "regex",
-					"value": "let\\s+count\\s*=\\s*0",
-					"message": "Start with <kbd>let count = 0;</kbd>"
-				},
-				{
-					"type": "regex",
-					"value": "count\\s*=\\s*5",
-					"message": "Reassign count to <kbd>5</kbd>"
-				}
-			]
-		},
-		{
-			"id": "js-string",
-			"title": "Template Literals",
-			"description": "Template literals use backticks <kbd>`</kbd> and <kbd>${}</kbd> to embed expressions inside strings. This makes building dynamic text much easier than string concatenation.",
-			"task": "Create a constant <kbd>msg</kbd> using a template literal: <kbd>`Hello, ${name}!`</kbd>",
-			"previewHTML": "<p id=\"out\">Waiting...</p>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; }",
-			"sandboxCSS": "",
-			"initialCode": "",
-			"codePrefix": "const name = \"World\";\n",
-			"codeSuffix": "\ndocument.getElementById('out').textContent = msg;",
-			"solution": "const msg = `Hello, ${name}!`;",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "regex",
-					"value": "const\\s+msg\\s*=",
-					"message": "Declare a constant called <kbd>msg</kbd>"
-				},
-				{
-					"type": "contains",
-					"value": "${name}",
-					"message": "Use <kbd>${name}</kbd> inside backticks to embed the variable"
-				},
-				{
-					"type": "regex",
-					"value": "`.*\\$\\{name\\}.*`",
-					"message": "Wrap the whole string in backticks <kbd>`</kbd>"
-				}
-			]
-		},
-		{
-			"id": "js-array",
-			"title": "Arrays",
-			"description": "Arrays store ordered lists of values in square brackets. Access items by index (starting at 0) and use <kbd>.length</kbd> to get the count.",
-			"task": "Create a constant <kbd>colors</kbd> with an array: <kbd>[\"red\", \"green\", \"blue\"]</kbd>",
-			"previewHTML": "<p id=\"out\">Waiting...</p>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; }",
-			"sandboxCSS": "",
-			"initialCode": "",
-			"codePrefix": "",
-			"codeSuffix": "\ndocument.getElementById('out').textContent = colors.join(', ');",
-			"solution": "const colors = [\"red\", \"green\", \"blue\"];",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "regex",
-					"value": "const\\s+colors\\s*=",
-					"message": "Declare a constant called <kbd>colors</kbd>"
-				},
-				{
-					"type": "contains",
-					"value": "[",
-					"message": "Use square brackets <kbd>[</kbd> to create an array"
-				},
-				{
-					"type": "regex",
-					"value": "(\"red\"|'red'|`red`)",
-					"message": "Include <kbd>\"red\"</kbd> in the array"
-				},
-				{
-					"type": "regex",
-					"value": "(\"green\"|'green'|`green`)",
-					"message": "Include <kbd>\"green\"</kbd> in the array"
-				},
-				{
-					"type": "regex",
-					"value": "(\"blue\"|'blue'|`blue`)",
-					"message": "Include <kbd>\"blue\"</kbd> in the array"
-				}
-			]
-		}
-	]
-}
--- a/lessons/51-js-dom.json
+++ b/lessons/51-js-dom.json
@@ -1,139 +0,0 @@
-{
-	"$schema": "../schemas/code-crispies-module-schema.json",
-	"id": "js-dom",
-	"title": "JS DOM",
-	"description": "Learn to select and modify HTML elements using JavaScript DOM methods like querySelector and textContent.",
-	"mode": "javascript",
-	"difficulty": "beginner",
-	"lessons": [
-		{
-			"id": "js-query",
-			"title": "querySelector",
-			"description": "Use <kbd>document.querySelector()</kbd> to find the first element matching a CSS selector. It returns a single element you can then modify.",
-			"task": "Select the <kbd>h1</kbd> element and store it in a constant called <kbd>title</kbd>",
-			"previewHTML": "<h1>Hello</h1><p id=\"out\">Waiting...</p>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; }",
-			"sandboxCSS": "",
-			"initialCode": "",
-			"codePrefix": "",
-			"codeSuffix": "\ndocument.getElementById('out').textContent = title.tagName;",
-			"solution": "const title = document.querySelector('h1');",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "contains",
-					"value": "querySelector",
-					"message": "Use <kbd>document.querySelector()</kbd> to select an element"
-				},
-				{
-					"type": "regex",
-					"value": "querySelector\\(['\"`]h1['\"`]\\)",
-					"message": "Pass <kbd>'h1'</kbd> as the selector"
-				},
-				{
-					"type": "regex",
-					"value": "const\\s+title\\s*=",
-					"message": "Store the result in a constant called <kbd>title</kbd>"
-				}
-			]
-		},
-		{
-			"id": "js-text",
-			"title": "textContent",
-			"description": "The <kbd>textContent</kbd> property lets you read or change the text inside an element. Setting it replaces all existing text.",
-			"task": "Select the <kbd>.msg</kbd> element and set its <kbd>textContent</kbd> to <kbd>\"Done!\"</kbd>",
-			"previewHTML": "<p class=\"msg\">Waiting...</p>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; }",
-			"sandboxCSS": "",
-			"initialCode": "",
-			"codePrefix": "",
-			"codeSuffix": "",
-			"solution": "document.querySelector('.msg').textContent = \"Done!\";",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "contains",
-					"value": "querySelector",
-					"message": "Use <kbd>querySelector</kbd> to find the element"
-				},
-				{
-					"type": "contains",
-					"value": "textContent",
-					"message": "Use the <kbd>textContent</kbd> property to change the text"
-				},
-				{
-					"type": "regex",
-					"value": "(\"Done!\"|'Done!'|`Done!`)",
-					"message": "Set the text to <kbd>\"Done!\"</kbd>"
-				}
-			]
-		},
-		{
-			"id": "js-style",
-			"title": "Inline Styles",
-			"description": "Access the <kbd>style</kbd> property to set inline CSS on an element. CSS properties with dashes become camelCase: <kbd>background-color</kbd> becomes <kbd>backgroundColor</kbd>.",
-			"task": "Select the <kbd>.box</kbd> element and set its <kbd>style.color</kbd> to <kbd>\"coral\"</kbd>",
-			"previewHTML": "<p class=\"box\">Style me!</p>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { font-size: 1.5rem; font-weight: bold; }",
-			"sandboxCSS": "",
-			"initialCode": "",
-			"codePrefix": "",
-			"codeSuffix": "",
-			"solution": "document.querySelector('.box').style.color = \"coral\";",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "contains",
-					"value": "querySelector",
-					"message": "Use <kbd>querySelector</kbd> to find the element"
-				},
-				{
-					"type": "contains",
-					"value": ".style.",
-					"message": "Use the <kbd>.style</kbd> property to set CSS"
-				},
-				{
-					"type": "regex",
-					"value": "style\\.color\\s*=",
-					"message": "Set <kbd>style.color</kbd> on the element"
-				},
-				{
-					"type": "regex",
-					"value": "(\"coral\"|'coral'|`coral`)",
-					"message": "Set the color to <kbd>\"coral\"</kbd>"
-				}
-			]
-		},
-		{
-			"id": "js-classlist",
-			"title": "classList",
-			"description": "The <kbd>classList</kbd> property provides methods to add, remove, or toggle CSS classes on an element without touching other classes.",
-			"task": "Select the <kbd>.card</kbd> element and add the class <kbd>\"active\"</kbd> using <kbd>classList.add()</kbd>",
-			"previewHTML": "<div class=\"card\">Toggle me</div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .card { padding: 1rem; border: 2px solid gray; border-radius: 8px; } .active { border-color: coral; background: #fff0ee; }",
-			"sandboxCSS": "",
-			"initialCode": "",
-			"codePrefix": "",
-			"codeSuffix": "",
-			"solution": "document.querySelector('.card').classList.add(\"active\");",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "contains",
-					"value": "classList",
-					"message": "Use the <kbd>classList</kbd> property"
-				},
-				{
-					"type": "regex",
-					"value": "classList\\.add\\(",
-					"message": "Call <kbd>classList.add()</kbd> to add a class"
-				},
-				{
-					"type": "regex",
-					"value": "(\"active\"|'active'|`active`)",
-					"message": "Add the class <kbd>\"active\"</kbd>"
-				}
-			]
-		}
-	]
-}
--- a/lessons/52-js-events.json
+++ b/lessons/52-js-events.json
@@ -1,118 +0,0 @@
-{
-	"$schema": "../schemas/code-crispies-module-schema.json",
-	"id": "js-events",
-	"title": "JS Events",
-	"description": "Learn to respond to user interactions with addEventListener for clicks, input changes, and keyboard events.",
-	"mode": "javascript",
-	"difficulty": "beginner",
-	"lessons": [
-		{
-			"id": "js-click",
-			"title": "Click Events",
-			"description": "Use <kbd>addEventListener('click', ...)</kbd> to run code when a user clicks an element. The first argument is the event name, the second is a callback function.",
-			"task": "Add a click listener to the <kbd>.btn</kbd> element that sets the <kbd>.msg</kbd> text to <kbd>\"Clicked!\"</kbd>",
-			"previewHTML": "<button class=\"btn\">Click me</button><p class=\"msg\">Waiting...</p>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .btn { padding: 0.5rem 1rem; border: none; background: steelblue; color: white; border-radius: 4px; cursor: pointer; }",
-			"sandboxCSS": "",
-			"initialCode": "",
-			"codePrefix": "const btn = document.querySelector('.btn');\nconst msg = document.querySelector('.msg');\n\n",
-			"codeSuffix": "",
-			"solution": "btn.addEventListener('click', () => {\n  msg.textContent = \"Clicked!\";\n});",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "contains",
-					"value": "addEventListener",
-					"message": "Use <kbd>addEventListener</kbd> to listen for events"
-				},
-				{
-					"type": "regex",
-					"value": "addEventListener\\(['\"`]click['\"`]",
-					"message": "Listen for the <kbd>'click'</kbd> event"
-				},
-				{
-					"type": "contains",
-					"value": "textContent",
-					"message": "Use <kbd>textContent</kbd> to update the text"
-				},
-				{
-					"type": "regex",
-					"value": "(\"Clicked!\"|'Clicked!'|`Clicked!`)",
-					"message": "Set the text to <kbd>\"Clicked!\"</kbd>"
-				}
-			]
-		},
-		{
-			"id": "js-toggle",
-			"title": "Toggle Classes",
-			"description": "Combine events with <kbd>classList.toggle()</kbd> to switch a class on and off. Each click adds the class if missing, or removes it if present.",
-			"task": "Add a click listener to <kbd>.btn</kbd> that toggles the class <kbd>\"on\"</kbd> on <kbd>.lamp</kbd>",
-			"previewHTML": "<button class=\"btn\">Toggle</button><div class=\"lamp\">💡</div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; text-align: center; } .btn { padding: 0.5rem 1rem; border: none; background: steelblue; color: white; border-radius: 4px; cursor: pointer; } .lamp { font-size: 3rem; margin-top: 1rem; opacity: 0.3; transition: opacity 0.3s; } .lamp.on { opacity: 1; }",
-			"sandboxCSS": "",
-			"initialCode": "",
-			"codePrefix": "const btn = document.querySelector('.btn');\nconst lamp = document.querySelector('.lamp');\n\n",
-			"codeSuffix": "",
-			"solution": "btn.addEventListener('click', () => {\n  lamp.classList.toggle('on');\n});",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "contains",
-					"value": "addEventListener",
-					"message": "Use <kbd>addEventListener</kbd> to listen for events"
-				},
-				{
-					"type": "regex",
-					"value": "addEventListener\\(['\"`]click['\"`]",
-					"message": "Listen for the <kbd>'click'</kbd> event"
-				},
-				{
-					"type": "regex",
-					"value": "classList\\.toggle\\(",
-					"message": "Use <kbd>classList.toggle()</kbd> to switch the class"
-				},
-				{
-					"type": "regex",
-					"value": "(\"on\"|'on'|`on`)",
-					"message": "Toggle the class <kbd>\"on\"</kbd>"
-				}
-			]
-		},
-		{
-			"id": "js-input",
-			"title": "Input Events",
-			"description": "The <kbd>input</kbd> event fires every time the value of an input field changes. Use <kbd>event.target.value</kbd> to read the current value.",
-			"task": "Add an input listener to <kbd>.field</kbd> that sets <kbd>.out</kbd> text to the input's value",
-			"previewHTML": "<input class=\"field\" placeholder=\"Type here...\"><p class=\"out\">Echo: </p>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .field { padding: 0.5rem; border: 2px solid #ccc; border-radius: 4px; font-size: 1rem; width: 100%; box-sizing: border-box; }",
-			"sandboxCSS": "",
-			"initialCode": "",
-			"codePrefix": "const field = document.querySelector('.field');\nconst out = document.querySelector('.out');\n\n",
-			"codeSuffix": "",
-			"solution": "field.addEventListener('input', (event) => {\n  out.textContent = event.target.value;\n});",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "contains",
-					"value": "addEventListener",
-					"message": "Use <kbd>addEventListener</kbd> to listen for events"
-				},
-				{
-					"type": "regex",
-					"value": "addEventListener\\(['\"`]input['\"`]",
-					"message": "Listen for the <kbd>'input'</kbd> event"
-				},
-				{
-					"type": "contains",
-					"value": "textContent",
-					"message": "Use <kbd>textContent</kbd> to update the output"
-				},
-				{
-					"type": "regex",
-					"value": "(event|e|evt)\\.target\\.value",
-					"message": "Read the input value with <kbd>event.target.value</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": "اضبط <kbd>padding: 1rem</kbd>"
+					"message": "أي خاصية تضيف مساحة بين المحتوى وحافة العنصر؟"
 				}
 			]
 		},
@@ -43,7 +43,7 @@
 				{
 					"type": "regex",
 					"value": "border-left:\\s*4px\\s+solid\\s+steelblue",
-					"message": "اضبط <kbd>border-left: 4px solid steelblue</kbd>",
+					"message": "استخدم الاختصار الذي يحدد حداً على جانب واحد فقط",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -65,7 +65,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "margin-bottom", "expected": "1rem" },
-					"message": "اضبط <kbd>margin-bottom: 1rem</kbd>"
+					"message": "أي خاصية تدفع العناصر المجاورة بعيداً من الأسفل؟"
 				}
 			]
 		},
@@ -86,7 +86,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "box-sizing", "expected": "border-box" },
-					"message": "اضبط <kbd>box-sizing: border-box</kbd>"
+					"message": "أي وضع تحجيم يشمل padding والحدود في عرض العنصر؟"
 				}
 			]
 		},
@@ -107,7 +107,7 @@
 				{
 					"type": "regex",
 					"value": "padding:\\s*8px\\s+1rem",
-					"message": "اضبط <kbd>padding: 8px 1rem</kbd>",
+					"message": "استخدم اختصار القيمتين: العمودي أولاً، ثم الأفقي",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -129,7 +129,7 @@
 				{
 					"type": "regex",
 					"value": "margin:\\s*0\\s+auto",
-					"message": "اضبط <kbd>margin: 0 auto</kbd>",
+					"message": "استخدم الاختصار الذي يحسب هوامش أفقية متساوية تلقائياً",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -151,7 +151,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "border-radius", "expected": "50%" },
-					"message": "اضبط <kbd>border-radius: 50%</kbd>"
+					"message": "أي خاصية تدوّر الزوايا؟ فكر في النسبة المئوية التي تصنع دائرة"
 				}
 			]
 		},
@@ -172,18 +172,18 @@
 				{
 					"type": "property_value",
 					"value": { "property": "padding", "expected": "1rem" },
-					"message": "اضبط <kbd>padding: 1rem</kbd>"
+					"message": "أضف مساحة داخلية للإشعار"
 				},
 				{
 					"type": "regex",
 					"value": "border-left:\\s*4px\\s+solid\\s+coral",
-					"message": "اضبط <kbd>border-left: 4px solid coral</kbd>",
+					"message": "أضف لمسة ملونة على الحافة اليسرى",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "border-radius", "expected": "4px" },
-					"message": "اضبط <kbd>border-radius: 4px</kbd>"
+					"message": "نعّم زوايا الإشعار"
 				}
 			]
 		}
--- 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": "Setze <kbd>padding: 1rem</kbd>"
+					"message": "Welche Eigenschaft fügt Abstand zwischen Inhalt und Elementrand hinzu?"
 				}
 			]
 		},
@@ -43,7 +43,7 @@
 				{
 					"type": "regex",
 					"value": "border-left:\\s*4px\\s+solid\\s+steelblue",
-					"message": "Setze <kbd>border-left: 4px solid steelblue</kbd>",
+					"message": "Verwende die Kurzschreibweise, die einen Rahmen auf nur einer Seite setzt",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -65,7 +65,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "margin-bottom", "expected": "1rem" },
-					"message": "Setze <kbd>margin-bottom: 1rem</kbd>"
+					"message": "Welche Eigenschaft schiebt benachbarte Elemente nach unten weg?"
 				}
 			]
 		},
@@ -86,7 +86,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "box-sizing", "expected": "border-box" },
-					"message": "Setze <kbd>box-sizing: border-box</kbd>"
+					"message": "Welcher Größenmodus bezieht Padding und Rahmen in die Breite des Elements ein?"
 				}
 			]
 		},
@@ -107,7 +107,7 @@
 				{
 					"type": "regex",
 					"value": "padding:\\s*8px\\s+1rem",
-					"message": "Setze <kbd>padding: 8px 1rem</kbd>",
+					"message": "Verwende die Zwei-Werte-Kurzschreibweise: vertikal zuerst, dann horizontal",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -129,7 +129,7 @@
 				{
 					"type": "regex",
 					"value": "margin:\\s*0\\s+auto",
-					"message": "Setze <kbd>margin: 0 auto</kbd>",
+					"message": "Verwende die Kurzschreibweise, die gleiche horizontale Abstände automatisch berechnet",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -151,7 +151,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "border-radius", "expected": "50%" },
-					"message": "Setze <kbd>border-radius: 50%</kbd>"
+					"message": "Welche Eigenschaft rundet Ecken? Denke daran, welcher Prozentwert einen Kreis ergibt"
 				}
 			]
 		},
@@ -172,18 +172,18 @@
 				{
 					"type": "property_value",
 					"value": { "property": "padding", "expected": "1rem" },
-					"message": "Setze <kbd>padding: 1rem</kbd>"
+					"message": "Füge inneren Abstand zur Benachrichtigung hinzu"
 				},
 				{
 					"type": "regex",
 					"value": "border-left:\\s*4px\\s+solid\\s+coral",
-					"message": "Setze <kbd>border-left: 4px solid coral</kbd>",
+					"message": "Füge einen farbigen Akzent an der linken Kante hinzu",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "border-radius", "expected": "4px" },
-					"message": "Setze <kbd>border-radius: 4px</kbd>"
+					"message": "Runde die Ecken der Benachrichtigung ab"
 				}
 			]
 		}
--- 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": "Establece <kbd>padding: 1rem</kbd>"
+					"message": "¿Qué propiedad añade espacio entre el contenido y el borde del elemento?"
 				}
 			]
 		},
@@ -43,7 +43,7 @@
 				{
 					"type": "regex",
 					"value": "border-left:\\s*4px\\s+solid\\s+steelblue",
-					"message": "Establece <kbd>border-left: 4px solid steelblue</kbd>",
+					"message": "Usa el atajo que define un borde en un solo lado",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -65,7 +65,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "margin-bottom", "expected": "1rem" },
-					"message": "Establece <kbd>margin-bottom: 1rem</kbd>"
+					"message": "¿Qué propiedad empuja los elementos vecinos hacia abajo?"
 				}
 			]
 		},
@@ -86,7 +86,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "box-sizing", "expected": "border-box" },
-					"message": "Establece <kbd>box-sizing: border-box</kbd>"
+					"message": "¿Qué modo de tamaño incluye padding y borde en el ancho del elemento?"
 				}
 			]
 		},
@@ -107,7 +107,7 @@
 				{
 					"type": "regex",
 					"value": "padding:\\s*8px\\s+1rem",
-					"message": "Establece <kbd>padding: 8px 1rem</kbd>",
+					"message": "Usa el atajo de dos valores: vertical primero, luego horizontal",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -129,7 +129,7 @@
 				{
 					"type": "regex",
 					"value": "margin:\\s*0\\s+auto",
-					"message": "Establece <kbd>margin: 0 auto</kbd>",
+					"message": "Usa el atajo que calcula márgenes horizontales iguales automáticamente",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -151,7 +151,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "border-radius", "expected": "50%" },
-					"message": "Establece <kbd>border-radius: 50%</kbd>"
+					"message": "¿Qué propiedad redondea las esquinas? Piensa en qué porcentaje crea un círculo"
 				}
 			]
 		},
@@ -172,18 +172,18 @@
 				{
 					"type": "property_value",
 					"value": { "property": "padding", "expected": "1rem" },
-					"message": "Establece <kbd>padding: 1rem</kbd>"
+					"message": "Añade espacio interior a la notificación"
 				},
 				{
 					"type": "regex",
 					"value": "border-left:\\s*4px\\s+solid\\s+coral",
-					"message": "Establece <kbd>border-left: 4px solid coral</kbd>",
+					"message": "Añade un acento de color en el borde izquierdo",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "border-radius", "expected": "4px" },
-					"message": "Establece <kbd>border-radius: 4px</kbd>"
+					"message": "Suaviza las esquinas de la notificación"
 				}
 			]
 		}
--- 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": "Ustaw <kbd>padding: 1rem</kbd>"
+					"message": "Która właściwość dodaje przestrzeń między treścią a krawędzią elementu?"
 				}
 			]
 		},
@@ -43,7 +43,7 @@
 				{
 					"type": "regex",
 					"value": "border-left:\\s*4px\\s+solid\\s+steelblue",
-					"message": "Ustaw <kbd>border-left: 4px solid steelblue</kbd>",
+					"message": "Użyj skrótu, który ustawia ramkę tylko po jednej stronie",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -65,7 +65,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "margin-bottom", "expected": "1rem" },
-					"message": "Ustaw <kbd>margin-bottom: 1rem</kbd>"
+					"message": "Która właściwość odpycha sąsiednie elementy w dół?"
 				}
 			]
 		},
@@ -86,7 +86,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "box-sizing", "expected": "border-box" },
-					"message": "Ustaw <kbd>box-sizing: border-box</kbd>"
+					"message": "Który tryb rozmiaru uwzględnia padding i ramkę w szerokości elementu?"
 				}
 			]
 		},
@@ -107,7 +107,7 @@
 				{
 					"type": "regex",
 					"value": "padding:\\s*8px\\s+1rem",
-					"message": "Ustaw <kbd>padding: 8px 1rem</kbd>",
+					"message": "Użyj skrótu dwuwartościowego: najpierw pionowo, potem poziomo",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -129,7 +129,7 @@
 				{
 					"type": "regex",
 					"value": "margin:\\s*0\\s+auto",
-					"message": "Ustaw <kbd>margin: 0 auto</kbd>",
+					"message": "Użyj skrótu, który automatycznie oblicza równe marginesy poziome",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -151,7 +151,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "border-radius", "expected": "50%" },
-					"message": "Ustaw <kbd>border-radius: 50%</kbd>"
+					"message": "Która właściwość zaokrągla rogi? Pomyśl, jaki procent tworzy koło"
 				}
 			]
 		},
@@ -172,18 +172,18 @@
 				{
 					"type": "property_value",
 					"value": { "property": "padding", "expected": "1rem" },
-					"message": "Ustaw <kbd>padding: 1rem</kbd>"
+					"message": "Dodaj wewnętrzny odstęp do powiadomienia"
 				},
 				{
 					"type": "regex",
 					"value": "border-left:\\s*4px\\s+solid\\s+coral",
-					"message": "Ustaw <kbd>border-left: 4px solid coral</kbd>",
+					"message": "Dodaj kolorowy akcent na lewej krawędzi",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "border-radius", "expected": "4px" },
-					"message": "Ustaw <kbd>border-radius: 4px</kbd>"
+					"message": "Wygładź rogi powiadomienia"
 				}
 			]
 		}
--- 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": "Встановіть <kbd>padding: 1rem</kbd>"
+					"message": "Яка властивість додає простір між контентом і краєм елемента?"
 				}
 			]
 		},
@@ -43,7 +43,7 @@
 				{
 					"type": "regex",
 					"value": "border-left:\\s*4px\\s+solid\\s+steelblue",
-					"message": "Встановіть <kbd>border-left: 4px solid steelblue</kbd>",
+					"message": "Використайте скорочення, яке встановлює межу лише з одного боку",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -65,7 +65,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "margin-bottom", "expected": "1rem" },
-					"message": "Встановіть <kbd>margin-bottom: 1rem</kbd>"
+					"message": "Яка властивість відштовхує сусідні елементи знизу?"
 				}
 			]
 		},
@@ -86,7 +86,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "box-sizing", "expected": "border-box" },
-					"message": "Встановіть <kbd>box-sizing: border-box</kbd>"
+					"message": "Який режим розміру включає padding і межу в ширину елемента?"
 				}
 			]
 		},
@@ -107,7 +107,7 @@
 				{
 					"type": "regex",
 					"value": "padding:\\s*8px\\s+1rem",
-					"message": "Встановіть <kbd>padding: 8px 1rem</kbd>",
+					"message": "Використайте скорочення з двома значеннями: спочатку вертикальне, потім горизонтальне",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -129,7 +129,7 @@
 				{
 					"type": "regex",
 					"value": "margin:\\s*0\\s+auto",
-					"message": "Встановіть <kbd>margin: 0 auto</kbd>",
+					"message": "Використайте скорочення, яке автоматично розраховує рівні горизонтальні поля",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -151,7 +151,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "border-radius", "expected": "50%" },
-					"message": "Встановіть <kbd>border-radius: 50%</kbd>"
+					"message": "Яка властивість заокруглює кути? Подумайте, який відсоток створює коло"
 				}
 			]
 		},
@@ -172,18 +172,18 @@
 				{
 					"type": "property_value",
 					"value": { "property": "padding", "expected": "1rem" },
-					"message": "Встановіть <kbd>padding: 1rem</kbd>"
+					"message": "Додайте внутрішній відступ до сповіщення"
 				},
 				{
 					"type": "regex",
 					"value": "border-left:\\s*4px\\s+solid\\s+coral",
-					"message": "Встановіть <kbd>border-left: 4px solid coral</kbd>",
+					"message": "Додайте кольоровий акцент на лівому краю",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "border-radius", "expected": "4px" },
-					"message": "Встановіть <kbd>border-radius: 4px</kbd>"
+					"message": "Згладьте кути сповіщення"
 				}
 			]
 		}
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,6 @@
 				"@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",
@@ -209,9 +208,9 @@
 			}
 		},
 		"node_modules/@codemirror/lang-javascript": {
-			"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==",
+			"version": "6.2.4",
+			"resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.4.tgz",
+			"integrity": "sha512-0WVmhp1QOqZ4Rt6GlVGwKJN3KW7Xh4H2q8ZZNGZaP6lRdxXJzmjm4FqvmOojVj6khWJHIb9sp7U/72W7xQgqAA==",
 			"license": "MIT",
 			"dependencies": {
 				"@codemirror/autocomplete": "^6.0.0",
--- a/package.json
+++ b/package.json
@@ -37,7 +37,6 @@
 		"@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", "javascript"],
-			"description": "Whether this module teaches CSS, Tailwind, HTML, Markdown, or JavaScript"
+			"enum": ["css", "tailwind", "html", "markdown"],
+			"description": "Whether this module teaches CSS, Tailwind, HTML, or Markdown"
 		},
 		"difficulty": {
 			"type": "string",
@@ -60,7 +60,7 @@
 					},
 					"mode": {
 						"type": "string",
-						"enum": ["css", "tailwind", "html", "markdown", "javascript"],
+						"enum": ["css", "tailwind", "html", "markdown"],
 						"description": "Override module mode for individual lessons"
 					},
 					"tailwindConfig": {
--- a/specs/004-validation-messages/plan.md
+++ b/specs/004-validation-messages/plan.md
@@ -0,0 +1,77 @@
+# 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
@@ -0,0 +1,57 @@
+# 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
@@ -0,0 +1,20 @@
+# 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,11 +578,6 @@ 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",
@@ -1498,64 +1493,6 @@ 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 adds interactivity to HTML pages—responding to clicks, updating content dynamically, validating forms, and much more. Every modern browser includes a JavaScript engine, making it the most widely deployed programming language in the world.</p>
-			<p>These beginner lessons cover the fundamentals: declaring variables, selecting and modifying DOM elements, and handling user events. Each concept builds on the previous one, giving you the tools to make any web page interactive.</p>
-		</div>
-
-		<div class="topic-row">
-			<div class="topic-text">
-				<h2>Variables & Data Types</h2>
-				<p>JavaScript uses <code>const</code> for values that won't change and <code>let</code> for values that will. Template literals with backticks make it easy to embed expressions in strings using <code>\${...}</code> syntax.</p>
-				<p>Arrays store ordered collections in square brackets. Objects store key-value pairs in curly braces. These are the building blocks of every JavaScript program.</p>
-				<a href="#js-variables/0" class="topic-link">Learn JS Variables</a>
-			</div>
-			<div class="topic-code">
-				<div class="code-block">
-					<pre><code>const name = "Alice";
-let count = 0;
-count = count + 1;
-
-const msg = \`Hello, \${name}!\`;
-const colors = ["red", "green"];</code></pre>
-				</div>
-			</div>
-		</div>
-
-		<div class="topic-row">
-			<div class="topic-text">
-				<h2>DOM Manipulation</h2>
-				<p>The DOM (Document Object Model) is how JavaScript sees your HTML. Use <code>document.querySelector()</code> to find elements by CSS selector, then modify them with properties like <code>textContent</code>, <code>style</code>, and <code>classList</code>.</p>
-				<a href="#js-dom/0" class="topic-link">Practice DOM Methods</a>
-			</div>
-			<div class="topic-code">
-				<div class="code-block">
-					<pre><code>const title = document.querySelector('h1');
-title.textContent = "New Title";
-title.style.color = "coral";
-title.classList.add("active");</code></pre>
-				</div>
-			</div>
-		</div>
-
-		<div class="topic-row">
-			<div class="topic-text">
-				<h2>Event Handling</h2>
-				<p>Events let your code respond to user actions. Use <code>addEventListener()</code> to run a function when something happens—a click, a keystroke, or an input change. The callback receives an event object with details about what happened.</p>
-				<a href="#js-events/0" class="topic-link">Handle Events</a>
-			</div>
-			<div class="topic-code">
-				<div class="code-block">
-					<pre><code>const btn = document.querySelector('.btn');
-
-btn.addEventListener('click', () => {
-  alert('Clicked!');
-});</code></pre>
-				</div>
-			</div>
-		</div>
 	`
 };

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

 	modules.forEach((module) => {
 		if (module.excludeFromProgress) return;
@@ -2410,7 +2347,7 @@ function renderFooterLessonLinks() {
 * Update progress indicators on landing page
 */
 function updateLandingProgress() {
-	["css", "html", "markdown", "javascript"].forEach((sectionId) => { // tailwind temporarily disabled
+	["css", "html", "markdown"].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,9 +31,6 @@ 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";

@@ -168,10 +165,6 @@ const moduleStoreEN = [
 	htmlTablesEN,
 	// Markdown
 	markdownBasicsEN,
-	// JavaScript
-	jsVariablesEN,
-	jsDomEN,
-	jsEventsEN,
 	// Outro
 	goodbyeEN,
 	playgroundEN
@@ -213,10 +206,6 @@ 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
@@ -258,10 +247,6 @@ 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
@@ -303,10 +288,6 @@ 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
@@ -348,10 +329,6 @@ 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
@@ -393,10 +370,6 @@ 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
--- a/src/config/sections.js
+++ b/src/config/sections.js
@@ -31,13 +31,6 @@ export const sections = {
 		description: "Lightweight markup language for formatting text",
 		color: "#5b8dd9",
 		order: 4
-	},
-	javascript: {
-		id: "javascript",
-		title: "JavaScript",
-		description: "Interactive scripting for web pages",
-		color: "#f0db4f",
-		order: 5
 	}
 };

@@ -72,7 +65,6 @@ 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,7 +2,6 @@
 * Renderer - Handles UI updates for the CSS learning platform
 */
 import { t } from "../i18n.js";
-import { getModuleSection, getSection, getSectionList } from "../config/sections.js";

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

-	// Group modules by section for headers
-	let currentSectionId = null;
-
 	// Create list items for each module
 	modules.forEach((module) => {
-		// Insert section header when section changes
-		const sectionId = getModuleSection(module);
-		if (sectionId !== currentSectionId && !module.excludeFromProgress) {
-			currentSectionId = sectionId;
-			const section = getSection(sectionId);
-			if (section) {
-				const header = document.createElement("h3");
-				header.className = "sidebar-section-header";
-				header.textContent = section.title;
-				header.style.borderLeftColor = section.color;
-				container.appendChild(header);
-			}
-		}
 		// Create module container
 		// Use native <details>/<summary> for expand/collapse
 		const moduleContainer = document.createElement("details");
--- a/src/helpers/router.js
+++ b/src/helpers/router.js
@@ -27,7 +27,7 @@ export const RouteType = {
 /**
 * Valid section IDs
 */
-const SECTIONS = ["css", "html", "markdown", "javascript"]; // tailwind temporarily disabled
+const SECTIONS = ["css", "html", "markdown"]; // tailwind temporarily disabled

 /**
 * Valid language codes for URL-based switching
--- a/src/helpers/validator.js
+++ b/src/helpers/validator.js
@@ -10,8 +10,6 @@ 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);
@@ -206,80 +204,6 @@ 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,7 +8,6 @@ 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";
@@ -182,8 +181,7 @@ export class CodeEditor {
 		const fullDoc = prefix + initialValue + suffix;

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

 		// Create read-only zones decorations
 		const readOnlyMark = Decoration.mark({ class: "cm-readonly-zone" });
--- a/src/impl/LessonEngine.js
+++ b/src/impl/LessonEngine.js
@@ -256,30 +256,6 @@ export class LessonEngine {
          ${htmlWithClasses}
        </body>
      </html>
-    `;
-		} else if (mode === "javascript") {
-			// For JavaScript mode, user code runs as a script against previewHTML
-			const { codePrefix, codeSuffix } = this.currentLesson;
-			const fullScript = `${codePrefix || ""}${this.userCode || ""}${codeSuffix || ""}`;
-			html = `
-      <!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) {
-            document.body.innerHTML += '<pre style="color:red">' + e.message + '</pre>';
-          }
-          </script>
-        </body>
-      </html>
    `;
 		} else if (mode === "markdown") {
 			// For Markdown mode, parse user code to HTML
@@ -406,30 +382,6 @@ export class LessonEngine {
          ${htmlWithClasses}
        </body>
      </html>
-    `;
-		} else if (mode === "javascript") {
-			// For JavaScript mode, solution code runs as a script against previewHTML
-			const { codePrefix, codeSuffix } = this.currentLesson;
-			const fullScript = `${codePrefix || ""}${solutionCode}${codeSuffix || ""}`;
-			html = `
-      <!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) {
-            document.body.innerHTML += '<pre style="color:red">' + e.message + '</pre>';
-          }
-          </script>
-        </body>
-      </html>
    `;
 		} else if (mode === "markdown") {
 			// For Markdown mode, parse solution to HTML
--- a/src/index.html
+++ b/src/index.html
@@ -77,7 +77,6 @@
 						<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">JavaScript</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>
@@ -179,12 +178,6 @@
 								<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: #f0db4f; color: #333">JS</div>
-								<h3>JavaScript</h3>
-								<p data-i18n="landingJsDesc">Interactive scripting for web pages</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.
@@ -201,6 +194,13 @@
 								<h3 data-i18n="comingSoonAchievementsTitle">Achievements</h3>
 								<p data-i18n="comingSoonAchievementsText">Earn badges as you master new skills. Track your learning milestones.</p>
 							</article>
+							<article class="coming-soon-card">
+								<span class="coming-soon-icon">
+									<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg>
+								</span>
+								<h3 data-i18n="comingSoonJsTitle">JavaScript</h3>
+								<p data-i18n="comingSoonJsText">Interactive JavaScript lessons with live code execution and DOM manipulation.</p>
+							</article>
 							<article class="coming-soon-card">
 								<span class="coming-soon-icon">
 									<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
@@ -478,7 +478,6 @@
 					<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="#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
@@ -291,14 +291,6 @@ kbd {
 	background: #5b8dd9;
 }

-[data-section="javascript"] .logo h1 .code-text {
-	color: #d4a017;
-}
-
-[data-section="javascript"] .logo h1 .crispies-text {
-	background: #d4a017;
-}
-
 .help-toggle {
 	width: 28px;
 	height: 28px;
@@ -1252,22 +1244,6 @@ nav.sidebar-section:not(.sidebar-nav-mobile) {
 	animation: milestone-pop 0.5s ease-out;
 }

-/* Sidebar section grouping headers */
-.sidebar-section-header {
-	font-size: 0.7rem;
-	font-weight: 600;
-	text-transform: uppercase;
-	letter-spacing: 0.05em;
-	color: var(--light-text);
-	padding: 0.75rem 0.75rem 0.25rem;
-	margin: 0.5rem 0 0;
-	border-left: 3px solid transparent;
-}
-
-.sidebar-section-header:first-child {
-	margin-top: 0;
-}
-
 /* Module List in Sidebar */
 .module-list {
 	/* No max-height - parent nav.sidebar-section handles overflow */
@@ -3642,14 +3618,6 @@ input:checked + .toggle-slider::before {
 	--section-color-rgb: 91, 141, 217;
 }

-/* JavaScript Section - Gold */
-[data-section="javascript"] {
-	--section-color: #d4a017;
-	--section-color-light: #e0b840;
-	--section-color-dark: #b08610;
-	--section-color-rgb: 212, 160, 23;
-}
-
 /* Apply section colors to nav links */
 .nav-link[data-section="css"] {
 	color: #d95a8a;
@@ -3667,10 +3635,6 @@ input:checked + .toggle-slider::before {
 	color: #5b8dd9;
 }

-.nav-link[data-section="javascript"] {
-	color: #d4a017;
-}
-
 .nav-link[data-section="css"]:hover,
 .nav-link[data-section="css"].active {
 	background: rgba(217, 90, 138, 0.1);
@@ -3695,12 +3659,6 @@ input:checked + .toggle-slider::before {
 	color: #4070b8;
 }

-.nav-link[data-section="javascript"]:hover,
-.nav-link[data-section="javascript"].active {
-	background: rgba(212, 160, 23, 0.1);
-	color: #b08610;
-}
-
 /* Hint section colors */
 body[data-section="css"] .hint {
 	background: rgba(217, 90, 138, 0.3);
@@ -3738,15 +3696,6 @@ body[data-section="markdown"] .hint-progress {
 	background: #5b8dd9;
 }

-body[data-section="javascript"] .hint {
-	background: rgba(212, 160, 23, 0.3);
-	border-left-color: #e0b840;
-}
-
-body[data-section="javascript"] .hint-progress {
-	background: #d4a017;
-}
-
 /* RTL hint border */
 [dir="rtl"] body[data-section="css"] .hint {
 	border-right-color: #a98cd6;
@@ -3764,10 +3713,6 @@ body[data-section="javascript"] .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"],
@@ -3871,24 +3816,6 @@ 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: #d4a017 !important;
-}
-
-body[data-section="javascript"] .cm-editor .cm-cursor,
-body[data-section="javascript"] .cm-editor .cm-dropCursor {
-	border-left-color: #d4a017 !important;
-}
-
-body[data-section="javascript"] .cm-editor .cm-selectionBackground,
-body[data-section="javascript"] .cm-editor .cm-content ::selection {
-	background-color: rgba(212, 160, 23, 0.25) !important;
-}
-
-body[data-section="javascript"] .cm-editor .cm-activeLine {
-	background-color: rgba(212, 160, 23, 0.08) !important;
-}
-
 /* Module pill section colors */
 body[data-section="css"] .module-pill {
 	background: rgba(217, 90, 138, 0.1);
@@ -3926,15 +3853,6 @@ body[data-section="markdown"] .module-pill .level-indicator {
 	color: #4070b8;
 }

-body[data-section="javascript"] .module-pill {
-	background: rgba(212, 160, 23, 0.1);
-	color: #d4a017;
-}
-
-body[data-section="javascript"] .module-pill .level-indicator {
-	color: #b08610;
-}
-
 /* Code block border section colors */
 body[data-section="css"] .code-block {
 	border-color: rgba(217, 90, 138, 0.4);
@@ -3952,10 +3870,6 @@ 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, 23, 0.4);
-}
-
 /* Section code block CodeMirror syntax highlighting overrides */
 body[data-section="css"] .code-block .cm-editor .cm-line {
 	color: #c9c0e0;
@@ -3973,10 +3887,6 @@ body[data-section="markdown"] .code-block .cm-editor .cm-line {
 	color: #c0d0e8;
 }

-body[data-section="javascript"] .code-block .cm-editor .cm-line {
-	color: #e0d8b0;
-}
-
 /* Task instruction bubble section colors */
 [data-section="css"] .task-instruction {
 	background: rgba(217, 90, 138, 0.92);
@@ -3994,10 +3904,6 @@ body[data-section="javascript"] .code-block .cm-editor .cm-line {
 	background: rgba(91, 141, 217, 0.92);
 }

-[data-section="javascript"] .task-instruction {
-	background: rgba(212, 160, 23, 0.92);
-}
-
 /* Section page progress bar colors */
 body[data-section="css"] .section-progress-bar .progress-fill {
 	background: #d95a8a;
@@ -4015,10 +3921,6 @@ body[data-section="markdown"] .section-progress-bar .progress-fill {
 	background: #5b8dd9;
 }

-body[data-section="javascript"] .section-progress-bar .progress-fill {
-	background: #d4a017;
-}
-
 /* Section page header colors */
 [data-section="css"] .section-hero h1 {
 	color: #d95a8a;
@@ -4036,10 +3938,6 @@ body[data-section="javascript"] .section-progress-bar .progress-fill {
 	color: #5b8dd9;
 }

-[data-section="javascript"] .section-hero h1 {
-	color: #d4a017;
-}
-
 /* Lesson title h2 section colors */
 body[data-section="css"] #lesson-title {
 	color: #d95a8a;
@@ -4057,10 +3955,6 @@ body[data-section="markdown"] #lesson-title {
 	color: #5b8dd9;
 }

-body[data-section="javascript"] #lesson-title {
-	color: #d4a017;
-}
-
 /* 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
@@ -19,10 +19,6 @@ describe("Lessons Config Module", () => {
 			expect(moduleIds).toContain("css-basic-selectors");
 			expect(moduleIds).toContain("box-model");
 			expect(moduleIds).toContain("flexbox");
-			// JavaScript modules
-			expect(moduleIds).toContain("js-variables");
-			expect(moduleIds).toContain("js-dom");
-			expect(moduleIds).toContain("js-events");
 		});

 		test("should have mode set on each lesson", async () => {
@@ -31,7 +27,7 @@ describe("Lessons Config Module", () => {
 			modules.forEach((module) => {
 				module.lessons.forEach((lesson) => {
 					expect(lesson.mode).toBeDefined();
-					expect(["html", "css", "tailwind", "markdown", "javascript", "playground"]).toContain(lesson.mode);
+					expect(["html", "css", "tailwind", "markdown", "playground"]).toContain(lesson.mode);
 				});
 			});
 		});
--- a/tests/unit/router.test.js
+++ b/tests/unit/router.test.js
@@ -56,8 +56,7 @@ describe("Router", () => {
 		test.each([
 			["css", "css"],
 			["html", "html"],
-			["markdown", "markdown"],
-			["javascript", "javascript"]
+			["markdown", "markdown"]
 		])("parseHash_SectionId_%s_ReturnsSectionRoute", (sectionId, expectedId) => {
 			window.location.hash = `#${sectionId}`;
 			const result = parseHash();
@@ -221,7 +220,6 @@ describe("Router", () => {
 			expect(ids).toContain("css");
 			expect(ids).toContain("html");
 			expect(ids).toContain("markdown");
-			expect(ids).toContain("javascript");
 		});

 		test("getSectionIds_MutatingCopy_DoesNotAffectOriginal", () => {
--- a/tests/unit/sections.test.js
+++ b/tests/unit/sections.test.js
@@ -3,13 +3,12 @@ import { sections, getSection, getSectionList, getModuleSection, getModulesBySec

 describe("Sections Config", () => {
 	describe("sections constant", () => {
-		test("sections_AllDefined_HasFiveSections", () => {
-			expect(Object.keys(sections)).toHaveLength(5);
+		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");
-			expect(sections).toHaveProperty("javascript");
 		});

 		test("sections_EachSection_HasRequiredFields", () => {
@@ -28,8 +27,7 @@ describe("Sections Config", () => {
 			["css", "CSS"],
 			["html", "HTML"],
 			["tailwind", "Tailwind CSS"],
-			["markdown", "Markdown"],
-			["javascript", "JavaScript"]
+			["markdown", "Markdown"]
 		])("getSection_%s_ReturnsCorrectSection", (id, expectedTitle) => {
 			const section = getSection(id);
 			expect(section).not.toBeNull();
@@ -53,7 +51,7 @@ describe("Sections Config", () => {
 	describe("getSectionList", () => {
 		test("getSectionList_Default_ReturnsSortedByOrder", () => {
 			const list = getSectionList();
-			expect(list).toHaveLength(5);
+			expect(list).toHaveLength(4);

 			// Verify sorted by order
 			for (let i = 1; i < list.length; i++) {
@@ -66,9 +64,9 @@ describe("Sections Config", () => {
 			expect(list[0].id).toBe("css");
 		});

-		test("getSectionList_Default_JavaScriptIsLast", () => {
+		test("getSectionList_Default_MarkdownIsLast", () => {
 			const list = getSectionList();
-			expect(list[list.length - 1].id).toBe("javascript");
+			expect(list[list.length - 1].id).toBe("markdown");
 		});

 		test("getSectionList_Default_ContainsAllSections", () => {
@@ -78,7 +76,6 @@ describe("Sections Config", () => {
 			expect(ids).toContain("html");
 			expect(ids).toContain("tailwind");
 			expect(ids).toContain("markdown");
-			expect(ids).toContain("javascript");
 		});
 	});

@@ -92,8 +89,7 @@ describe("Sections Config", () => {
 			["css", "css"],
 			["html", "html"],
 			["tailwind", "tailwind"],
-			["markdown", "markdown"],
-			["javascript", "javascript"]
+			["markdown", "markdown"]
 		])("getModuleSection_Mode%s_InfersCorrectSection", (mode, expectedSection) => {
 			const module = { mode };
 			expect(getModuleSection(module)).toBe(expectedSection);
@@ -108,7 +104,7 @@ describe("Sections Config", () => {
 		});

 		test("getModuleSection_UnknownMode_DefaultsToCss", () => {
-			expect(getModuleSection({ mode: "unknown-mode" })).toBe("css");
+			expect(getModuleSection({ mode: "javascript" })).toBe("css");
 		});

 		test("getModuleSection_ExplicitSectionOverridesMode_UsesSection", () => {
--- a/tests/unit/validator.test.js
+++ b/tests/unit/validator.test.js
@@ -226,86 +226,6 @@ describe("CSS Validator", () => {
 	});
 });

-describe("JavaScript Validator", () => {
-	describe("validateUserCode with mode: javascript", () => {
-		it("should validate contains correctly for JavaScript", () => {
-			const userCode = 'const name = "Alice";';
-			const lesson = {
-				mode: "javascript",
-				validations: [{ type: "contains", value: "const", message: "Use const" }]
-			};
-
-			const result = validateUserCode(userCode, lesson);
-			expect(result.isValid).toBe(true);
-			expect(result.validCases).toBe(1);
-		});
-
-		it("should validate regex correctly for JavaScript", () => {
-			const userCode = 'const name = "Alice";';
-			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 validate not_contains correctly for JavaScript", () => {
-			const userCode = 'const name = "Alice";';
-			const lesson = {
-				mode: "javascript",
-				validations: [{ type: "not_contains", value: "var", message: "Do not use var" }]
-			};
-
-			const result = validateUserCode(userCode, lesson);
-			expect(result.isValid).toBe(true);
-
-			const failCode = 'var name = "Alice";';
-			const failResult = validateUserCode(failCode, lesson);
-			expect(failResult.isValid).toBe(false);
-			expect(failResult.message).toBe("Do not use var");
-		});
-
-		it("should return invalid for missing code", () => {
-			const userCode = "";
-			const lesson = {
-				mode: "javascript",
-				validations: [{ type: "contains", value: "const", message: "Use const" }]
-			};
-
-			const result = validateUserCode(userCode, lesson);
-			expect(result.isValid).toBe(false);
-		});
-
-		it("should pass with no validations", () => {
-			const userCode = 'const x = 1;';
-			const lesson = { mode: "javascript" };
-
-			const result = validateUserCode(userCode, lesson);
-			expect(result.isValid).toBe(true);
-			expect(result.message).toContain("No validations specified");
-		});
-
-		it("should handle multiple validations with early return on failure", () => {
-			const userCode = 'const name = "Alice";';
-			const lesson = {
-				mode: "javascript",
-				validations: [
-					{ type: "contains", value: "const", message: "Use const" },
-					{ type: "contains", value: "let", message: "Use let" },
-					{ type: "contains", value: "name", message: "Declare name" }
-				]
-			};
-
-			const result = validateUserCode(userCode, lesson);
-			expect(result.isValid).toBe(false);
-			expect(result.message).toBe("Use let");
-			expect(result.validCases).toBe(1);
-		});
-	});
-});
-
 describe("HTML Validator", () => {
 	describe("validateUserCode with mode: html", () => {
 		it("should validate element_exists correctly", () => {