public/code-crispies
2
1
Fork 0
Code Issues 7 Pull Requests Actions Activity

feat: restructure learning path with new modules and enhanced explanations

Browse Source 
- Add CSS Colors, Typography, Advanced Selectors, and Grid modules
- Remove deprecated HTML Marquee module from all languages
- Remove redundant div & span lesson from HTML Block & Inline
- Move SVG module from HTML to CSS section
- Enhance first lessons with comprehensive explanations:
  - Flexbox: historical context, axes concept
  - Colors: named colors, background-color explained
  - Grid: comparison to Flexbox, key properties
- Swap header logo highlight (CRISPIES instead of CODE)
- Use English fallbacks for new modules in non-EN languages
- Fix test to include 'playground' mode

New path: 19 modules (~78 lessons) vs previous 16 modules (62 lessons)

🤖 Generated with [Claude Code](https://claude.com/claude-code)
This commit is contained in:
Michael Czechowski
2026-01-13 20:32:45 +01:00
parent 9f09d47088
commit 76e7e40256
14 changed files with 986 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
lessons/03-colors.json
View File

@@ -1,119 +1,87 @@
{
"$schema": "../schemas/code-crispies-module-schema.json",
"id": "colors-backgrounds",
"title": "Colors",
"description": "Learn how to apply and manipulate colors, backgrounds, and graphical fills using CSS properties.",
"title": "CSS Colors",
"description": "Learn how to apply colors to text and backgrounds using CSS properties.",
"difficulty": "beginner",
"lessons": [
{
"id": "colors-1",
"title": "Setting Background Colors",
"description": "Use the <code>background-color</code> property to fill elements with solid colors.",
"task": "Apply a light cyan background (#e0f7fa) to the element with class 'colorbox'.",
"previewHTML": "<div class=\"colorbox\">Background Demo</div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .colorbox { padding: 1rem; }",
"title": "Background Color",
"description": "Color is one of the most powerful tools in web design. It creates visual hierarchy, conveys meaning, and establishes brand identity. CSS provides multiple ways to specify colors.<br><br><strong>CSS named colors:</strong> CSS includes 147 named colors like <kbd>steelblue</kbd>, <kbd>coral</kbd>, <kbd>gold</kbd>, and <kbd>tomato</kbd>. These are easy to remember and read.<br><br><strong>The background-color property:</strong> Sets the fill color behind an element's content and padding areas. The color extends to the edge of the element's border.<br><br><pre>.box {\n background-color: lightblue;\n}</pre>",
"task": "Set <kbd>background-color</kbd> to <kbd>lightcyan</kbd> on <kbd>.box</kbd>.",
"previewHTML": "<div class=\"box\">Background Demo</div>",
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { padding: 1rem; border: 2px solid steelblue; }",
"sandboxCSS": "",
"codePrefix": "/* Set a background color */\n.colorbox {",
"codePrefix": ".box {\n ",
"initialCode": "",
"codeSuffix": "}",
"codeSuffix": "\n}",
"previewContainer": "preview-area",
"validations": [
{ "type": "contains", "value": ".colorbox", "message": "Select <kbd>.colorbox</kbd>", "options": { "caseSensitive": false } },
{
"type": "contains",
"value": "background-color",
"message": "Use <kbd>background-color</kbd> property",
"options": { "caseSensitive": false }
},
{
"type": "property_value",
"value": { "property": "background-color", "expected": "#e0f7fa" },
"message": "Set background-color to <kbd>#e0f7fa</kbd>",
"options": { "exact": true }
"value": { "property": "background-color", "expected": "lightcyan" },
"message": "Set <kbd>background-color: lightcyan</kbd>"
}
]
},
{
"id": "colors-2",
"title": "Text Color and Contrast",
"description": "Apply the <code>color</code> property to control text readability against backgrounds.",
"task": "Set the text color of '.colorbox' to deep blue (#01579b). Ensure good contrast.",
"previewHTML": "<div class=\"colorbox\">Color & Contrast</div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .colorbox { padding: 1rem; background: #e0f7fa; }",
"title": "Text Color",
"description": "The <kbd>color</kbd> property sets the color of text content. Good contrast between text and background is essential for readability.",
"task": "Set <kbd>color</kbd> to <kbd>darkslategray</kbd> on <kbd>.box</kbd>.",
"previewHTML": "<div class=\"box\">Color & Contrast</div>",
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { padding: 1rem; background-color: lightcyan; border: 2px solid steelblue; }",
"sandboxCSS": "",
"codePrefix": "/* Set text color */\n.colorbox {",
"codePrefix": ".box {\n ",
"initialCode": "",
"codeSuffix": "}",
"codeSuffix": "\n}",
"previewContainer": "preview-area",
"validations": [
{ "type": "contains", "value": ".colorbox", "message": "Select <kbd>.colorbox</kbd>", "options": { "caseSensitive": false } },
{ "type": "contains", "value": "color", "message": "Use the <kbd>color</kbd> property", "options": { "caseSensitive": false } },
{
"type": "property_value",
"value": { "property": "color", "expected": "#01579b" },
"message": "Set color to <kbd>#01579b</kbd>",
"options": { "exact": true }
"value": { "property": "color", "expected": "darkslategray" },
"message": "Set <kbd>color: darkslategray</kbd>"
}
]
},
{
"id": "colors-3",
"title": "CSS Gradients",
"description": "Learn to create smooth transitions between colors using linear and radial gradients.",
"task": "Apply a linear gradient background from #ff9a9e to #fad0c4 on an element with class 'gradient-box'.",
"previewHTML": "<div class=\"gradient-box\">Gradient Demo</div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .gradient-box { padding: 1rem; color: white; text-align: center; }",
"title": "Border Color",
"description": "Borders can have their own color using <kbd>border-color</kbd>, or you can specify color in the border shorthand.",
"task": "Set <kbd>border-color</kbd> to <kbd>coral</kbd> on <kbd>.box</kbd>.",
"previewHTML": "<div class=\"box\">Border Color</div>",
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { padding: 1rem; background-color: seashell; border: 4px solid gray; }",
"sandboxCSS": "",
"codePrefix": "/* Set a linear gradient background */\n.gradient-box {",
"codePrefix": ".box {\n ",
"initialCode": "",
"codeSuffix": "}",
"codeSuffix": "\n}",
"previewContainer": "preview-area",
"validations": [
{ "type": "contains", "value": ".gradient-box", "message": "Select <kbd>.gradient-box</kbd>", "options": { "caseSensitive": false } },
{
"type": "contains",
"value": "background-image",
"message": "Use <kbd>background-image</kbd> property",
"options": { "caseSensitive": false }
},
{
"type": "regex",
"value": "linear-gradient\\(.*#ff9a9e.*,.*#fad0c4.*\\)",
"message": "Use <kbd>linear-gradient</kbd> from <kbd>#ff9a9e</kbd> to <kbd>#fad0c4</kbd>",
"options": { "caseSensitive": false }
"type": "property_value",
"value": { "property": "border-color", "expected": "coral" },
"message": "Set <kbd>border-color: coral</kbd>"
}
]
},
{
"id": "colors-4",
"title": "Background Images & Repeat",
"description": "Add images as backgrounds and control repetition and positioning.",
"task": "Set a background image on '.bg-img' using a placeholder URL, center it, and prevent tiling.",
"previewHTML": "<div class=\"bg-img\">Image Background</div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .bg-img { height: 150px; display: flex; align-items: center; justify-content: center; color: white; }",
"title": "Color Formats",
"description": "Besides named colors, CSS supports hex codes (<kbd>#ff6347</kbd>), RGB (<kbd>rgb(255, 99, 71)</kbd>), and HSL (<kbd>hsl(9, 100%, 64%)</kbd>) formats.",
"task": "Set <kbd>background-color</kbd> to <kbd>#f0e68c</kbd> (khaki in hex) on <kbd>.box</kbd>.",
"previewHTML": "<div class=\"box\">Hex Color</div>",
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { padding: 1rem; border: 2px solid olive; }",
"sandboxCSS": "",
"codePrefix": "/* Set background image */\n\n.bg-img {",
"initialCode": " background-image: url('http://placekitten.com/320/320');\n background-position: center; background-repeat: no-repeat;\n ",
"codeSuffix": "}",
"codePrefix": ".box {\n ",
"initialCode": "",
"codeSuffix": "\n}",
"previewContainer": "preview-area",
"validations": [
{
"type": "contains",
"value": "background-image",
"message": "Use <kbd>background-image</kbd> property",
"options": { "caseSensitive": false }
},
{
"type": "contains",
"value": "background-position: center",
"message": "Center the background image with <kbd>background-position: center</kbd>",
"options": { "caseSensitive": false }
},
{
"type": "contains",
"value": "background-repeat: no-repeat",
"message": "Prevent image tiling with <kbd>background-repeat: no-repeat</kbd>",
"options": { "caseSensitive": false }
"type": "property_value",
"value": { "property": "background-color", "expected": "#f0e68c" },
"message": "Set <kbd>background-color: #f0e68c</kbd>"
}
]
}

29
lessons/20-html-elements.json
View File

@@ -63,35 +63,6 @@
"message": "Add an <kbd>&lt;h1&gt;</kbd> heading inside your header"
}
]
},
{
"id": "div-vs-span",
"title": "div & span",
"description": "When you need a container without semantic meaning:<br><br><kbd>&lt;div&gt;</kbd> - Generic block container (for layout/grouping)<br><kbd>&lt;span&gt;</kbd> - Generic inline container (for styling text portions)<br><br>Use semantic elements when possible, div/span when no semantic element fits.",
"task": "Wrap the word 'highlighted' in a <kbd>&lt;span&gt;</kbd> to style it differently. Wrap the whole quote in a <kbd>&lt;div&gt;</kbd>.",
"previewHTML": "",
"previewBaseCSS": "body { font-family: Georgia, serif; padding: 20px; } div { background: #f5f5f5; padding: 15px; border-left: 4px solid #1976d2; } span { background: #fff59d; padding: 2px 4px; }",
"sandboxCSS": "",
"initialCode": "The most highlighted moment was unforgettable.",
"solution": "<div>The most <span>highlighted</span> moment was unforgettable.</div>",
"previewContainer": "preview-area",
"validations": [
{
"type": "element_exists",
"value": "div",
"message": "Wrap everything in a <kbd>&lt;div&gt;</kbd> element"
},
{
"type": "element_exists",
"value": "span",
"message": "Add a <kbd>&lt;span&gt;</kbd> around the word <kbd>highlighted</kbd>"
},
{
"type": "element_text",
"value": { "selector": "span", "text": "highlighted" },
"message": "The <kbd>&lt;span&gt;</kbd> should contain the word <kbd>highlighted</kbd>"
}
]
}
]
}

