code-crispies/lessons/de/08-responsive.json

{
	"$schema": "../../schemas/code-crispies-module-schema.json",
	"id": "responsive-design",
	"title": "CSS Responsive Design",
	"description": "Passe deine Layouts an verschiedene Bildschirmgrößen an mit Media Queries und flüssigen Design-Techniken.",
	"difficulty": "intermediate",
	"lessons": [
		{
			"id": "responsive-1",
			"title": "Einführung in Media Queries",
			"description": "Verstehe die Syntax und Anwendungsfälle für CSS Media Queries, um Stile bedingt basierend auf Viewport-Eigenschaften anzuwenden.",
			"task": "Schreibe eine Media Query, die gilt, wenn der Viewport maximal 600px breit ist, und ändere den Hintergrund von <kbd>.panel</kbd> auf <kbd>lightcoral</kbd>.",
			"previewHTML": "<div class=\"panel\">Ändere die Fenstergröße</div>",
			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .panel { padding: 1rem; background: lightblue; }",
			"sandboxCSS": "",
			"codePrefix": "/* Füge deine Media Query unten ein */\n",
			"initialCode": "",
			"codeSuffix": "",
			"solution": "@media (max-width: 600px) {\n  .panel {\n    background: lightcoral;\n  }\n}",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "regex",
					"value": "@media\\s*\\(max-width:\\s*600px\\)",
					"message": "Verwende eine Media Query für max-width: 600px",
					"options": { "caseSensitive": false }
				},
				{
					"type": "contains",
					"value": ".panel",
					"message": "Adressiere <kbd>.panel</kbd> innerhalb der Media Query",
					"options": { "caseSensitive": false }
				},
				{
					"type": "contains",
					"value": "background",
					"message": "Ändere die <kbd>background</kbd> Eigenschaft",
					"options": { "caseSensitive": false }
				},
				{
					"type": "property_value",
					"value": { "property": "background", "expected": "lightcoral" },
					"message": "Setze background auf <kbd>lightcoral</kbd>",
					"options": { "exact": false }
				}
			]
		},
		{
			"id": "responsive-2",
			"title": "Flüssige Typografie",
			"description": "Verwende relative Einheiten wie vw, damit Schriftgrößen mit der Viewport-Breite skalieren.",
			"task": "Setze die font-size von <kbd>.text</kbd> auf <kbd>5vw</kbd>, damit sie sich mit dem Viewport ändert.",
			"previewHTML": "<p class=\"text\">Flüssige Typografie</p>",
			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; }",
			"sandboxCSS": "",
			"codePrefix": "/* Wende flüssige Schriftgröße an */\n.text {",
			"initialCode": "",
			"codeSuffix": "}",
			"solution": "  font-size: 5vw;",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "contains",
					"value": "font-size",
					"message": "Verwende die <kbd>font-size</kbd> Eigenschaft",
					"options": { "caseSensitive": false }
				},
				{
					"type": "contains",
					"value": "vw",
					"message": "Verwende <kbd>vw</kbd> Einheit für flüssige Größe",
					"options": { "caseSensitive": false }
				},
				{ "type": "property_value", "value": { "property": "font-size", "expected": "5vw" }, "message": "Setze font-size auf <kbd>5vw</kbd>" }
			]
		},
		{
			"id": "responsive-3",
			"title": "Flexible Raster",
			"description": "Kombiniere CSS Grid mit auto-fit oder auto-fill für responsive Spaltenlayouts.",
			"task": "Definiere <kbd>.cards</kbd> mit <kbd>grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))</kbd> und einem gap von <kbd>1rem</kbd>.",
			"previewHTML": "<div class=\"cards\"><div>1</div><div>2</div><div>3</div><div>4</div></div>",
			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .cards > div { background: #d1c4e9; padding: 1rem; }",
			"sandboxCSS": "",
			"codePrefix": "/* Erstelle ein responsives Raster */\n.cards {",
			"initialCode": "",
			"codeSuffix": "}",
			"solution": "  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 1rem;",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "contains",
					"value": "grid-template-columns",
					"message": "Definiere <kbd>grid-template-columns</kbd>",
					"options": { "caseSensitive": false }
				},
				{
					"type": "regex",
					"value": "repeat\\(auto-fit,\\s*minmax\\(200px,\\s*1fr\\)\\)",
					"message": "Verwende <kbd>repeat(auto-fit, minmax(200px, 1fr))</kbd>",
					"options": { "caseSensitive": false }
				},
				{ "type": "contains", "value": "gap", "message": "Verwende die <kbd>gap</kbd> Eigenschaft", "options": { "caseSensitive": false } }
			]
		},
		{
			"id": "responsive-4",
			"title": "Mobile-First Media Queries",
			"description": "Verfolge einen Mobile-First-Ansatz: Schreibe Basis-Stile für kleine Bildschirme und erweitere für größere Viewports.",
			"task": "Schreibe eine Media Query für min-width 768px, die die Breite von <kbd>.sidebar</kbd> auf <kbd>250px</kbd> setzt.",
			"previewHTML": "<aside class=\"sidebar\">Seitenleiste</aside>",
			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .sidebar { background: #c8e6c9; padding: 1rem; }",
			"sandboxCSS": "",
			"codePrefix": "/* Füge Mobile-First-Erweiterung hinzu */\n",
			"initialCode": "",
			"codeSuffix": "",
			"solution": "@media (min-width: 768px) {\n  .sidebar {\n    width: 250px;\n  }\n}",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "regex",
					"value": "@media\\s*\\(min-width:\\s*768px\\)",
					"message": "Verwende eine Media Query für min-width: 768px",
					"options": { "caseSensitive": false }
				},
				{
					"type": "contains",
					"value": ".sidebar",
					"message": "Adressiere <kbd>.sidebar</kbd> in der Media Query",
					"options": { "caseSensitive": false }
				},
				{
					"type": "property_value",
					"value": { "property": "width", "expected": "250px" },
					"message": "Setze width auf <kbd>250px</kbd>",
					"options": { "exact": false }
				}
			]
		}
	]
}