public/code-crispies
2
1
Fork 0
Code Issues 7 Pull Requests Actions Activity

refactor: simplify compound class names in lessons
Some checks failed
Deploy static content to Pages / deploy (push) Has been cancelled
Details

Browse Source 
- German flexbox: .flex-container → .wrap
- 00-basics: .responsive-element → .box, .flex-container → .wrap

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Michael Czechowski
2025-12-30 20:21:09 +01:00
parent d27af461ef
commit fdd82e958c
2 changed files with 20 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
lessons/de/flexbox.json
View File

@@ -9,11 +9,11 @@
"id": "flexbox-1",
"title": "Flexbox Container Grundlagen",
"description": "Lerne, wie du einen Flex-Container erstellst und die Haupt- und Querachse verstehst.",
"task": "Füge <code>display: flex</code> zu <code>.flex-container</code> hinzu, um ein Flexbox-Layout zu erstellen.",
"task": "Füge <code>display: flex</code> zu <code>.wrap</code> hinzu, um ein Flexbox-Layout zu erstellen.",
"previewHTML": "<div class='flex-container'><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": ".flex-container { border: 2px dashed #aaa; padding: 1rem; }",
"codePrefix": ".flex-container {\n ",
"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; }",
"codePrefix": ".wrap {\n ",
"initialCode": "",
"codeSuffix": "\n}",
"previewContainer": "preview-area",
@@ -29,11 +29,11 @@
"id": "flexbox-2",
"title": "Flex-Richtung und Umbruch",
"description": "Steuere die Richtung und den Umbruch von Flex-Elementen innerhalb eines Containers.",
"task": "Füge <code>flex-direction: column</code> und <code>flex-wrap: wrap</code> zu <code>.flex-container</code> hinzu.",
"task": "Füge <code>flex-direction: column</code> und <code>flex-wrap: wrap</code> zu <code>.wrap</code> hinzu.",
"previewHTML": "<div class='flex-container'><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": ".flex-container { border: 2px dashed #aaa; padding: 1rem; height: 16rem; display: flex; }",
"codePrefix": ".flex-container {\n ",
"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; height: 16rem; display: flex; }",
"codePrefix": ".wrap {\n ",
"initialCode": "",
"codeSuffix": "\n}",
"previewContainer": "preview-area",
@@ -54,11 +54,11 @@
"id": "flexbox-3",
"title": "Justify Content",
"description": "Lerne, wie du Flex-Elemente entlang der Hauptachse des Containers ausrichtest.",
"task": "Füge <code>justify-content: space-between</code> zu <code>.flex-container</code> hinzu, um die Boxen gleichmäßig zu verteilen.",
"task": "Füge <code>justify-content: space-between</code> zu <code>.wrap</code> hinzu, um die Boxen gleichmäßig zu verteilen.",
"previewHTML": "<div class='flex-container'><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": ".flex-container { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
"codePrefix": ".flex-container {\n ",
"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
"codePrefix": ".wrap {\n ",
"initialCode": "",
"codeSuffix": "\n}",
"previewContainer": "preview-area",
@@ -74,11 +74,11 @@
"id": "flexbox-4",
"title": "Align Items",
"description": "Steuere, wie Flex-Elemente entlang der Querachse des Containers ausgerichtet werden.",
"task": "Füge <code>align-items: center</code> zu <code>.flex-container</code> hinzu, um die Boxen vertikal zu zentrieren.",
"task": "Füge <code>align-items: center</code> zu <code>.wrap</code> hinzu, um die Boxen vertikal zu zentrieren.",
"previewHTML": "<div class='flex-container'><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": ".flex-container { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 10rem; }",
"codePrefix": ".flex-container {\n ",
"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 10rem; }",
"codePrefix": ".wrap {\n ",
"initialCode": "",
"codeSuffix": "\n}",
"previewContainer": "preview-area",
@@ -97,7 +97,7 @@
"task": "Füge <code>flex: 2</code> zu <code>.box2</code> hinzu, um sie doppelt so breit wachsen zu lassen.",
"previewHTML": "<div class='flex-container'><div class='box box1'>1</div><div class='box box2'>2</div><div class='box box3'>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; } .box1 { background: coral; flex: 1; } .box2 { background: mediumseagreen; } .box3 { background: gold; flex: 1; }",
"sandboxCSS": ".flex-container { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
"codePrefix": ".box2 {\n ",
"initialCode": "",
"codeSuffix": "\n}",
@@ -117,7 +117,7 @@
"task": "Füge <code>align-self: flex-start</code> zu <code>.middle</code> hinzu, um es nach oben zu verschieben.",
"previewHTML": "<div class='flex-container'><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": ".flex-container { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 12rem; align-items: center; }",
"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 12rem; align-items: center; }",
"codePrefix": ".middle {\n ",
"initialCode": "",
"codeSuffix": "\n}",