29
lessons/ar/20-html-elements.json
View File

@@ -63,35 +63,6 @@
"message": "Add an <kbd>&lt;h1&gt;</kbd> heading inside your header"
}
]
},
{
"id": "div-vs-span",
"title": "div & span",
"description": "When you need a container without semantic meaning:<br><br><kbd>&lt;div&gt;</kbd> - Generic block container (for layout/grouping)<br><kbd>&lt;span&gt;</kbd> - Generic inline container (for styling text portions)<br><br>Use semantic elements when possible, div/span when no semantic element fits.",
"task": "Wrap the word 'highlighted' in a <kbd>&lt;span&gt;</kbd> to style it differently. Wrap the whole quote in a <kbd>&lt;div&gt;</kbd>.",
"previewHTML": "",
"previewBaseCSS": "body { font-family: Georgia, serif; padding: 20px; } div { background: #f5f5f5; padding: 15px; border-left: 4px solid #1976d2; } span { background: #fff59d; padding: 2px 4px; }",
"sandboxCSS": "",
"initialCode": "The most highlighted moment was unforgettable.",
"solution": "<div>The most <span>highlighted</span> moment was unforgettable.</div>",
"previewContainer": "preview-area",
"validations": [
{
"type": "element_exists",
"value": "div",
"message": "Wrap everything in a <kbd>&lt;div&gt;</kbd> element"
},
{
"type": "element_exists",
"value": "span",
"message": "Add a <kbd>&lt;span&gt;</kbd> around the word <kbd>highlighted</kbd>"
},
{
"type": "element_text",
"value": { "selector": "span", "text": "highlighted" },
"message": "The <kbd>&lt;span&gt;</kbd> should contain the word <kbd>highlighted</kbd>"
}
]
}
]
}

