Michael Czechowski
a359900d6e
- Shorten German module titles with consistent HTML/CSS prefixes - Add .completion-badge styling for the lesson title completion badge - Make sidebar lessons section fill available height on desktop - Improve flexbox lesson descriptions with more context
135 lines
7.7 KiB
JSON
135 lines
7.7 KiB
JSON
{
|
|
"$schema": "../../schemas/code-crispies-module-schema.json",
|
|
"id": "flexbox",
|
|
"title": "CSS Flexbox",
|
|
"description": "Beherrsche das flexible Box-Layout-Modell für moderne responsive Designs",
|
|
"difficulty": "intermediate",
|
|
"lessons": [
|
|
{
|
|
"id": "flexbox-1",
|
|
"title": "Flex Container",
|
|
"description": "Flexbox ist ein eindimensionales Layout-System. Mit <kbd>display: flex</kbd> wird ein Element zum Flex-Container. Alle direkten Kinder werden automatisch zu Flex-Items und richten sich horizontal (Hauptachse) aus. Die Querachse verläuft senkrecht dazu.",
|
|
"task": "Füge <kbd>display: flex</kbd> zu <kbd>.wrap</kbd> hinzu.",
|
|
"previewHTML": "<div class='wrap'><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": ".wrap { border: 2px dashed #aaa; padding: 1rem; }",
|
|
"codePrefix": ".wrap {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "display", "expected": "flex" },
|
|
"message": "Setze display auf <kbd>flex</kbd>"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "flexbox-2",
|
|
"title": "Direction & Wrap",
|
|
"description": "<kbd>flex-direction</kbd> bestimmt die Hauptachse: <kbd>row</kbd> (horizontal, Standard) oder <kbd>column</kbd> (vertikal). Mit <kbd>flex-wrap: wrap</kbd> brechen Items in die nächste Zeile/Spalte um, wenn der Platz nicht reicht.",
|
|
"task": "Füge <kbd>flex-direction: column</kbd> und <kbd>flex-wrap: wrap</kbd> zu <kbd>.wrap</kbd> hinzu.",
|
|
"previewHTML": "<div class='wrap'><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": ".wrap { border: 2px dashed #aaa; padding: 1rem; height: 16rem; display: flex; }",
|
|
"codePrefix": ".wrap {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "flex-direction", "expected": "column" },
|
|
"message": "Setze flex-direction auf <kbd>column</kbd>"
|
|
},
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "flex-wrap", "expected": "wrap" },
|
|
"message": "Setze flex-wrap auf <kbd>wrap</kbd>"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "flexbox-3",
|
|
"title": "Justify Content",
|
|
"description": "<kbd>justify-content</kbd> verteilt Items entlang der Hauptachse. Werte: <kbd>flex-start</kbd> (Anfang), <kbd>flex-end</kbd> (Ende), <kbd>center</kbd> (Mitte), <kbd>space-between</kbd> (gleichmäßig mit Abstand), <kbd>space-around</kbd> (gleichmäßig mit Rand).",
|
|
"task": "Füge <kbd>justify-content: space-between</kbd> zu <kbd>.wrap</kbd> hinzu.",
|
|
"previewHTML": "<div class='wrap'><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": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
|
|
"codePrefix": ".wrap {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "justify-content", "expected": "space-between" },
|
|
"message": "Setze justify-content auf <kbd>space-between</kbd>"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "flexbox-4",
|
|
"title": "Align Items",
|
|
"description": "<kbd>align-items</kbd> richtet Items entlang der Querachse aus (bei <kbd>row</kbd>: vertikal). Werte: <kbd>stretch</kbd> (Standard, füllt Höhe), <kbd>flex-start</kbd> (oben), <kbd>flex-end</kbd> (unten), <kbd>center</kbd> (Mitte), <kbd>baseline</kbd> (Textlinie).",
|
|
"task": "Füge <kbd>align-items: center</kbd> zu <kbd>.wrap</kbd> hinzu.",
|
|
"previewHTML": "<div class='wrap'><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": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 10rem; }",
|
|
"codePrefix": ".wrap {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "align-items", "expected": "center" },
|
|
"message": "Setze align-items auf <kbd>center</kbd>"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "flexbox-5",
|
|
"title": "Flex Grow",
|
|
"description": "Die <kbd>flex</kbd>-Eigenschaft ist eine Kurzform für <kbd>flex-grow</kbd>, <kbd>flex-shrink</kbd> und <kbd>flex-basis</kbd>. Ein höherer Wert bedeutet, dass das Element mehr vom verfügbaren Platz einnimmt. <kbd>flex: 2</kbd> wächst doppelt so schnell wie <kbd>flex: 1</kbd>.",
|
|
"task": "Füge <kbd>flex: 2</kbd> zu <kbd>.green</kbd> hinzu.",
|
|
"previewHTML": "<div class='wrap'><div class='box red'>1</div><div class='box green'>2</div><div class='box yellow'>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; } .red { background: coral; flex: 1; } .green { background: mediumseagreen; } .yellow { background: gold; flex: 1; }",
|
|
"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
|
|
"codePrefix": ".green {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "flex", "expected": "2" },
|
|
"message": "Setze flex auf <kbd>2</kbd>"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "flexbox-6",
|
|
"title": "Align Self",
|
|
"description": "<kbd>align-self</kbd> überschreibt <kbd>align-items</kbd> für ein einzelnes Element. So kannst du ein Item individuell auf der Querachse positionieren, während alle anderen Items ihrer Standard-Ausrichtung folgen.",
|
|
"task": "Füge <kbd>align-self: flex-start</kbd> zu <kbd>.middle</kbd> hinzu.",
|
|
"previewHTML": "<div class='wrap'><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": ".wrap { 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": "Setze align-self auf <kbd>flex-start</kbd>"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|