From fdd82e958c18acf11da04bf570a672bcb234a264 Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Tue, 30 Dec 2025 20:21:09 +0100 Subject: [PATCH] refactor: simplify compound class names in lessons MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- lessons/00-basics.json | 12 ++++++------ lessons/de/flexbox.json | 28 ++++++++++++++-------------- 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/lessons/00-basics.json b/lessons/00-basics.json index 91fdcaf..3969734 100644 --- a/lessons/00-basics.json +++ b/lessons/00-basics.json @@ -339,10 +339,10 @@ "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.", "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": "
This element should have responsive width and font size.
", - "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; }", + "previewHTML": "
This element should have responsive width and font size.
", + "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": "", - "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": "", "codeSuffix": "\n}", "previewContainer": "preview-area", @@ -449,10 +449,10 @@ "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.", "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": "
Item 1
Item 2
Item 3
", - "previewBaseCSS": "body { font-family: Arial, sans-serif; padding: 20px; line-height: 1.6; } .flex-item { background-color: #2196f3; color: white; padding: 15px; margin: 5px; }", + "previewHTML": "
Item 1
Item 2
Item 3
", + "previewBaseCSS": "body { font-family: Arial, sans-serif; padding: 20px; line-height: 1.6; } .item { background-color: #2196f3; color: white; padding: 15px; margin: 5px; }", "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": "", "codeSuffix": "\n}", "previewContainer": "preview-area", diff --git a/lessons/de/flexbox.json b/lessons/de/flexbox.json index 83ec27f..f594d60 100644 --- a/lessons/de/flexbox.json +++ b/lessons/de/flexbox.json @@ -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 display: flex zu .flex-container hinzu, um ein Flexbox-Layout zu erstellen.", + "task": "Füge display: flex zu .wrap hinzu, um ein Flexbox-Layout zu erstellen.", "previewHTML": "
1
2
3
", "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 flex-direction: column und flex-wrap: wrap zu .flex-container hinzu.", + "task": "Füge flex-direction: column und flex-wrap: wrap zu .wrap hinzu.", "previewHTML": "
1
2
3
4
5
", "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 justify-content: space-between zu .flex-container hinzu, um die Boxen gleichmäßig zu verteilen.", + "task": "Füge justify-content: space-between zu .wrap hinzu, um die Boxen gleichmäßig zu verteilen.", "previewHTML": "
1
2
3
", "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 align-items: center zu .flex-container hinzu, um die Boxen vertikal zu zentrieren.", + "task": "Füge align-items: center zu .wrap hinzu, um die Boxen vertikal zu zentrieren.", "previewHTML": "
1
2
3
", "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 flex: 2 zu .box2 hinzu, um sie doppelt so breit wachsen zu lassen.", "previewHTML": "
1
2
3
", "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 align-self: flex-start zu .middle hinzu, um es nach oben zu verschieben.", "previewHTML": "
1
2
3
", "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}",