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

12
lessons/00-basics.json
View File

@@ -339,10 +339,10 @@
"title": "Units", "title": "Units",
"description": "CSS offers various measurement units, categorized as either relative or absolute. Relative units (like %, em, rem, vh, vw) scale based on other factors and are essential for responsive design. For instance, 'rem' units scale relative to the root element's font size, while '%' units are proportional to parent element dimensions. Absolute units (like px, pt, cm, in) maintain fixed dimensions regardless of context. Modern web development favors relative units for their adaptability across different screen sizes and user preferences, especially for accessible design.", "description": "CSS offers various measurement units, categorized as either relative or absolute. Relative units (like %, em, rem, vh, vw) scale based on other factors and are essential for responsive design. For instance, 'rem' units scale relative to the root element's font size, while '%' units are proportional to parent element dimensions. Absolute units (like px, pt, cm, in) maintain fixed dimensions regardless of context. Modern web development favors relative units for their adaptability across different screen sizes and user preferences, especially for accessible design.",
"task": "Set the width of the responsive element to '80%' of its parent container and its font-size to '18px'. Percentage width enables the element to adapt to different screen sizes, while pixel units provide precise control for font sizes.", "task": "Set the width of the responsive element to '80%' of its parent container and its font-size to '18px'. Percentage width enables the element to adapt to different screen sizes, while pixel units provide precise control for font sizes.",
"previewHTML": "<div class='container'><div class='responsive-element'>This element should have responsive width and font size.</div></div>", "previewHTML": "<div class='outer'><div class='box'>This element should have responsive width and font size.</div></div>",
"previewBaseCSS": "body { font-family: Arial, sans-serif; padding: 20px; line-height: 1.6; } .container { background-color: #f0f0f0; padding: 15px; width: 100%; } .responsive-element { background-color: #bbdefb; padding: 15px; }", "previewBaseCSS": "body { font-family: Arial, sans-serif; padding: 20px; line-height: 1.6; } .outer { background-color: #f0f0f0; padding: 15px; width: 100%; } .box { background-color: #bbdefb; padding: 15px; }",
"sandboxCSS": "", "sandboxCSS": "",
"codePrefix": "/* Set width using percentage and font-size using pixels */\n.responsive-element {\n /* Add your code below */\n ", "codePrefix": "/* Set width using percentage and font-size using pixels */\n.box {\n /* Add your code below */\n ",
"initialCode": "", "initialCode": "",
"codeSuffix": "\n}", "codeSuffix": "\n}",
"previewContainer": "preview-area", "previewContainer": "preview-area",
@@ -449,10 +449,10 @@
"title": "Flex Basics", "title": "Flex Basics",
"description": "Flexbox is a powerful layout model that makes it easier to design flexible responsive layouts. It consists of flex containers and flex items. The container is the parent element with 'display: flex' or 'display: inline-flex' set, while items are the direct children within. Flexbox provides properties for controlling direction, alignment, order, and proportions of items. With flexbox, complex layouts that would require tricky positioning and floats can be achieved with much cleaner and more maintainable code.", "description": "Flexbox is a powerful layout model that makes it easier to design flexible responsive layouts. It consists of flex containers and flex items. The container is the parent element with 'display: flex' or 'display: inline-flex' set, while items are the direct children within. Flexbox provides properties for controlling direction, alignment, order, and proportions of items. With flexbox, complex layouts that would require tricky positioning and floats can be achieved with much cleaner and more maintainable code.",
"task": "Create a basic flexbox container by adding 'display: flex' to the parent element. Then set flex-direction to 'row' to make the items display horizontally (this is the default behavior, but it's good to specify it explicitly).", "task": "Create a basic flexbox container by adding 'display: flex' to the parent element. Then set flex-direction to 'row' to make the items display horizontally (this is the default behavior, but it's good to specify it explicitly).",
"previewHTML": "<div class='flex-container'><div class='flex-item'>Item 1</div><div class='flex-item'>Item 2</div><div class='flex-item'>Item 3</div></div>", "previewHTML": "<div class='wrap'><div class='item'>Item 1</div><div class='item'>Item 2</div><div class='item'>Item 3</div></div>",
"previewBaseCSS": "body { font-family: Arial, sans-serif; padding: 20px; line-height: 1.6; } .flex-item { background-color: #2196f3; color: white; padding: 15px; margin: 5px; }", "previewBaseCSS": "body { font-family: Arial, sans-serif; padding: 20px; line-height: 1.6; } .item { background-color: #2196f3; color: white; padding: 15px; margin: 5px; }",
"sandboxCSS": "", "sandboxCSS": "",
"codePrefix": "/* Create a flexbox container with horizontal items */\n.flex-container {\n /* Add your code below */\n ", "codePrefix": "/* Create a flexbox container with horizontal items */\n.wrap {\n /* Add your code below */\n ",
"initialCode": "", "initialCode": "",
"codeSuffix": "\n}", "codeSuffix": "\n}",
"previewContainer": "preview-area", "previewContainer": "preview-area",

