Michael Czechowski
a8db5b69cf
Flexbox and Box Model lessons: - Use explicit task instructions with selector AND property - Include selector in codePrefix for better context - Replace hex colors with named CSS colors (steelblue, coral, etc.) - Simplify values (2px instead of 0.125rem, 1rem instead of 1.25rem) - Remove redundant contains validations - Wrap code examples in <code> tags for proper styling
200 lines
7.8 KiB
JSON
200 lines
7.8 KiB
JSON
{
|
|
"$schema": "../schemas/code-crispies-module-schema.json",
|
|
"id": "flexbox",
|
|
"title": "CSS Flexbox",
|
|
"description": "Master the flexible box layout model for modern responsive designs",
|
|
"difficulty": "intermediate",
|
|
"lessons": [
|
|
{
|
|
"id": "flexbox-1",
|
|
"title": "Flexbox Container Basics",
|
|
"description": "Learn how to create a flex container and understand the main and cross axes.",
|
|
"task": "Add <code>display: flex</code> to <code>.flex-container</code> to create a flexbox layout.",
|
|
"previewHTML": "<div class='flex-container'><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": ".flex-container { border: 2px dashed #aaa; padding: 1rem; }",
|
|
"codePrefix": ".flex-container {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "property_value",
|
|
"value": {
|
|
"property": "display",
|
|
"expected": "flex"
|
|
},
|
|
"message": "Set display to 'flex'"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "flexbox-2",
|
|
"title": "Flex Direction and Wrap",
|
|
"description": "Control the direction and wrapping of flex items within a container.",
|
|
"task": "Add <code>flex-direction: column</code> and <code>flex-wrap: wrap</code> to <code>.flex-container</code>.",
|
|
"previewHTML": "<div class='flex-container'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div><div class='box'>4</div><div class='box'>5</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; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; }",
|
|
"sandboxCSS": ".flex-container { border: 2px dashed #aaa; padding: 1rem; height: 16rem; display: flex; }",
|
|
"codePrefix": ".flex-container {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "contains",
|
|
"value": "flex-direction",
|
|
"message": "Use the 'flex-direction' property",
|
|
"options": {
|
|
"caseSensitive": false
|
|
}
|
|
},
|
|
{
|
|
"type": "contains",
|
|
"value": "flex-wrap",
|
|
"message": "Use the 'flex-wrap' property",
|
|
"options": {
|
|
"caseSensitive": false
|
|
}
|
|
},
|
|
{
|
|
"type": "property_value",
|
|
"value": {
|
|
"property": "flex-direction",
|
|
"expected": "column"
|
|
},
|
|
"message": "Set the flex-direction to 'column'",
|
|
"options": {
|
|
"exact": true
|
|
}
|
|
},
|
|
{
|
|
"type": "property_value",
|
|
"value": {
|
|
"property": "flex-wrap",
|
|
"expected": "wrap"
|
|
},
|
|
"message": "Set flex-wrap to 'wrap'",
|
|
"options": {
|
|
"exact": true
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "flexbox-3",
|
|
"title": "Justify Content",
|
|
"description": "Learn how to align flex items along the main axis of the flex container.",
|
|
"task": "Add <code>justify-content: space-between</code> to <code>.flex-container</code> to distribute the boxes evenly.",
|
|
"previewHTML": "<div class='flex-container'><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; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; }",
|
|
"sandboxCSS": ".flex-container { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
|
|
"codePrefix": ".flex-container {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "contains",
|
|
"value": "justify-content",
|
|
"message": "Use the 'justify-content' property",
|
|
"options": {
|
|
"caseSensitive": false
|
|
}
|
|
},
|
|
{
|
|
"type": "property_value",
|
|
"value": {
|
|
"property": "justify-content",
|
|
"expected": "space-between"
|
|
},
|
|
"message": "Set justify-content to 'space-between'",
|
|
"options": {
|
|
"exact": true
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "flexbox-4",
|
|
"title": "Align Items",
|
|
"description": "Control how flex items are aligned along the cross axis of the flex container.",
|
|
"task": "Add <code>align-items: center</code> to <code>.flex-container</code> to vertically center the boxes.",
|
|
"previewHTML": "<div class='flex-container'><div class='box tall'>1</div><div class='box'>2</div><div class='box short'>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; width: 3rem; display: flex; justify-content: center; } .tall { height: 6rem; } .short { height: 3rem; }",
|
|
"sandboxCSS": ".flex-container { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 10rem; }",
|
|
"codePrefix": ".flex-container {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "contains",
|
|
"value": "align-items",
|
|
"message": "Use the 'align-items' property",
|
|
"options": {
|
|
"caseSensitive": false
|
|
}
|
|
},
|
|
{
|
|
"type": "property_value",
|
|
"value": {
|
|
"property": "align-items",
|
|
"expected": "center"
|
|
},
|
|
"message": "Set align-items to 'center'",
|
|
"options": {
|
|
"exact": true
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "flexbox-5",
|
|
"title": "Flex Grow",
|
|
"description": "The <code>flex</code> property controls how much an item grows relative to others.",
|
|
"task": "Add <code>flex: 2</code> to <code>.box2</code> to make it grow twice as wide.",
|
|
"previewHTML": "<div class='flex-container'><div class='box box1'>1</div><div class='box box2'>2</div><div class='box box3'>3</div></div>",
|
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; display: flex; align-items: center; justify-content: center; } .box1 { background: coral; flex: 1; } .box2 { background: mediumseagreen; } .box3 { background: gold; flex: 1; }",
|
|
"sandboxCSS": ".flex-container { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
|
|
"codePrefix": ".box2 {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "property_value",
|
|
"value": {
|
|
"property": "flex",
|
|
"expected": "2"
|
|
},
|
|
"message": "Set flex to '2'"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "flexbox-6",
|
|
"title": "Align Self",
|
|
"description": "Use <code>align-self</code> to override alignment for a single flex item.",
|
|
"task": "Add <code>align-self: flex-start</code> to <code>.middle</code> to move it to the top.",
|
|
"previewHTML": "<div class='flex-container'><div class='box'>1</div><div class='box middle'>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; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; } .middle { background: mediumseagreen; }",
|
|
"sandboxCSS": ".flex-container { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 12rem; align-items: center; }",
|
|
"codePrefix": ".middle {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "property_value",
|
|
"value": {
|
|
"property": "align-self",
|
|
"expected": "flex-start"
|
|
},
|
|
"message": "Set align-self to 'flex-start'"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|