100 lines
4.6 KiB
JSON
100 lines
4.6 KiB
JSON
{
|
|
"id": "box-model",
|
|
"title": "CSS Box Model Essentials",
|
|
"description": "Understand how CSS calculates sizes and spacing around elements using margin, border, padding, and content areas.",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "box-model-1",
|
|
"title": "Content, Padding, Border, Margin",
|
|
"description": "Learn the four layers of the CSS box model and how each affects element dimensions.",
|
|
"task": "Create a <code>div</code> with class 'box' and add 1.25rem padding, a 0.125rem solid #333 border, and 1rem margin.",
|
|
"previewHTML": "<div class=\"box\">Box Model Demo</div>",
|
|
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .box { background-color: #f0f0f0; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": "/* Style the box element */\n.box {",
|
|
"initialCode": "",
|
|
"codeSuffix": "}",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{ "type": "contains", "value": "padding", "message": "Use the 'padding' property", "options": { "caseSensitive": false } },
|
|
{ "type": "property_value", "value": { "property": "padding", "expected": "1.25rem" }, "message": "Padding should be 1.25rem" },
|
|
{ "type": "contains", "value": "border", "message": "Use the 'border' property", "options": { "caseSensitive": false } },
|
|
{
|
|
"type": "regex",
|
|
"value": "border:\\s*0.125rem\\s+solid\\s+#333",
|
|
"message": "Border should be '0.125rem solid #333'",
|
|
"options": { "caseSensitive": false }
|
|
},
|
|
{ "type": "contains", "value": "margin", "message": "Use the 'margin' property", "options": { "caseSensitive": false } },
|
|
{ "type": "property_value", "value": { "property": "margin", "expected": "1rem" }, "message": "Margin should be 1rem" }
|
|
]
|
|
},
|
|
{
|
|
"id": "box-model-2",
|
|
"title": "Box-Sizing Property",
|
|
"description": "Discover how <code>box-sizing</code> changes the box model calculation for width and height.",
|
|
"task": "Set <code>box-sizing: border-box;</code> on the .box element and note how its width includes padding and border.",
|
|
"previewHTML": "<div class=\"box\">Border-box Demo</div>",
|
|
"previewBaseCSS": "body { font-family: sans-serif; } .box { width: 200px; padding: 1rem; border: 0.125rem solid #333; background: #eef; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": "/* Apply box-sizing */\n.box {",
|
|
"initialCode": "",
|
|
"codeSuffix": "}",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{ "type": "contains", "value": "box-sizing", "message": "Include the 'box-sizing' property", "options": { "caseSensitive": false } },
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "box-sizing", "expected": "border-box" },
|
|
"message": "Set box-sizing to 'border-box'"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "box-model-3",
|
|
"title": "Margin Collapse",
|
|
"description": "Understand how vertical margins can collapse between adjacent elements.",
|
|
"task": "Create two stacked <code>div</code>s with class 'box' and 1rem top margin on each. Observe margin collapse.",
|
|
"previewHTML": "<div class=\"box\">First</div><div class=\"box\">Second</div>",
|
|
"previewBaseCSS": "body { font-family: sans-serif; } .box { padding: 1rem; background: #ddd; margin-top: 1rem; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": "",
|
|
"initialCode": "",
|
|
"codeSuffix": "",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{ "type": "contains", "value": "margin-top", "message": "Use 'margin-top' on .box", "options": { "caseSensitive": false } },
|
|
{ "type": "property_value", "value": { "property": "margin-top", "expected": "1rem" }, "message": "Top margin should be 1rem" }
|
|
]
|
|
},
|
|
{
|
|
"id": "box-model-4",
|
|
"title": "Using Shorthand Properties",
|
|
"description": "Learn to write concise padding and margin using shorthand notation.",
|
|
"task": "Refactor separate margin and padding properties into a single shorthand declaration on .box.",
|
|
"previewHTML": "<div class=\"box\">Shorthand Demo</div>",
|
|
"previewBaseCSS": "body { font-family: sans-serif; } .box { background: #fef; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": "/* Refactor to shorthand */\n.box {",
|
|
"initialCode": "margin: 1rem 0 2rem 0; padding: 0.5rem 1rem 0.5rem 1rem;",
|
|
"codeSuffix": "}",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "regex",
|
|
"value": "margin:\\s*1rem\\s+0\\s+2rem\\s+0",
|
|
"message": "Use shorthand for margin: 1rem 0 2rem 0",
|
|
"options": { "caseSensitive": false }
|
|
},
|
|
{
|
|
"type": "regex",
|
|
"value": "padding:\\s*0.5rem\\s+1rem\\s+0.5rem\\s+1rem",
|
|
"message": "Use shorthand for padding: 0.5rem 1rem 0.5rem 1rem",
|
|
"options": { "caseSensitive": false }
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|