29
lessons/de/20-html-elements.json
View File

@@ -63,35 +63,6 @@
"message": "Füge eine <kbd>&lt;h1&gt;</kbd>-Überschrift in deinem Header hinzu"
}
]
},
{
"id": "div-vs-span",
"title": "Generische Container: div und span",
"description": "Wenn du einen Container ohne semantische Bedeutung benötigst:<br><br><kbd>&lt;div&gt;</kbd> - Generischer Block-Container (für Layout/Gruppierung)<br><kbd>&lt;span&gt;</kbd> - Generischer Inline-Container (zum Stylen von Textteilen)<br><br>Verwende semantische Elemente wenn möglich, div/span wenn kein semantisches Element passt.",
"task": "Umschließe das Wort 'hervorgehoben' mit einem <kbd>&lt;span&gt;</kbd>, um es anders zu gestalten. Umschließe das gesamte Zitat mit einem <kbd>&lt;div&gt;</kbd>.",
"previewHTML": "",
"previewBaseCSS": "body { font-family: Georgia, serif; padding: 20px; } div { background: #f5f5f5; padding: 15px; border-left: 4px solid #1976d2; } span { background: #fff59d; padding: 2px 4px; }",
"sandboxCSS": "",
"initialCode": "Der hervorgehoben Moment war unvergesslich.",
"solution": "<div>Der <span>hervorgehoben</span> Moment war unvergesslich.</div>",
"previewContainer": "preview-area",
"validations": [
{
"type": "element_exists",
"value": "div",
"message": "Umschließe alles mit einem <kbd>&lt;div&gt;</kbd>-Element"
},
{
"type": "element_exists",
"value": "span",
"message": "Füge ein <kbd>&lt;span&gt;</kbd> um das Wort 'hervorgehoben' hinzu"
},
{
"type": "element_text",
"value": { "selector": "span", "text": "hervorgehoben" },
"message": "Das <kbd>&lt;span&gt;</kbd> sollte das Wort 'hervorgehoben' enthalten"
}
]
}
]
}

