Michael Czechowski
fb33930328
- 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)
263 lines
12 KiB
JSON
263 lines
12 KiB
JSON
{
|
||
"$schema": "../schemas/code-crispies-module-schema.json",
|
||
"id": "grid",
|
||
"title": "CSS Grid",
|
||
"description": "Master the grid layout system for complex two-dimensional layouts",
|
||
"difficulty": "intermediate",
|
||
"lessons": [
|
||
{
|
||
"id": "grid-1",
|
||
"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; }",
|
||
"codePrefix": "/* Create a grid with 3 equal columns and gap */\n",
|
||
"initialCode": "",
|
||
"codeSuffix": "",
|
||
"solution": ".grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 1rem;\n}",
|
||
"previewContainer": "preview-area",
|
||
"validations": [
|
||
{
|
||
"type": "contains",
|
||
"value": ".grid",
|
||
"message": "Use the <kbd>.grid</kbd> class selector",
|
||
"options": {
|
||
"caseSensitive": false
|
||
}
|
||
},
|
||
{
|
||
"type": "property_value",
|
||
"value": {
|
||
"property": "display",
|
||
"expected": "grid"
|
||
},
|
||
"message": "Set <kbd>display: grid</kbd>",
|
||
"options": {
|
||
"exact": true
|
||
}
|
||
},
|
||
{
|
||
"type": "regex",
|
||
"value": "grid-template-columns:\\s*repeat\\(\\s*3\\s*,\\s*1fr\\s*\\)",
|
||
"message": "Set <kbd>grid-template-columns: repeat(3, 1fr)</kbd>",
|
||
"options": {
|
||
"caseSensitive": false
|
||
}
|
||
},
|
||
{
|
||
"type": "property_value",
|
||
"value": {
|
||
"property": "gap",
|
||
"expected": "1rem"
|
||
},
|
||
"message": "Set <kbd>gap: 1rem</kbd>",
|
||
"options": {
|
||
"exact": true
|
||
}
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "grid-2",
|
||
"title": "Grid Template Areas",
|
||
"description": "Use named grid areas to create visual layouts that are easy to understand.",
|
||
"task": "Add <kbd>grid-template-areas</kbd> to create a layout with <kbd>header</kbd> spanning full width, <kbd>sidebar</kbd> and <kbd>content</kbd> in middle, and <kbd>footer</kbd> spanning full width.",
|
||
"previewHTML": "<div class='page'><div class='header'>Header</div><div class='sidebar'>Sidebar</div><div class='content'>Main Content</div><div class='footer'>Footer</div></div>",
|
||
"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .page > div { padding: 1.25rem; color: white; text-align: center; font-weight: bold; } .header { background-color: #e74c3c; } .sidebar { background-color: #3498db; } .content { background-color: #2ecc71; } .footer { background-color: #f39c12; }",
|
||
"sandboxCSS": ".page { border: 0.125rem dashed #ccc; padding: 1rem; height: 25rem; }",
|
||
"codePrefix": "/* Create a layout using grid-template-areas */\n.page {\n display: grid;\n grid-template-columns: 12rem 1fr;\n grid-template-rows: auto 1fr auto;\n gap: 1rem;\n \n /* Add your grid-template-areas code below */\n",
|
||
"initialCode": "",
|
||
"codeSuffix": "\n}\n\n/* Define which element goes in which grid area */\n.header {\n grid-area: header;\n}\n\n.sidebar {\n grid-area: sidebar;\n}\n\n.content {\n grid-area: content;\n}\n\n.footer {\n grid-area: footer;\n}",
|
||
"solution": "grid-template-areas:\n \"header header\"\n \"sidebar content\"\n \"footer footer\";",
|
||
"previewContainer": "preview-area",
|
||
"validations": [
|
||
{
|
||
"type": "contains",
|
||
"value": "grid-template-areas",
|
||
"message": "Use the <kbd>grid-template-areas</kbd> property",
|
||
"options": {
|
||
"caseSensitive": false
|
||
}
|
||
},
|
||
{
|
||
"type": "regex",
|
||
"value": "grid-template-areas:\\s*['\"]header\\s+header['\"]\\s*['\"]sidebar\\s+content['\"]\\s*['\"]footer\\s+footer['\"]",
|
||
"message": "Create areas: <kbd>\"header header\" \"sidebar content\" \"footer footer\"</kbd>",
|
||
"options": {
|
||
"caseSensitive": false
|
||
}
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "grid-3",
|
||
"title": "Spanning Grid Cells",
|
||
"description": "Make grid items span multiple grid cells horizontally or vertically.",
|
||
"task": "Add <kbd>grid-column: span 2</kbd> and <kbd>grid-row: span 2</kbd> to <kbd>.featured</kbd> to span 2x2 cells.",
|
||
"previewHTML": "<div class='grid'><div class='item'>1</div><div class='item'>2</div><div class='item featured'>Featured</div><div class='item'>4</div><div class='item'>5</div><div class='item'>6</div><div class='item'>7</div><div class='item'>8</div><div class='item'>9</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; } .featured { background-color: #e74c3c; }",
|
||
"sandboxCSS": ".grid { border: 0.125rem dashed #ccc; padding: 1rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }",
|
||
"codePrefix": "/* Make the featured item span 2x2 cells */\n",
|
||
"initialCode": "",
|
||
"codeSuffix": "",
|
||
"solution": ".featured {\n grid-column: span 2;\n grid-row: span 2;\n}",
|
||
"previewContainer": "preview-area",
|
||
"validations": [
|
||
{
|
||
"type": "contains",
|
||
"value": ".featured",
|
||
"message": "Use the <kbd>.featured</kbd> class selector",
|
||
"options": {
|
||
"caseSensitive": false
|
||
}
|
||
},
|
||
{
|
||
"type": "regex",
|
||
"value": "grid-column:\\s*span\\s+2",
|
||
"message": "Set <kbd>grid-column: span 2</kbd>",
|
||
"options": {
|
||
"caseSensitive": false
|
||
}
|
||
},
|
||
{
|
||
"type": "regex",
|
||
"value": "grid-row:\\s*span\\s+2",
|
||
"message": "Set <kbd>grid-row: span 2</kbd>",
|
||
"options": {
|
||
"caseSensitive": false
|
||
}
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "grid-4",
|
||
"title": "Automatic Grid Placement",
|
||
"description": "Learn how to use auto-placement and <kbd>auto-fit</kbd>/<kbd>auto-fill</kbd> for responsive grid layouts.",
|
||
"task": "Add <kbd>display: grid</kbd> and <kbd>grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr))</kbd> to <kbd>.cards</kbd>.",
|
||
"previewHTML": "<div class='cards'><div class='card'>Card 1</div><div class='card'>Card 2</div><div class='card'>Card 3</div><div class='card'>Card 4</div><div class='card'>Card 5</div><div class='card'>Card 6</div></div>",
|
||
"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .card { background-color: #3498db; color: white; padding: 1.25rem; text-align: center; font-weight: bold; height: 6rem; display: flex; align-items: center; justify-content: center; }",
|
||
"sandboxCSS": ".cards { border: 0.125rem dashed #ccc; padding: 1rem; }",
|
||
"codePrefix": "/* Create a responsive grid with auto-fit columns */\n",
|
||
"initialCode": "",
|
||
"codeSuffix": "",
|
||
"solution": ".cards {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));\n}",
|
||
"previewContainer": "preview-area",
|
||
"validations": [
|
||
{
|
||
"type": "contains",
|
||
"value": ".cards",
|
||
"message": "Use the <kbd>.cards</kbd> class selector",
|
||
"options": {
|
||
"caseSensitive": false
|
||
}
|
||
},
|
||
{
|
||
"type": "property_value",
|
||
"value": {
|
||
"property": "display",
|
||
"expected": "grid"
|
||
},
|
||
"message": "Set <kbd>display: grid</kbd>",
|
||
"options": {
|
||
"exact": true
|
||
}
|
||
},
|
||
{
|
||
"type": "regex",
|
||
"value": "grid-template-columns:\\s*repeat\\(\\s*auto-fit\\s*,\\s*minmax\\(\\s*10rem\\s*,\\s*1fr\\s*\\)\\s*\\)",
|
||
"message": "Set <kbd>grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr))</kbd>",
|
||
"options": {
|
||
"caseSensitive": false
|
||
}
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "grid-5",
|
||
"title": "Grid Alignment",
|
||
"description": "Control the alignment of grid items within their cells on both axes.",
|
||
"task": "Add <kbd>justify-items: center</kbd> and <kbd>align-items: center</kbd> to center items within their cells.",
|
||
"previewHTML": "<div class='cells'><div class='item'>1</div><div class='item tall'>2</div><div class='item'>3</div><div class='item'>4</div><div class='item'>5</div><div class='item wide'>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; width: 3rem; height: 3rem; } .tall { height: 6rem; } .wide { width: 6rem; }",
|
||
"sandboxCSS": ".cells { border: 0.125rem dashed #ccc; padding: 1rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; height: 25rem; }",
|
||
"codePrefix": "/* Center grid items both horizontally and vertically */\n.cells {\n /* Add alignment properties below */\n",
|
||
"initialCode": "",
|
||
"codeSuffix": "\n}",
|
||
"solution": "justify-items: center;\n align-items: center;",
|
||
"previewContainer": "preview-area",
|
||
"validations": [
|
||
{
|
||
"type": "property_value",
|
||
"value": {
|
||
"property": "justify-items",
|
||
"expected": "center"
|
||
},
|
||
"message": "Set <kbd>justify-items: center</kbd>",
|
||
"options": {
|
||
"exact": true
|
||
}
|
||
},
|
||
{
|
||
"type": "property_value",
|
||
"value": {
|
||
"property": "align-items",
|
||
"expected": "center"
|
||
},
|
||
"message": "Set <kbd>align-items: center</kbd>",
|
||
"options": {
|
||
"exact": true
|
||
}
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "grid-6",
|
||
"title": "Overlapping Grid Items",
|
||
"description": "Learn how to create overlapping layouts by using grid positioning and <kbd>z-index</kbd>.",
|
||
"task": "Add <kbd>grid-column: 1</kbd>, <kbd>grid-row: 1</kbd>, and <kbd>z-index: 1</kbd> to <kbd>.overlay</kbd> to position it above the base.",
|
||
"previewHTML": "<div class='stack'><div class='base'>Base Content</div><div class='overlay'>Overlay</div></div>",
|
||
"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .stack { position: relative; height: 15rem; } .base { background-color: #3498db; color: white; padding: 1.25rem; display: flex; align-items: center; justify-content: center; font-weight: bold; } .overlay { background-color: rgba(231, 76, 60, 0.7); color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.5rem; }",
|
||
"sandboxCSS": ".stack { border: 0.125rem dashed #ccc; padding: 1rem; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; }",
|
||
"codePrefix": "/* Position the overlay to cover the entire grid */\n.base {\n grid-column: 1;\n grid-row: 1;\n}\n\n.overlay {\n /* Add your code below to position the overlay */\n",
|
||
"initialCode": "",
|
||
"codeSuffix": "\n}",
|
||
"solution": "grid-column: 1;\n grid-row: 1;\n z-index: 1;",
|
||
"previewContainer": "preview-area",
|
||
"validations": [
|
||
{
|
||
"type": "property_value",
|
||
"value": {
|
||
"property": "grid-column",
|
||
"expected": "1"
|
||
},
|
||
"message": "Set <kbd>grid-column: 1</kbd>",
|
||
"options": {
|
||
"exact": true
|
||
}
|
||
},
|
||
{
|
||
"type": "property_value",
|
||
"value": {
|
||
"property": "grid-row",
|
||
"expected": "1"
|
||
},
|
||
"message": "Set <kbd>grid-row: 1</kbd>",
|
||
"options": {
|
||
"exact": true
|
||
}
|
||
},
|
||
{
|
||
"type": "regex",
|
||
"value": "z-index:\\s*[1-9]\\d*",
|
||
"message": "Set <kbd>z-index</kbd> to a positive number",
|
||
"options": {
|
||
"caseSensitive": false
|
||
}
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|