Michael Czechowski
496ff11252
Some checks failed
Deploy static content to Pages / deploy (push) Has been cancelled
- box-model: .margin-box→.outer, .border-box→.sized, .shorthand-box→.spaced, .padding-box→.padded, .border-demo→.line - units-variables: .unit-box→.box, .var-box→.themed, .calc-box→.sized, .viewport-box→.view - responsive: .responsive-box→.panel, .fluid-text→.text, .grid-responsive→.cards - Move expected toggle below preview area - Update German translations with same changes
173 lines
8.2 KiB
JSON
173 lines
8.2 KiB
JSON
{
|
|
"$schema": "../../schemas/code-crispies-module-schema.json",
|
|
"id": "box-model",
|
|
"title": "Padding, Borders und Margins",
|
|
"description": "Beherrsche die Grundprinzipien der Raumverwaltung im Webdesign durch das CSS Box-Modell.",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "box-model-1",
|
|
"title": "Box-Modell Komponenten",
|
|
"description": "Das CSS Box-Modell besteht aus vier konzentrischen Schichten: Inhalt (innerste), Padding, Border und Margin (äußerste). Zu verstehen, wie diese Komponenten zusammenwirken, ist essentiell für präzise Layout-Kontrolle.",
|
|
"task": "Füge <code>padding: 1rem</code> zu <code>.box</code> hinzu, um Abstand zwischen Inhalt und Rahmen zu schaffen.",
|
|
"previewHTML": "<div class=\"box\">Box-Modell Komponenten</div>",
|
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background-color: lavender; border: 2px dashed slategray; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": ".box {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "padding", "expected": "1rem" },
|
|
"message": "Setze <kbd>padding: 1rem</kbd>"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "box-model-2",
|
|
"title": "Rahmen hinzufügen",
|
|
"description": "Rahmen umranden ein Element und schaffen visuelle Trennung. Die border-Kurzschreibweise akzeptiert drei Werte: Breite, Stil und Farbe.",
|
|
"task": "Füge <code>border: 2px solid darkslategray</code> zu <code>.box</code> hinzu.",
|
|
"previewHTML": "<div class=\"box\">Diese Box braucht einen Rahmen</div>",
|
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background-color: mintcream; padding: 1rem; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": ".box {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "regex",
|
|
"value": "border:\\s*2px\\s+solid\\s+darkslategray",
|
|
"message": "Setze <kbd>border: 2px solid darkslategray</kbd>",
|
|
"options": { "caseSensitive": false }
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "box-model-3",
|
|
"title": "Außenabstände hinzufügen",
|
|
"description": "Margins schaffen Abstand zwischen Elementen. Anders als Padding (das den inneren Abstand beeinflusst) existiert Margin außerhalb des Rahmens.",
|
|
"task": "Füge <code>margin: 1rem</code> zu <code>.outer</code> hinzu, um Abstand zum benachbarten Element zu schaffen.",
|
|
"previewHTML": "<div class=\"container\"><div class=\"outer\">Diese Box braucht Margins</div><div class=\"neighbor\">Benachbartes Element</div></div>",
|
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .container { background-color: whitesmoke; padding: 8px; } .outer { background-color: plum; padding: 1rem; border: 2px solid orchid; } .neighbor { background-color: lightblue; padding: 1rem; border: 2px solid steelblue; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": ".outer {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "margin", "expected": "1rem" },
|
|
"message": "Setze <kbd>margin: 1rem</kbd>"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "box-model-4",
|
|
"title": "Box-Sizing: Border-Box",
|
|
"description": "Die box-sizing Eigenschaft bestimmt, wie Elementdimensionen berechnet werden. 'content-box' (Standard) schließt Padding und Border aus, während 'border-box' sie einschließt.",
|
|
"task": "Füge <code>box-sizing: border-box</code> zu <code>.sized</code> hinzu, damit Padding und Border in die Breite einbezogen werden.",
|
|
"previewHTML": "<div class=\"sizing-demo\"><div class=\"box default\">Content-box (Standard)</div><div class=\"box sized\">Border-box</div></div>",
|
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .sizing-demo { display: flex; gap: 1rem; } .box { width: 200px; padding: 1rem; border: 4px solid teal; background: lightcyan; } .default { box-sizing: content-box; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": ".sized {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "box-sizing", "expected": "border-box" },
|
|
"message": "Setze <kbd>box-sizing: border-box</kbd>"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "box-model-5",
|
|
"title": "Margin-Kollaps",
|
|
"description": "Wenn zwei vertikale Margins aufeinandertreffen, kollabieren sie zum größeren der beiden Werte statt zu addieren.",
|
|
"task": "Füge <code>margin-bottom: 2rem</code> zu <code>.first</code> hinzu. Der Abstand zwischen den Absätzen beträgt 2rem (nicht 3rem) durch Margin-Kollaps.",
|
|
"previewHTML": "<div class=\"collapse-demo\"><p class=\"first\">Dieser Absatz hat einen Bottom-Margin.</p><p class=\"second\">Dieser Absatz hat einen Top-Margin von 1rem.</p></div>",
|
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .collapse-demo { border: 1px solid silver; padding: 8px; background: ghostwhite; } .second { margin-top: 1rem; background: linen; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": ".first {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "margin-bottom", "expected": "2rem" },
|
|
"message": "Setze <kbd>margin-bottom: 2rem</kbd>"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "box-model-6",
|
|
"title": "Margin-Kurzschreibweise",
|
|
"description": "Die Margin-Kurzschreibweise kann alle vier Seiten setzen. Zwei Werte setzen vertikale (oben/unten) und horizontale (links/rechts) Margins.",
|
|
"task": "Füge <code>margin: 1rem 2rem</code> zu <code>.spaced</code> hinzu für 1rem oben/unten und 2rem links/rechts.",
|
|
"previewHTML": "<div class=\"container\"><div class=\"spaced\">Diese Box braucht Margins: 1rem oben/unten, 2rem links/rechts</div></div>",
|
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .container { background-color: whitesmoke; padding: 8px; } .spaced { background-color: honeydew; border: 2px solid mediumseagreen; padding: 1rem; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": ".spaced {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "regex",
|
|
"value": "margin:\\s*1rem\\s+2rem",
|
|
"message": "Setze <kbd>margin: 1rem 2rem</kbd>",
|
|
"options": { "caseSensitive": false }
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "box-model-7",
|
|
"title": "Padding-Kurzschreibweise",
|
|
"description": "Wie Margin erlaubt Padding-Kurzschreibweise das Setzen aller Seiten. Ein einzelner Wert gilt für alle vier Seiten.",
|
|
"task": "Füge <code>padding: 1.5rem</code> zu <code>.padded</code> hinzu für gleichmäßiges Padding.",
|
|
"previewHTML": "<div class=\"padded\">Diese Box braucht gleichmäßiges Padding</div>",
|
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .padded { background-color: papayawhip; border: 2px solid orange; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": ".padded {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "padding", "expected": "1.5rem" },
|
|
"message": "Setze <kbd>padding: 1.5rem</kbd>"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "box-model-8",
|
|
"title": "Rahmen auf einzelnen Seiten",
|
|
"description": "Für feinere Kontrolle können einzelne Seiten mit border-top, border-right, border-bottom oder border-left angesprochen werden.",
|
|
"task": "Füge <code>border-bottom: 4px solid dodgerblue</code> zu <code>.line</code> hinzu.",
|
|
"previewHTML": "<div class=\"line\">Dieses Element braucht nur einen unteren Rahmen</div>",
|
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .line { padding: 1rem; background-color: aliceblue; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": ".line {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "regex",
|
|
"value": "border-bottom:\\s*4px\\s+solid\\s+dodgerblue",
|
|
"message": "Setze <kbd>border-bottom: 4px solid dodgerblue</kbd>",
|
|
"options": { "caseSensitive": false }
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|