28
lessons/de/flexbox.json
View File

@@ -9,11 +9,11 @@
"id": "flexbox-1", "id": "flexbox-1",
"title": "Flexbox Container Grundlagen", "title": "Flexbox Container Grundlagen",
"description": "Lerne, wie du einen Flex-Container erstellst und die Haupt- und Querachse verstehst.", "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>", "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; }", "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; }", "sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; }",
"codePrefix": ".flex-container {\n ", "codePrefix": ".wrap {\n ",
"initialCode": "", "initialCode": "",
"codeSuffix": "\n}", "codeSuffix": "\n}",
"previewContainer": "preview-area", "previewContainer": "preview-area",
@@ -29,11 +29,11 @@
"id": "flexbox-2", "id": "flexbox-2",
"title": "Flex-Richtung und Umbruch", "title": "Flex-Richtung und Umbruch",
"description": "Steuere die Richtung und den Umbruch von Flex-Elementen innerhalb eines Containers.", "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>", "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; }", "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; }", "sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; height: 16rem; display: flex; }",
"codePrefix": ".flex-container {\n ", "codePrefix": ".wrap {\n ",
"initialCode": "", "initialCode": "",
"codeSuffix": "\n}", "codeSuffix": "\n}",
"previewContainer": "preview-area", "previewContainer": "preview-area",
@@ -54,11 +54,11 @@
"id": "flexbox-3", "id": "flexbox-3",
"title": "Justify Content", "title": "Justify Content",
"description": "Lerne, wie du Flex-Elemente entlang der Hauptachse des Containers ausrichtest.", "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>", "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; }", "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; }", "sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
"codePrefix": ".flex-container {\n ", "codePrefix": ".wrap {\n ",
"initialCode": "", "initialCode": "",
"codeSuffix": "\n}", "codeSuffix": "\n}",
"previewContainer": "preview-area", "previewContainer": "preview-area",
@@ -74,11 +74,11 @@
"id": "flexbox-4", "id": "flexbox-4",
"title": "Align Items", "title": "Align Items",
"description": "Steuere, wie Flex-Elemente entlang der Querachse des Containers ausgerichtet werden.", "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>", "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; }", "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; }", "sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 10rem; }",
"codePrefix": ".flex-container {\n ", "codePrefix": ".wrap {\n ",
"initialCode": "", "initialCode": "",
"codeSuffix": "\n}", "codeSuffix": "\n}",
"previewContainer": "preview-area", "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.", "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>", "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; }", "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 ", "codePrefix": ".box2 {\n ",
"initialCode": "", "initialCode": "",
"codeSuffix": "\n}", "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.", "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>", "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; }", "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 ", "codePrefix": ".middle {\n ",
"initialCode": "", "initialCode": "",
"codeSuffix": "\n}", "codeSuffix": "\n}",