feat: restructure learning path with new modules and enhanced explanations
- 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:
@@ -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>"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user