Michael Czechowski
c560676544
Rewrite ~120 validation error messages across 17 English lesson modules and their localized variants (ar, de, es, pl, uk) to use concept questions, property hints, and directional nudges instead of revealing the exact CSS property-value answers. Priority modules (flexbox, box-model, colors, positioning) fully rewritten. All remaining CSS modules updated. Only message strings changed — no validation logic modifications.
131 lines
5.1 KiB
JSON
131 lines
5.1 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": "Which display mode arranges children in a row or column?",
|
|
"options": { "caseSensitive": false }
|
|
},
|
|
{
|
|
"type": "contains",
|
|
"value": "justify-content",
|
|
"message": "How do you center items along the main axis?",
|
|
"options": { "caseSensitive": false }
|
|
},
|
|
{
|
|
"type": "contains",
|
|
"value": "align-items",
|
|
"message": "Which property centers items along the cross axis?",
|
|
"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": "Which property allows flex items to flow onto multiple lines?",
|
|
"options": { "caseSensitive": false }
|
|
},
|
|
{
|
|
"type": "regex",
|
|
"value": ".item.*flex:\\s*1\\s+1\\s+100px",
|
|
"message": "The <kbd>flex</kbd> shorthand takes grow, shrink, and basis values — what basis size should each item start from?",
|
|
"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": "Which display mode lets you define rows and columns?",
|
|
"options": { "caseSensitive": false }
|
|
},
|
|
{
|
|
"type": "contains",
|
|
"value": "grid-template-columns",
|
|
"message": "Which property defines the column structure of a grid?",
|
|
"options": { "caseSensitive": false }
|
|
},
|
|
{
|
|
"type": "regex",
|
|
"value": "grid-template-columns:\\s*repeat\\(3,\\s*1fr\\)\\s*",
|
|
"message": "The <kbd>repeat()</kbd> function can create equal-width columns — how many do you need, and what unit makes them equal?",
|
|
"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": "Use <kbd>grid-column</kbd> with a start line and a span count \u2014 how many columns should this item stretch across?",
|
|
"options": { "caseSensitive": false }
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|