{
	"$schema": "../../schemas/code-crispies-module-schema.json",
	"id": "welcome",
	"title": "Code Crispies",
	"description": "Willkommen bei Code Crispies - deine interaktive Lernplattform für Webentwicklung",
	"mode": "html",
	"difficulty": "beginner",
	"lessons": [
		{
			"id": "welcome",
			"title": "Willkommen!",
			"description": "<strong>Code Crispies</strong> ist eine kostenlose Open-Source-Plattform zum Erlernen von Webentwicklung durch praktische Übungen. Kein Konto erforderlich!<br><br><strong>Was du lernst:</strong><br>• <strong>HTML</strong> - Semantische Elemente, Formulare, Tabellen, SVG (<em>HTML Block & Inline</em>, <em>HTML Formulare</em>, <em>HTML Tabellen</em>)<br>• <strong>CSS</strong> - Selektoren, Box-Model, Flexbox, Animationen (<em>CSS Selektoren</em>, <em>CSS Box-Model</em>, <em>CSS Flexbox</em>)<br>• <strong>Responsive Design</strong> - Media Queries und Mobile-First Layouts<br><br><strong>So funktioniert's:</strong><br>1. Lies die Aufgabe im linken Bereich<br>2. Schreibe Code im Editor<br>3. Sieh Live-Ergebnisse in der Vorschau<br>4. Bekomme sofortiges Feedback mit Hinweisen<br><br><strong>Tastenkürzel:</strong> <kbd>Strg+Enter</kbd> ausführen, <kbd>Strg+Z</kbd> rückgängig<br><br><strong>Weitere Ressourcen:</strong><br>• <a href=\"https://nextlevelshit.github.io/html-over-js/\" target=\"_blank\">HTML over JS</a> - Native HTML vs JavaScript-Lösungen<br>• <a href=\"https://nextlevelshit.github.io/web-engineering-mandala/\" target=\"_blank\">Web Engineering Mandala</a> - JavaScript Technologie-Roadmap",
			"task": "Erstelle eine Überschrift mit <kbd>&lt;h1&gt;Hallo Welt&lt;/h1&gt;</kbd>",
			"previewHTML": "",
			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; } h1 { color: #6366f1; }",
			"sandboxCSS": "",
			"initialCode": "",
			"solution": "<h1>Hallo Welt</h1>",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "element_exists",
					"value": "h1",
					"message": "Füge ein <kbd>&lt;h1&gt;</kbd> Überschrift-Element hinzu"
				},
				{
					"type": "contains",
					"value": "Hallo",
					"message": "Füge den Text 'Hallo' in deine Überschrift ein"
				}
			]
		},
		{
			"id": "get-started",
			"title": "Los geht's!",
			"description": "<strong>Du bist bereit!</strong> Öffne das Menü (☰) um alle Module zu erkunden.<br><br><strong>Empfohlener Lernpfad:</strong><br>1. <em>HTML Block & Inline</em> - Container vs Inline-Elemente verstehen<br>2. <em>HTML Formulare</em> - Interaktive Formulare mit Validierung erstellen<br>3. <em>CSS Selektoren</em> - Elemente präzise ansprechen<br>4. <em>CSS Box-Model</em> - Padding, Margin, Borders meistern<br>5. <em>CSS Flexbox</em> - Flexible Layouts erstellen<br>6. <em>CSS Animationen</em> - Bewegung und Übergänge hinzufügen<br><br><strong>Tipps:</strong><br>• Nutze <em>Lösung einblenden</em> um das Zielergebnis zu sehen<br>• Dein Fortschritt wird automatisch gespeichert<br>• Probiere Emmet im HTML-Modus: <kbd>ul>li*3</kbd> + Tab<br><br><strong>Open Source:</strong><br>• <a href=\"https://github.com/nextlevelshit/code-crispies\" target=\"_blank\">GitHub</a> · <a href=\"https://git.librete.ch/libretech/code-crispies\" target=\"_blank\">Gitea</a><br>• Entwickelt von <a href=\"https://librete.ch\" target=\"_blank\">librete.ch</a> · <a href=\"https://www.linkedin.com/in/michael-werner-czechowski\" target=\"_blank\">LinkedIn</a>",
			"task": "Erstelle einen Button mit <kbd>&lt;button&gt;Los geht's!&lt;/button&gt;</kbd>",
			"previewHTML": "",
			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; display: flex; justify-content: center; align-items: center; min-height: 80px; } button { background: #6366f1; color: white; border: none; padding: 12px 24px; border-radius: 6px; font-size: 1.1em; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); } button:hover { transform: scale(1.05); box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4); }",
			"sandboxCSS": "",
			"initialCode": "",
			"solution": "<button>Los geht's!</button>",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "element_exists",
					"value": "button",
					"message": "Füge ein <kbd>&lt;button&gt;</kbd> Element hinzu"
				},
				{
					"type": "contains",
					"value": "geht",
					"message": "Füge den Text 'Los geht's!' in den Button ein"
				}
			]
		}
	]
}