code-crispies/lessons/de/05-units-variables.json

{
	"$schema": "../../schemas/code-crispies-module-schema.json",
	"id": "units-variables",
	"title": "CSS Einheiten & Variablen",
	"description": "Verstehe die Vielfalt der CSS-Maßeinheiten und wie du Custom Properties für wartbare Stile definierst und verwendest.",
	"difficulty": "beginner",
	"lessons": [
		{
			"id": "units-1",
			"title": "Absolute vs. Relative Einheiten",
			"description": "Lerne den Unterschied zwischen px, rem, em, % und vw/vh für flexible, responsive Layouts.",
			"task": "Setze die Breite von <kbd>.box</kbd> auf <kbd>80%</kbd> und max-width auf <kbd>37.5rem</kbd>.",
			"previewHTML": "<div class=\"box\">Ändere meine Größe!</div>",
			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .box { background: #f5f5f5; padding: 1rem; }",
			"sandboxCSS": "",
			"codePrefix": "/* Setze flexible Größen */\n.box {",
			"initialCode": "",
			"codeSuffix": "}",
			"solution": "  width: 80%;\n  max-width: 37.5rem;",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "contains",
					"value": "width",
					"message": "Verwende die <kbd>width</kbd> Eigenschaft",
					"options": { "caseSensitive": false }
				},
				{ "type": "property_value", "value": { "property": "width", "expected": "80%" }, "message": "Setze width auf <kbd>80%</kbd>" },
				{
					"type": "contains",
					"value": "max-width",
					"message": "Verwende die <kbd>max-width</kbd> Eigenschaft",
					"options": { "caseSensitive": false }
				},
				{
					"type": "property_value",
					"value": { "property": "max-width", "expected": "37.5rem" },
					"message": "Setze max-width auf <kbd>37.5rem</kbd>"
				}
			]
		},
		{
			"id": "units-2",
			"title": "CSS Custom Properties",
			"description": "Definiere und verwende Variablen (--custom properties) wieder, um deine Theme-Werte zu zentralisieren.",
			"task": "Erstelle eine <code>--main-color</code> Variable in :root mit <kbd>#6200ee</kbd> und wende sie als Rahmenfarbe auf <kbd>.themed</kbd> an.",
			"previewHTML": "<div class=\"themed\">Variablen-Box</div>",
			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .themed { padding: 1rem; border: 0.125rem solid #ddd; }",
			"sandboxCSS": "",
			"codePrefix": "/* Definiere und verwende eine CSS-Variable */\n:root {",
			"initialCode": "",
			"codeSuffix": "}\n.themed { }",
			"solution": "  --main-color: #6200ee;\n}\n.themed {\n  border-color: var(--main-color);",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "contains",
					"value": "--main-color",
					"message": "Definiere <kbd>--main-color</kbd> in :root",
					"options": { "caseSensitive": false }
				},
				{
					"type": "contains",
					"value": "var(--main-color)",
					"message": "Verwende <kbd>var(--main-color)</kbd>",
					"options": { "caseSensitive": false }
				},
				{
					"type": "property_value",
					"value": { "property": "border", "expected": "var(--main-color)" },
					"message": "Wende die Variable auf die Rahmenfarbe an",
					"options": { "exact": false }
				}
			]
		},
		{
			"id": "units-3",
			"title": "Einheiten-Berechnungen (calc)",
			"description": "Verwende die <code>calc()</code> Funktion, um verschiedene Einheiten in einem Ausdruck zu kombinieren.",
			"task": "Setze die Breite von <kbd>.sized</kbd> auf <kbd>calc(100% - 2rem)</kbd> und min-height auf <kbd>calc(10vh + 1rem)</kbd>.",
			"previewHTML": "<div class=\"sized\">Calc Demo</div>",
			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .sized { background: #e8f5e9; padding: 1rem; }",
			"sandboxCSS": "",
			"codePrefix": "/* Verwende calc für dynamische Größen */\n.sized {",
			"initialCode": "",
			"codeSuffix": "}",
			"solution": "  width: calc(100% - 2rem);\n  min-height: calc(10vh + 1rem);",
			"previewContainer": "preview-area",
			"validations": [
				{ "type": "contains", "value": "calc", "message": "Verwende die <kbd>calc()</kbd> Funktion", "options": { "caseSensitive": false } },
				{
					"type": "regex",
					"value": "width:\\s*calc\\(100% - 2rem\\)",
					"message": "Width sollte calc(100% - 2rem) sein",
					"options": { "caseSensitive": false }
				},
				{
					"type": "regex",
					"value": "min-height:\\s*calc\\(10vh \\+ 1rem\\)",
					"message": "Min-height sollte calc(10vh + 1rem) sein",
					"options": { "caseSensitive": false }
				}
			]
		},
		{
			"id": "units-4",
			"title": "Viewport & Responsive Einheiten",
			"description": "Steuere Layouts relativ zur Viewport-Größe mit vw, vh und vmin/vmax Einheiten.",
			"task": "Gib <kbd>.view</kbd> eine Breite von <kbd>50vw</kbd> und Höhe von <kbd>20vh</kbd>.",
			"previewHTML": "<div class=\"view\">Viewport-Box</div>",
			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .view { background: #ffe0b2; }",
			"sandboxCSS": "",
			"codePrefix": "/* Verwende Viewport-Einheiten */\n.view {",
			"initialCode": "",
			"codeSuffix": "}",
			"solution": "  width: 50vw;\n  height: 20vh;",
			"previewContainer": "preview-area",
			"validations": [
				{ "type": "contains", "value": "vw", "message": "Verwende <kbd>vw</kbd> Einheit", "options": { "caseSensitive": false } },
				{ "type": "contains", "value": "vh", "message": "Verwende <kbd>vh</kbd> Einheit", "options": { "caseSensitive": false } },
				{ "type": "property_value", "value": { "property": "width", "expected": "50vw" }, "message": "Setze width auf <kbd>50vw</kbd>" },
				{ "type": "property_value", "value": { "property": "height", "expected": "20vh" }, "message": "Setze height auf <kbd>20vh</kbd>" }
			]
		}
	]
}