29
lessons/es/20-html-elements.json
View File

@@ -63,35 +63,6 @@
"message": "Add an <kbd>&lt;h1&gt;</kbd> heading inside your header"
}
]
},
{
"id": "div-vs-span",
"title": "div & span",
"description": "When you need a container without semantic meaning:<br><br><kbd>&lt;div&gt;</kbd> - Generic block container (for layout/grouping)<br><kbd>&lt;span&gt;</kbd> - Generic inline container (for styling text portions)<br><br>Use semantic elements when possible, div/span when no semantic element fits.",
"task": "Wrap the word 'highlighted' in a <kbd>&lt;span&gt;</kbd> to style it differently. Wrap the whole quote in a <kbd>&lt;div&gt;</kbd>.",
"previewHTML": "",
"previewBaseCSS": "body { font-family: Georgia, serif; padding: 20px; } div { background: #f5f5f5; padding: 15px; border-left: 4px solid #1976d2; } span { background: #fff59d; padding: 2px 4px; }",
"sandboxCSS": "",
"initialCode": "The most highlighted moment was unforgettable.",
"solution": "<div>The most <span>highlighted</span> moment was unforgettable.</div>",
"previewContainer": "preview-area",
"validations": [
{
"type": "element_exists",
"value": "div",
"message": "Wrap everything in a <kbd>&lt;div&gt;</kbd> element"
},
{
"type": "element_exists",
"value": "span",
"message": "Add a <kbd>&lt;span&gt;</kbd> around the word <kbd>highlighted</kbd>"
},
{
"type": "element_text",
"value": { "selector": "span", "text": "highlighted" },
"message": "The <kbd>&lt;span&gt;</kbd> should contain the word <kbd>highlighted</kbd>"
}
]
}
]
}

4
lessons/flexbox.json
View File

@@ -8,8 +8,8 @@
{
"id": "flexbox-1",
"title": "Container",
"description": "Learn how to create a flex container and understand the main and cross axes.<br><br><pre>.container {\n display: flex;\n justify-content: center;\n align-items: center;\n}</pre>",
"task": "Add <kbd>display: flex</kbd> to <kbd>.wrap</kbd> to create a flexbox layout.",
"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>.container {\n display: flex;\n /* Items now flow horizontally */\n}</pre>",
"task": "Add <kbd>display: flex</kbd> to <kbd>.wrap</kbd> to arrange the boxes horizontally.",
"previewHTML": "<div class='wrap'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div></div>",
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; }",
"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; }",

8
lessons/grid.json
View File

