Michael Czechowski
38541c7a78
- Replace single quotes with <kbd> tags in validation messages - German and English lessons updated for consistent formatting - Move task instruction before description in UI (index.html)
116 lines
4.7 KiB
JSON
116 lines
4.7 KiB
JSON
{
|
|
"$schema": "../schemas/code-crispies-module-schema.json",
|
|
"id": "layouts",
|
|
"title": "Layouts",
|
|
"description": "Master modern CSS layout techniques with Flexbox and Grid for responsive, powerful designs.",
|
|
"difficulty": "intermediate",
|
|
"lessons": [
|
|
{
|
|
"id": "layouts-1",
|
|
"title": "Flex Basics",
|
|
"description": "Learn the core properties of Flexbox to align, distribute space, and order items in a container.",
|
|
"task": "Set .flex to display: flex, and center its children both horizontally and vertically.",
|
|
"previewHTML": "<div class=\"flex\"><div>1</div><div>2</div><div>3</div></div>",
|
|
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .flex > div { background: #eceff1; margin: 0.5rem; padding: 1rem; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": "/* Enable and center Flexbox */\n.flex {",
|
|
"initialCode": "",
|
|
"codeSuffix": "}",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{ "type": "contains", "value": "display", "message": "Use <kbd>display: flex</kbd>", "options": { "caseSensitive": false } },
|
|
{
|
|
"type": "contains",
|
|
"value": "justify-content",
|
|
"message": "Use <kbd>justify-content: center</kbd>",
|
|
"options": { "caseSensitive": false }
|
|
},
|
|
{ "type": "contains", "value": "align-items", "message": "Use <kbd>align-items: center</kbd>", "options": { "caseSensitive": false } }
|
|
]
|
|
},
|
|
{
|
|
"id": "layouts-2",
|
|
"title": "Flex Advanced",
|
|
"description": "Control wrapping, ordering, and flexible growth/shrink of items in a flex container.",
|
|
"task": "Allow items to wrap and set .item to flex: 1 1 100px.",
|
|
"previewHTML": "<div class=\"flex\"><div class=\"item\">A</div><div class=\"item\">B</div><div class=\"item\">C</div></div>",
|
|
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .item { background: #c5cae9; margin: 0.5rem; padding: 1rem; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": "/* Enable wrap and flexible items */\n.flex {",
|
|
"initialCode": "",
|
|
"codeSuffix": "}\n.item { }",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "contains",
|
|
"value": "flex-wrap: wrap",
|
|
"message": "Use <kbd>flex-wrap: wrap</kbd>",
|
|
"options": { "caseSensitive": false }
|
|
},
|
|
{
|
|
"type": "regex",
|
|
"value": ".item.*flex:\\s*1\\s+1\\s+100px",
|
|
"message": "Set <kbd>flex: 1 1 100px</kbd> on items",
|
|
"options": { "caseSensitive": false }
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "layouts-3",
|
|
"title": "Grid Basics",
|
|
"description": "Define grid containers, set rows and columns, and place items in a structured grid.",
|
|
"task": "Set .grid to display: grid with three equal columns and a 1rem gap.",
|
|
"previewHTML": "<div class=\"grid\"><div>1</div><div>2</div><div>3</div><div>4</div></div>",
|
|
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .grid > div { background: #ffe082; padding: 1rem; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": "/* Define Grid */\n.grid {",
|
|
"initialCode": "",
|
|
"codeSuffix": "}",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{ "type": "contains", "value": "display: grid", "message": "Use <kbd>display: grid</kbd>", "options": { "caseSensitive": false } },
|
|
{
|
|
"type": "contains",
|
|
"value": "grid-template-columns",
|
|
"message": "Define <kbd>grid-template-columns</kbd>",
|
|
"options": { "caseSensitive": false }
|
|
},
|
|
{
|
|
"type": "regex",
|
|
"value": "grid-template-columns:\\s*repeat\\(3,\\s*1fr\\)\\s*",
|
|
"message": "Create three equal columns with <kbd>repeat(3, 1fr)</kbd>",
|
|
"options": { "caseSensitive": false }
|
|
},
|
|
{ "type": "contains", "value": "gap", "message": "Use <kbd>gap</kbd> property", "options": { "caseSensitive": false } }
|
|
]
|
|
},
|
|
{
|
|
"id": "layouts-4",
|
|
"title": "Grid Placement",
|
|
"description": "Control the span and position of grid items with grid-column and grid-row.",
|
|
"task": "Span the first grid item across 2 columns using grid-column: 1 / span 2.",
|
|
"previewHTML": "<div class=\"grid\"><div class=\"item1\">Featured</div><div>2</div><div>3</div><div>4</div></div>",
|
|
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .grid > div { background: #c8e6c9; padding: 1rem; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": "/* Span item */\n.item1 {",
|
|
"initialCode": "",
|
|
"codeSuffix": "}",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "contains",
|
|
"value": "grid-column",
|
|
"message": "Use <kbd>grid-column</kbd> property",
|
|
"options": { "caseSensitive": false }
|
|
},
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "grid-column", "expected": "1 / span 2" },
|
|
"message": "Span across 2 columns with <kbd>grid-column: 1 / span 2</kbd>",
|
|
"options": { "caseSensitive": false }
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|