@@ -1,15 +1,15 @@
{
"$schema": "../schemas/code-crispies-module-schema.json",
"id": "grid",
"title": "Grid",
"title": "CSS Grid",
"description": "Master the grid layout system for complex two-dimensional layouts",
"difficulty": "intermediate",
"lessons": [
{
"id": "grid-1",
"title": "Grid Container Basics",
"description": "Learn how to create a grid container and define basic grid structures.<br><br><pre>.container {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 1rem;\n}</pre>",
"task": "Create a <kbd>.grid</kbd> with <kbd>display: grid</kbd>, <kbd>grid-template-columns: repeat(3, 1fr)</kbd>, and <kbd>gap: 1rem</kbd>.",
"title": "Grid Container",
"description": "CSS Grid is a two-dimensional layout system, meaning it can handle both columns AND rows simultaneously. While Flexbox excels at one-dimensional layouts (a single row or column), Grid shines when you need precise control over both dimensions.<br><br><strong>How it works:</strong> Set <kbd>display: grid</kbd> on a container. Then define your column structure with <kbd>grid-template-columns</kbd>. The <kbd>fr</kbd> unit represents a fraction of available space.<br><br><strong>Key properties:</strong><br>• <kbd>grid-template-columns</kbd> – Defines column sizes<br>• <kbd>repeat(3, 1fr)</kbd> – Creates 3 equal columns<br>• <kbd>gap</kbd> – Adds spacing between grid cells<br><br><pre>.grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 1rem;\n}</pre>",
"task": "Add <kbd>display: grid</kbd>, <kbd>grid-template-columns: repeat(3, 1fr)</kbd>, and <kbd>gap: 1rem</kbd> to <kbd>.grid</kbd>.",
"previewHTML": "<div class='grid'><div class='item'>1</div><div class='item'>2</div><div class='item'>3</div><div class='item'>4</div><div class='item'>5</div><div class='item'>6</div></div>",
"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .item { background-color: #9b59b6; color: white; padding: 1.25rem; text-align: center; font-weight: bold; }",
"sandboxCSS": ".grid { border: 0.125rem dashed #ccc; padding: 1rem; }",

29
lessons/pl/20-html-elements.json
View File

@@ -63,35 +63,6 @@
"message": "Add an <kbd>&lt;h1&gt;</kbd> heading inside your header"
}
]
},
{
"id": "div-vs-span",
"title": "div & span",
"description": "When you need a container without semantic meaning:<br><br><kbd>&lt;div&gt;</kbd> - Generic block container (for layout/grouping)<br><kbd>&lt;span&gt;</kbd> - Generic inline container (for styling text portions)<br><br>Use semantic elements when possible, div/span when no semantic element fits.",
"task": "Wrap the word 'highlighted' in a <kbd>&lt;span&gt;</kbd> to style it differently. Wrap the whole quote in a <kbd>&lt;div&gt;</kbd>.",
"previewHTML": "",
"previewBaseCSS": "body { font-family: Georgia, serif; padding: 20px; } div { background: #f5f5f5; padding: 15px; border-left: 4px solid #1976d2; } span { background: #fff59d; padding: 2px 4px; }",
"sandboxCSS": "",
"initialCode": "The most highlighted moment was unforgettable.",
"solution": "<div>The most <span>highlighted</span> moment was unforgettable.</div>",
"previewContainer": "preview-area",
"validations": [
{
"type": "element_exists",
"value": "div",
"message": "Wrap everything in a <kbd>&lt;div&gt;</kbd> element"
},
{
"type": "element_exists",
"value": "span",
"message": "Add a <kbd>&lt;span&gt;</kbd> around the word <kbd>highlighted</kbd>"
},
{
"type": "element_text",
"value": { "selector": "span", "text": "highlighted" },
"message": "The <kbd>&lt;span&gt;</kbd> should contain the word <kbd>highlighted</kbd>"
}
]
}
]
}

29
lessons/uk/20-html-elements.json
View File

@@ -63,35 +63,6 @@
"message": "Add an <kbd>&lt;h1&gt;</kbd> heading inside your header"
}
]
},
{
"id": "div-vs-span",
"title": "div & span",
"description": "When you need a container without semantic meaning:<br><br><kbd>&lt;div&gt;</kbd> - Generic block container (for layout/grouping)<br><kbd>&lt;span&gt;</kbd> - Generic inline container (for styling text portions)<br><br>Use semantic elements when possible, div/span when no semantic element fits.",
"task": "Wrap the word 'highlighted' in a <kbd>&lt;span&gt;</kbd> to style it differently. Wrap the whole quote in a <kbd>&lt;div&gt;</kbd>.",
"previewHTML": "",
"previewBaseCSS": "body { font-family: Georgia, serif; padding: 20px; } div { background: #f5f5f5; padding: 15px; border-left: 4px solid #1976d2; } span { background: #fff59d; padding: 2px 4px; }",
"sandboxCSS": "",
"initialCode": "The most highlighted moment was unforgettable.",
"solution": "<div>The most <span>highlighted</span> moment was unforgettable.</div>",
"previewContainer": "preview-area",
"validations": [
{
"type": "element_exists",
"value": "div",
"message": "Wrap everything in a <kbd>&lt;div&gt;</kbd> element"
},
{
"type": "element_exists",
"value": "span",
"message": "Add a <kbd>&lt;span&gt;</kbd> around the word <kbd>highlighted</kbd>"
},
{
"type": "element_text",
"value": { "selector": "span", "text": "highlighted" },
"message": "The <kbd>&lt;span&gt;</kbd> should contain the word <kbd>highlighted</kbd>"
}
]
}
]
}