From a8db5b69cf524be8e58d17941b12da2e49867b61 Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Tue, 30 Dec 2025 12:25:15 +0100 Subject: [PATCH] refactor: improve lesson clarity and use friendlier values Flexbox and Box Model lessons: - Use explicit task instructions with selector AND property - Include selector in codePrefix for better context - Replace hex colors with named CSS colors (steelblue, coral, etc.) - Simplify values (2px instead of 0.125rem, 1rem instead of 1.25rem) - Remove redundant contains validations - Wrap code examples in tags for proper styling --- lessons/01-box-model.json | 138 ++++++++++--------------------- lessons/de/01-box-model.json | 132 +++++++++-------------------- lessons/de/flexbox.json | 155 +++++++++-------------------------- lessons/flexbox.json | 142 +++++++++----------------------- 4 files changed, 162 insertions(+), 405 deletions(-) diff --git a/lessons/01-box-model.json b/lessons/01-box-model.json index 1e21dcd..1856165 100644 --- a/lessons/01-box-model.json +++ b/lessons/01-box-model.json @@ -8,58 +8,40 @@ { "id": "box-model-1", "title": "Box Model Components", - "description": "The CSS box model consists of four concentric layers that build an element's total dimensions: content area (innermost), padding, border, and margin (outermost). Understanding how these components interact is essential for precise layout control.", - "task": "Add padding of '1.25rem' to the box to create space between its content and border. Padding is the space between an element's content and its border, giving content room to breathe.", + "description": "The CSS box model consists of four concentric layers: content area (innermost), padding, border, and margin (outermost). Understanding how these components interact is essential for precise layout control.", + "task": "Add padding: 1rem to .box to create space between its content and border.", "previewHTML": "
Box Model Components
", - "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1rem; } .box { background-color: #f0f0f0; border: 0.125rem dashed #aaa; }", + "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background-color: lavender; border: 2px dashed slategray; }", "sandboxCSS": "", - "codePrefix": "/* Add padding to the box element */\n.box {\n /* Add your code below */\n ", + "codePrefix": ".box {\n ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", "validations": [ - { - "type": "contains", - "value": "padding", - "message": "Use the 'padding' property", - "options": { "caseSensitive": false } - }, { "type": "property_value", - "value": { "property": "padding", "expected": "1.25rem" }, - "message": "Set padding to exactly '1.25rem'" + "value": { "property": "padding", "expected": "1rem" }, + "message": "Set padding to '1rem'" } ] }, { "id": "box-model-2", "title": "Adding Borders", - "description": "Borders outline an element, creating visual separation from surrounding content. CSS allows you to control border thickness, style (solid, dashed, dotted, etc.), and color independently or through shorthand notation.", - "task": "Add a solid border with thickness '0.125rem' and color '#333' to the box element. The border property accepts three values: width, style, and color.", + "description": "Borders outline an element, creating visual separation from surrounding content. The border shorthand accepts three values: width, style, and color.", + "task": "Add border: 2px solid darkslategray to .box.", "previewHTML": "
This box needs a border
", - "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1rem; } .box { background-color: #f0f0f0; padding: 1.25rem; }", + "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background-color: mintcream; padding: 1rem; }", "sandboxCSS": "", - "codePrefix": "/* Add a border to the box */\n.box {\n /* Add your code below */\n ", + "codePrefix": ".box {\n ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", "validations": [ - { - "type": "contains", - "value": "border", - "message": "Use the 'border' property", - "options": { "caseSensitive": false } - }, { "type": "regex", - "value": "border:\\s*0.125rem\\s+solid\\s+#333", - "message": "Set border to '0.125rem solid #333'", - "options": { "caseSensitive": false } - }, - { - "type": "contains", - "value": "solid", - "message": "Include 'solid' as the border style", + "value": "border:\\s*2px\\s+solid\\s+darkslategray", + "message": "Set border to '2px solid darkslategray'", "options": { "caseSensitive": false } } ] @@ -67,22 +49,16 @@ { "id": "box-model-3", "title": "Adding Margins", - "description": "Margins create space between elements, controlling how they relate to one another within a layout. Unlike padding (which affects internal spacing), margins exist outside the element's border and create separation from adjacent elements.", - "task": "Add margin of '1rem' to the box element to create space between it and surrounding elements. The margin property sets space outside an element's border.", + "description": "Margins create space between elements, controlling how they relate to one another within a layout. Unlike padding (which affects internal spacing), margins exist outside the element's border.", + "task": "Add margin: 1rem to .margin-box to create space between it and the adjacent element.", "previewHTML": "
This box needs margins
Adjacent element
", - "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1rem; } .container { background-color: #f8f8f8; padding: 0.5rem; } .margin-box { background-color: #d1c4e9; padding: 1rem; border: 0.125rem solid #7e57c2; } .neighbor { background-color: #bbdefb; padding: 1rem; border: 0.125rem solid #42a5f5; }", + "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .container { background-color: whitesmoke; padding: 8px; } .margin-box { background-color: plum; padding: 1rem; border: 2px solid orchid; } .neighbor { background-color: lightblue; padding: 1rem; border: 2px solid steelblue; }", "sandboxCSS": "", - "codePrefix": "/* Add margin to the box */\n.margin-box {\n /* Add your code below */\n ", + "codePrefix": ".margin-box {\n ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", "validations": [ - { - "type": "contains", - "value": "margin", - "message": "Use the 'margin' property", - "options": { "caseSensitive": false } - }, { "type": "property_value", "value": { "property": "margin", "expected": "1rem" }, @@ -92,23 +68,17 @@ }, { "id": "box-model-4", - "title": "Box Sizing: Content-Box vs. Border-Box", - "description": "The box-sizing property determines how element dimensions are calculated. The default 'content-box' model excludes padding and border from width/height values, while 'border-box' includes them, making layout calculations more intuitive.", - "task": "Set the box-sizing property to 'border-box' for the element. This makes padding and border included in the element's specified width and height.", + "title": "Box Sizing: Border-Box", + "description": "The box-sizing property determines how element dimensions are calculated. The default 'content-box' excludes padding and border from width/height, while 'border-box' includes them, making layout calculations more intuitive.", + "task": "Add box-sizing: border-box to .border-box so padding and border are included in its width.", "previewHTML": "
Content-box (default)
Border-box
", - "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1rem; } .sizing-demo { display: flex; gap: 1rem; } .box { width: 200px; padding: 1rem; border: 0.25rem solid #333; background: #f5f5f5; } .content-box { box-sizing: content-box; } .border-box { /* Your code will go here */ }", + "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .sizing-demo { display: flex; gap: 1rem; } .box { width: 200px; padding: 1rem; border: 4px solid teal; background: lightcyan; } .content-box { box-sizing: content-box; }", "sandboxCSS": "", - "codePrefix": "/* Set box-sizing property */\n.border-box {\n /* Add your code below */\n ", + "codePrefix": ".border-box {\n ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", "validations": [ - { - "type": "contains", - "value": "box-sizing", - "message": "Use the 'box-sizing' property", - "options": { "caseSensitive": false } - }, { "type": "property_value", "value": { "property": "box-sizing", "expected": "border-box" }, @@ -119,22 +89,16 @@ { "id": "box-model-5", "title": "Margin Collapse", - "description": "An important behavior of the CSS box model is vertical margin collapse: when two vertical margins meet, they don't add up but instead collapse to the larger of the two values. Understanding this behavior is crucial for consistent vertical spacing.", - "task": "Add a bottom margin of '2rem' to the first paragraph. You'll observe that the space between paragraphs equals 2rem (not 3rem), demonstrating margin collapse.", + "description": "When two vertical margins meet, they collapse to the larger value instead of adding up. Understanding this behavior is crucial for consistent vertical spacing.", + "task": "Add margin-bottom: 2rem to .first. Notice the space between paragraphs equals 2rem (not 3rem) due to margin collapse.", "previewHTML": "

This paragraph has a bottom margin.

This paragraph has a top margin of 1rem.

", - "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1rem; } .collapse-demo { border: 0.0625rem solid #ddd; padding: 0.5rem; background: #f9f9f9; } .second { margin-top: 1rem; background: #f0f0f0; }", + "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .collapse-demo { border: 1px solid silver; padding: 8px; background: ghostwhite; } .second { margin-top: 1rem; background: linen; }", "sandboxCSS": "", - "codePrefix": "/* Add margin to observe margin collapse */\n.first {\n /* Add your code below */\n ", + "codePrefix": ".first {\n ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", "validations": [ - { - "type": "contains", - "value": "margin-bottom", - "message": "Use the 'margin-bottom' property", - "options": { "caseSensitive": false } - }, { "type": "property_value", "value": { "property": "margin-bottom", "expected": "2rem" }, @@ -145,26 +109,20 @@ { "id": "box-model-6", "title": "Margin Shorthand Notation", - "description": "CSS offers shorthand notations to concisely set multiple properties at once. The margin shorthand can set all four sides (top, right, bottom, left) with values specified in clockwise order. Understanding shorthand syntax improves coding efficiency.", - "task": "Use margin shorthand syntax to set the top and bottom margins to '1rem' and the left and right margins to '2rem' simultaneously.", + "description": "The margin shorthand can set all four sides at once. Two values set vertical (top/bottom) and horizontal (left/right) margins respectively.", + "task": "Add margin: 1rem 2rem to .shorthand-box for 1rem top/bottom and 2rem left/right.", "previewHTML": "
This box needs margins: 1rem top/bottom, 2rem left/right
", - "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1rem; } .container { background-color: #f5f5f5; padding: 0.5rem; } .shorthand-box { background-color: #e8f5e9; border: 0.125rem solid #66bb6a; padding: 1rem; }", + "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .container { background-color: whitesmoke; padding: 8px; } .shorthand-box { background-color: honeydew; border: 2px solid mediumseagreen; padding: 1rem; }", "sandboxCSS": "", - "codePrefix": "/* Use margin shorthand notation */\n.shorthand-box {\n /* Add your code below */\n ", + "codePrefix": ".shorthand-box {\n ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", "validations": [ - { - "type": "contains", - "value": "margin", - "message": "Use the 'margin' property", - "options": { "caseSensitive": false } - }, { "type": "regex", "value": "margin:\\s*1rem\\s+2rem", - "message": "Use 'margin: 1rem 2rem' to set vertical and horizontal margins", + "message": "Set margin to '1rem 2rem'", "options": { "caseSensitive": false } } ] @@ -172,52 +130,40 @@ { "id": "box-model-7", "title": "Padding Shorthand Notation", - "description": "Similar to margin shorthand, padding shorthand allows setting all four sides of padding concisely. The syntax follows the same clockwise pattern: top, right, bottom, left (or TRouBLe). When fewer values are specified, CSS applies specific rules to determine missing sides.", - "task": "Use padding shorthand notation to set all sides to '1.5rem' in a single declaration. When a single value is provided, it applies to all four sides.", + "description": "Like margin, padding shorthand allows setting all sides at once. A single value applies to all four sides equally.", + "task": "Add padding: 1.5rem to .padding-box to add equal padding on all sides.", "previewHTML": "
This box needs equal padding on all sides
", - "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1rem; } .padding-box { background-color: #fff3e0; border: 0.125rem solid #ff9800; }", + "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .padding-box { background-color: papayawhip; border: 2px solid orange; }", "sandboxCSS": "", - "codePrefix": "/* Use padding shorthand notation */\n.padding-box {\n /* Add your code below */\n ", + "codePrefix": ".padding-box {\n ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", "validations": [ - { - "type": "contains", - "value": "padding", - "message": "Use the 'padding' property", - "options": { "caseSensitive": false } - }, { "type": "property_value", "value": { "property": "padding", "expected": "1.5rem" }, - "message": "Set padding to '1.5rem' on all sides" + "message": "Set padding to '1.5rem'" } ] }, { "id": "box-model-8", - "title": "Border Shorthand and Individual Properties", - "description": "Border properties can be set individually (border-width, border-style, border-color) or using the border shorthand. For even more granular control, you can target specific sides (border-top, border-right, etc.) with their own values.", - "task": "Set only the bottom border of the element to '0.25rem solid #2196f3'. Use the specific border-bottom property rather than the general border property.", + "title": "Border on Specific Sides", + "description": "For granular control, you can target specific sides with border-top, border-right, border-bottom, or border-left.", + "task": "Add border-bottom: 4px solid dodgerblue to .border-demo.", "previewHTML": "
This element needs only a bottom border
", - "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1rem; } .border-demo { padding: 1rem; background-color: #e3f2fd; }", + "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .border-demo { padding: 1rem; background-color: aliceblue; }", "sandboxCSS": "", - "codePrefix": "/* Add a bottom border only */\n.border-demo {\n /* Add your code below */\n ", + "codePrefix": ".border-demo {\n ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", "validations": [ - { - "type": "contains", - "value": "border-bottom", - "message": "Use the 'border-bottom' property", - "options": { "caseSensitive": false } - }, { "type": "regex", - "value": "border-bottom:\\s*0.25rem\\s+solid\\s+#2196f3", - "message": "Set border-bottom to '0.25rem solid #2196f3'", + "value": "border-bottom:\\s*4px\\s+solid\\s+dodgerblue", + "message": "Set border-bottom to '4px solid dodgerblue'", "options": { "caseSensitive": false } } ] diff --git a/lessons/de/01-box-model.json b/lessons/de/01-box-model.json index 3e1a7cc..66e307f 100644 --- a/lessons/de/01-box-model.json +++ b/lessons/de/01-box-model.json @@ -9,57 +9,39 @@ "id": "box-model-1", "title": "Box-Modell Komponenten", "description": "Das CSS Box-Modell besteht aus vier konzentrischen Schichten: Inhalt (innerste), Padding, Border und Margin (äußerste). Zu verstehen, wie diese Komponenten zusammenwirken, ist essentiell für präzise Layout-Kontrolle.", - "task": "Füge dem Box-Element ein Padding von '1.25rem' hinzu, um Abstand zwischen Inhalt und Rahmen zu schaffen.", + "task": "Füge padding: 1rem zu .box hinzu, um Abstand zwischen Inhalt und Rahmen zu schaffen.", "previewHTML": "
Box-Modell Komponenten
", - "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1rem; } .box { background-color: #f0f0f0; border: 0.125rem dashed #aaa; }", + "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background-color: lavender; border: 2px dashed slategray; }", "sandboxCSS": "", - "codePrefix": "/* Füge Padding zum Box-Element hinzu */\n.box {\n /* Füge deinen Code unten ein */\n ", + "codePrefix": ".box {\n ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", "validations": [ - { - "type": "contains", - "value": "padding", - "message": "Verwende die 'padding' Eigenschaft", - "options": { "caseSensitive": false } - }, { "type": "property_value", - "value": { "property": "padding", "expected": "1.25rem" }, - "message": "Setze padding auf genau '1.25rem'" + "value": { "property": "padding", "expected": "1rem" }, + "message": "Setze padding auf '1rem'" } ] }, { "id": "box-model-2", "title": "Rahmen hinzufügen", - "description": "Rahmen umranden ein Element und schaffen visuelle Trennung. CSS erlaubt die Kontrolle von Dicke, Stil (solid, dashed, dotted, etc.) und Farbe.", - "task": "Füge einen durchgezogenen Rahmen mit Dicke '0.125rem' und Farbe '#333' hinzu. Die border-Eigenschaft akzeptiert drei Werte: Breite, Stil und Farbe.", + "description": "Rahmen umranden ein Element und schaffen visuelle Trennung. Die border-Kurzschreibweise akzeptiert drei Werte: Breite, Stil und Farbe.", + "task": "Füge border: 2px solid darkslategray zu .box hinzu.", "previewHTML": "
Diese Box braucht einen Rahmen
", - "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1rem; } .box { background-color: #f0f0f0; padding: 1.25rem; }", + "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background-color: mintcream; padding: 1rem; }", "sandboxCSS": "", - "codePrefix": "/* Füge einen Rahmen zur Box hinzu */\n.box {\n /* Füge deinen Code unten ein */\n ", + "codePrefix": ".box {\n ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", "validations": [ - { - "type": "contains", - "value": "border", - "message": "Verwende die 'border' Eigenschaft", - "options": { "caseSensitive": false } - }, { "type": "regex", - "value": "border:\\s*0.125rem\\s+solid\\s+#333", - "message": "Setze border auf '0.125rem solid #333'", - "options": { "caseSensitive": false } - }, - { - "type": "contains", - "value": "solid", - "message": "Verwende 'solid' als Rahmenstil", + "value": "border:\\s*2px\\s+solid\\s+darkslategray", + "message": "Setze border auf '2px solid darkslategray'", "options": { "caseSensitive": false } } ] @@ -68,21 +50,15 @@ "id": "box-model-3", "title": "Außenabstände hinzufügen", "description": "Margins schaffen Abstand zwischen Elementen. Anders als Padding (das den inneren Abstand beeinflusst) existiert Margin außerhalb des Rahmens.", - "task": "Füge dem Box-Element einen Margin von '1rem' hinzu, um Abstand zu benachbarten Elementen zu schaffen.", + "task": "Füge margin: 1rem zu .margin-box hinzu, um Abstand zum benachbarten Element zu schaffen.", "previewHTML": "
Diese Box braucht Margins
Benachbartes Element
", - "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1rem; } .container { background-color: #f8f8f8; padding: 0.5rem; } .margin-box { background-color: #d1c4e9; padding: 1rem; border: 0.125rem solid #7e57c2; } .neighbor { background-color: #bbdefb; padding: 1rem; border: 0.125rem solid #42a5f5; }", + "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .container { background-color: whitesmoke; padding: 8px; } .margin-box { background-color: plum; padding: 1rem; border: 2px solid orchid; } .neighbor { background-color: lightblue; padding: 1rem; border: 2px solid steelblue; }", "sandboxCSS": "", - "codePrefix": "/* Füge Margin zur Box hinzu */\n.margin-box {\n /* Füge deinen Code unten ein */\n ", + "codePrefix": ".margin-box {\n ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", "validations": [ - { - "type": "contains", - "value": "margin", - "message": "Verwende die 'margin' Eigenschaft", - "options": { "caseSensitive": false } - }, { "type": "property_value", "value": { "property": "margin", "expected": "1rem" }, @@ -92,23 +68,17 @@ }, { "id": "box-model-4", - "title": "Box-Sizing: Content-Box vs. Border-Box", + "title": "Box-Sizing: Border-Box", "description": "Die box-sizing Eigenschaft bestimmt, wie Elementdimensionen berechnet werden. 'content-box' (Standard) schließt Padding und Border aus, während 'border-box' sie einschließt.", - "task": "Setze box-sizing auf 'border-box'. Dadurch werden Padding und Border in die angegebene Breite und Höhe einbezogen.", + "task": "Füge box-sizing: border-box zu .border-box hinzu, damit Padding und Border in die Breite einbezogen werden.", "previewHTML": "
Content-box (Standard)
Border-box
", - "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1rem; } .sizing-demo { display: flex; gap: 1rem; } .box { width: 200px; padding: 1rem; border: 0.25rem solid #333; background: #f5f5f5; } .content-box { box-sizing: content-box; } .border-box { /* Dein Code hier */ }", + "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .sizing-demo { display: flex; gap: 1rem; } .box { width: 200px; padding: 1rem; border: 4px solid teal; background: lightcyan; } .content-box { box-sizing: content-box; }", "sandboxCSS": "", - "codePrefix": "/* Setze die box-sizing Eigenschaft */\n.border-box {\n /* Füge deinen Code unten ein */\n ", + "codePrefix": ".border-box {\n ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", "validations": [ - { - "type": "contains", - "value": "box-sizing", - "message": "Verwende die 'box-sizing' Eigenschaft", - "options": { "caseSensitive": false } - }, { "type": "property_value", "value": { "property": "box-sizing", "expected": "border-box" }, @@ -119,22 +89,16 @@ { "id": "box-model-5", "title": "Margin-Kollaps", - "description": "Ein wichtiges Verhalten des Box-Modells: Wenn zwei vertikale Margins aufeinandertreffen, kollabieren sie zum größeren der beiden Werte.", - "task": "Füge dem ersten Absatz einen bottom-margin von '2rem' hinzu. Der Abstand zwischen den Absätzen beträgt 2rem (nicht 3rem) - das ist Margin-Kollaps.", + "description": "Wenn zwei vertikale Margins aufeinandertreffen, kollabieren sie zum größeren der beiden Werte statt zu addieren.", + "task": "Füge margin-bottom: 2rem zu .first hinzu. Der Abstand zwischen den Absätzen beträgt 2rem (nicht 3rem) durch Margin-Kollaps.", "previewHTML": "

Dieser Absatz hat einen Bottom-Margin.

Dieser Absatz hat einen Top-Margin von 1rem.

", - "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1rem; } .collapse-demo { border: 0.0625rem solid #ddd; padding: 0.5rem; background: #f9f9f9; } .second { margin-top: 1rem; background: #f0f0f0; }", + "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .collapse-demo { border: 1px solid silver; padding: 8px; background: ghostwhite; } .second { margin-top: 1rem; background: linen; }", "sandboxCSS": "", - "codePrefix": "/* Füge Margin hinzu, um Margin-Kollaps zu beobachten */\n.first {\n /* Füge deinen Code unten ein */\n ", + "codePrefix": ".first {\n ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", "validations": [ - { - "type": "contains", - "value": "margin-bottom", - "message": "Verwende die 'margin-bottom' Eigenschaft", - "options": { "caseSensitive": false } - }, { "type": "property_value", "value": { "property": "margin-bottom", "expected": "2rem" }, @@ -145,26 +109,20 @@ { "id": "box-model-6", "title": "Margin-Kurzschreibweise", - "description": "CSS bietet Kurzschreibweisen, um mehrere Eigenschaften gleichzeitig zu setzen. Die Margin-Kurzschreibweise setzt alle vier Seiten (oben, rechts, unten, links) im Uhrzeigersinn.", - "task": "Verwende die Margin-Kurzschreibweise, um Top/Bottom auf '1rem' und Left/Right auf '2rem' zu setzen.", + "description": "Die Margin-Kurzschreibweise kann alle vier Seiten setzen. Zwei Werte setzen vertikale (oben/unten) und horizontale (links/rechts) Margins.", + "task": "Füge margin: 1rem 2rem zu .shorthand-box hinzu für 1rem oben/unten und 2rem links/rechts.", "previewHTML": "
Diese Box braucht Margins: 1rem oben/unten, 2rem links/rechts
", - "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1rem; } .container { background-color: #f5f5f5; padding: 0.5rem; } .shorthand-box { background-color: #e8f5e9; border: 0.125rem solid #66bb6a; padding: 1rem; }", + "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .container { background-color: whitesmoke; padding: 8px; } .shorthand-box { background-color: honeydew; border: 2px solid mediumseagreen; padding: 1rem; }", "sandboxCSS": "", - "codePrefix": "/* Verwende die Margin-Kurzschreibweise */\n.shorthand-box {\n /* Füge deinen Code unten ein */\n ", + "codePrefix": ".shorthand-box {\n ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", "validations": [ - { - "type": "contains", - "value": "margin", - "message": "Verwende die 'margin' Eigenschaft", - "options": { "caseSensitive": false } - }, { "type": "regex", "value": "margin:\\s*1rem\\s+2rem", - "message": "Verwende 'margin: 1rem 2rem' für vertikale und horizontale Margins", + "message": "Setze margin auf '1rem 2rem'", "options": { "caseSensitive": false } } ] @@ -172,52 +130,40 @@ { "id": "box-model-7", "title": "Padding-Kurzschreibweise", - "description": "Ähnlich wie Margin erlaubt Padding-Kurzschreibweise das Setzen aller vier Seiten. Die Syntax folgt dem gleichen Muster: oben, rechts, unten, links (TRouBLe).", - "task": "Verwende Padding-Kurzschreibweise, um alle Seiten auf '1.5rem' zu setzen. Ein einzelner Wert gilt für alle vier Seiten.", + "description": "Wie Margin erlaubt Padding-Kurzschreibweise das Setzen aller Seiten. Ein einzelner Wert gilt für alle vier Seiten.", + "task": "Füge padding: 1.5rem zu .padding-box hinzu für gleichmäßiges Padding.", "previewHTML": "
Diese Box braucht gleichmäßiges Padding
", - "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1rem; } .padding-box { background-color: #fff3e0; border: 0.125rem solid #ff9800; }", + "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .padding-box { background-color: papayawhip; border: 2px solid orange; }", "sandboxCSS": "", - "codePrefix": "/* Verwende die Padding-Kurzschreibweise */\n.padding-box {\n /* Füge deinen Code unten ein */\n ", + "codePrefix": ".padding-box {\n ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", "validations": [ - { - "type": "contains", - "value": "padding", - "message": "Verwende die 'padding' Eigenschaft", - "options": { "caseSensitive": false } - }, { "type": "property_value", "value": { "property": "padding", "expected": "1.5rem" }, - "message": "Setze padding auf '1.5rem' für alle Seiten" + "message": "Setze padding auf '1.5rem'" } ] }, { "id": "box-model-8", - "title": "Border-Kurzschreibweise und Einzeleigenschaften", - "description": "Border-Eigenschaften können einzeln (border-width, border-style, border-color) oder als Kurzschreibweise gesetzt werden. Für noch mehr Kontrolle können einzelne Seiten angesprochen werden.", - "task": "Setze nur den unteren Rahmen auf '0.25rem solid #2196f3'. Verwende border-bottom statt der allgemeinen border-Eigenschaft.", + "title": "Rahmen auf einzelnen Seiten", + "description": "Für feinere Kontrolle können einzelne Seiten mit border-top, border-right, border-bottom oder border-left angesprochen werden.", + "task": "Füge border-bottom: 4px solid dodgerblue zu .border-demo hinzu.", "previewHTML": "
Dieses Element braucht nur einen unteren Rahmen
", - "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1rem; } .border-demo { padding: 1rem; background-color: #e3f2fd; }", + "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .border-demo { padding: 1rem; background-color: aliceblue; }", "sandboxCSS": "", - "codePrefix": "/* Füge nur einen unteren Rahmen hinzu */\n.border-demo {\n /* Füge deinen Code unten ein */\n ", + "codePrefix": ".border-demo {\n ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", "validations": [ - { - "type": "contains", - "value": "border-bottom", - "message": "Verwende die 'border-bottom' Eigenschaft", - "options": { "caseSensitive": false } - }, { "type": "regex", - "value": "border-bottom:\\s*0.25rem\\s+solid\\s+#2196f3", - "message": "Setze border-bottom auf '0.25rem solid #2196f3'", + "value": "border-bottom:\\s*4px\\s+solid\\s+dodgerblue", + "message": "Setze border-bottom auf '4px solid dodgerblue'", "options": { "caseSensitive": false } } ] diff --git a/lessons/de/flexbox.json b/lessons/de/flexbox.json index 6af438a..c00f308 100644 --- a/lessons/de/flexbox.json +++ b/lessons/de/flexbox.json @@ -9,32 +9,19 @@ "id": "flexbox-1", "title": "Flexbox Container Grundlagen", "description": "Lerne, wie du einen Flex-Container erstellst und die Haupt- und Querachse verstehst.", - "task": "Wandle das übergeordnete div in einen Flex-Container um und stelle es auf Reihenanzeige (Standard).", + "task": "Füge display: flex zu .flex-container hinzu, um ein Flexbox-Layout zu erstellen.", "previewHTML": "
1
2
3
", - "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .box { background-color: #3498db; color: white; padding: 1.25rem; margin: 0.5rem; text-align: center; font-weight: bold; }", - "sandboxCSS": ".flex-container { border: 0.125rem dashed #ccc; padding: 1rem; }", - "codePrefix": "/* Wandle den Container in Flexbox um */\n", + "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 ", "initialCode": "", - "codeSuffix": "", + "codeSuffix": "\n}", "previewContainer": "preview-area", "validations": [ - { - "type": "contains", - "value": ".flex-container", - "message": "Verwende den '.flex-container' Klassenselektor", - "options": { "caseSensitive": false } - }, - { - "type": "contains", - "value": "display", - "message": "Verwende die 'display' Eigenschaft", - "options": { "caseSensitive": false } - }, { "type": "property_value", "value": { "property": "display", "expected": "flex" }, - "message": "Setze display auf 'flex'", - "options": { "exact": true } + "message": "Setze display auf 'flex'" } ] }, @@ -42,38 +29,24 @@ "id": "flexbox-2", "title": "Flex-Richtung und Umbruch", "description": "Steuere die Richtung und den Umbruch von Flex-Elementen innerhalb eines Containers.", - "task": "Stelle den Flex-Container auf Spaltenanzeige ein und erlaube bei Bedarf Umbrüche.", + "task": "Füge flex-direction: column und flex-wrap: wrap zu .flex-container hinzu.", "previewHTML": "
1
2
3
4
5
", - "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .box { background-color: #3498db; color: white; padding: 1.25rem; margin: 0.5rem; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; }", - "sandboxCSS": ".flex-container { border: 0.125rem dashed #ccc; padding: 1rem; height: 20rem; display: flex; }", - "codePrefix": "/* Setze flex-direction auf column und aktiviere Umbruch */\n.flex-container {\n /* Füge deinen Code unten ein */\n", + "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 ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", "validations": [ - { - "type": "contains", - "value": "flex-direction", - "message": "Verwende die 'flex-direction' Eigenschaft", - "options": { "caseSensitive": false } - }, - { - "type": "contains", - "value": "flex-wrap", - "message": "Verwende die 'flex-wrap' Eigenschaft", - "options": { "caseSensitive": false } - }, { "type": "property_value", "value": { "property": "flex-direction", "expected": "column" }, - "message": "Setze flex-direction auf 'column'", - "options": { "exact": true } + "message": "Setze flex-direction auf 'column'" }, { "type": "property_value", "value": { "property": "flex-wrap", "expected": "wrap" }, - "message": "Setze flex-wrap auf 'wrap'", - "options": { "exact": true } + "message": "Setze flex-wrap auf 'wrap'" } ] }, @@ -81,26 +54,19 @@ "id": "flexbox-3", "title": "Justify Content", "description": "Lerne, wie du Flex-Elemente entlang der Hauptachse des Containers ausrichtest.", - "task": "Verteile die Flex-Elemente gleichmäßig entlang der Hauptachse mit Abstand dazwischen.", + "task": "Füge justify-content: space-between zu .flex-container hinzu, um die Boxen gleichmäßig zu verteilen.", "previewHTML": "
1
2
3
", - "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .box { background-color: #3498db; color: white; padding: 1.25rem; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; }", - "sandboxCSS": ".flex-container { border: 0.125rem dashed #ccc; padding: 1rem; display: flex; }", - "codePrefix": "/* Verteile die Elemente mit Abstand dazwischen */\n.flex-container {\n /* Füge deinen Code unten ein */\n", + "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 ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", "validations": [ - { - "type": "contains", - "value": "justify-content", - "message": "Verwende die 'justify-content' Eigenschaft", - "options": { "caseSensitive": false } - }, { "type": "property_value", "value": { "property": "justify-content", "expected": "space-between" }, - "message": "Setze justify-content auf 'space-between'", - "options": { "exact": true } + "message": "Setze justify-content auf 'space-between'" } ] }, @@ -108,98 +74,59 @@ "id": "flexbox-4", "title": "Align Items", "description": "Steuere, wie Flex-Elemente entlang der Querachse des Containers ausgerichtet werden.", - "task": "Zentriere die Flex-Elemente vertikal entlang der Querachse.", + "task": "Füge align-items: center zu .flex-container hinzu, um die Boxen vertikal zu zentrieren.", "previewHTML": "
1
2
3
", - "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .box { background-color: #3498db; color: white; padding: 1.25rem; margin: 0.5rem; text-align: center; font-weight: bold; width: 3rem; display: flex; justify-content: center; } .tall { height: 8rem; align-items: flex-start; } .short { height: 3rem; align-items: flex-start; }", - "sandboxCSS": ".flex-container { border: 0.125rem dashed #ccc; padding: 1rem; display: flex; height: 12rem; }", - "codePrefix": "/* Zentriere die Elemente vertikal */\n.flex-container {\n /* Füge deinen Code unten ein */\n", + "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 ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", "validations": [ - { - "type": "contains", - "value": "align-items", - "message": "Verwende die 'align-items' Eigenschaft", - "options": { "caseSensitive": false } - }, { "type": "property_value", "value": { "property": "align-items", "expected": "center" }, - "message": "Setze align-items auf 'center'", - "options": { "exact": true } + "message": "Setze align-items auf 'center'" } ] }, { "id": "flexbox-5", - "title": "Flex-Element Eigenschaften", - "description": "Steuere, wie einzelne Flex-Elemente wachsen, schrumpfen und ihre Basisgröße festlegen.", - "task": "Lass die zweite Box doppelt so stark wachsen wie die anderen und verhindere, dass die dritte Box schrumpft.", + "title": "Flex Grow", + "description": "Die flex Eigenschaft steuert, wie stark ein Element im Verhältnis zu anderen wächst.", + "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, -apple-system, sans-serif; padding: 1.25rem; } .box { background-color: #3498db; color: white; padding: 1.25rem; margin: 0.5rem; text-align: center; font-weight: bold; height: 3rem; display: flex; align-items: center; justify-content: center; } .box1 { background-color: #e74c3c; } .box2 { background-color: #2ecc71; } .box3 { background-color: #f39c12; }", - "sandboxCSS": ".flex-container { border: 0.125rem dashed #ccc; padding: 1rem; display: flex; width: 100%; }", - "codePrefix": "/* Lass box2 mehr wachsen und verhindere das Schrumpfen von box3 */\n", - "initialCode": ".box1 {\n flex: 1;\n}\n\n.box2 {\n /* Diese soll doppelt so stark wachsen */\n}\n\n.box3 {\n flex: 1;\n /* Verhindere das Schrumpfen */\n}", - "codeSuffix": "", + "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; }", + "codePrefix": ".box2 {\n ", + "initialCode": "", + "codeSuffix": "\n}", "previewContainer": "preview-area", "validations": [ { - "type": "contains", - "value": ".box2", - "message": "Style das '.box2' Element", - "options": { "caseSensitive": false } - }, - { - "type": "contains", - "value": ".box3", - "message": "Style das '.box3' Element", - "options": { "caseSensitive": false } - }, - { - "type": "regex", - "value": ".box2\\s*{[^}]*flex:\\s*2", - "message": "Setze flex auf '2' für box2", - "options": { "caseSensitive": false } - }, - { - "type": "regex", - "value": ".box3\\s*{[^}]*flex-shrink:\\s*0", - "message": "Setze flex-shrink auf '0' für box3", - "options": { "caseSensitive": false } + "type": "property_value", + "value": { "property": "flex", "expected": "2" }, + "message": "Setze flex auf '2'" } ] }, { "id": "flexbox-6", - "title": "Einzelne Elemente ausrichten", - "description": "Lerne, wie du die Container-Ausrichtung für einzelne Flex-Elemente überschreiben kannst.", - "task": "Setze 'align-self' auf das mittlere Element, um es am Anfang der Querachse auszurichten.", + "title": "Align Self", + "description": "Verwende align-self, um die Ausrichtung für ein einzelnes Flex-Element zu überschreiben.", + "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, -apple-system, sans-serif; padding: 1.25rem; } .box { background-color: #3498db; color: white; padding: 1.25rem; margin: 0.5rem; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; } .middle { background-color: #2ecc71; }", - "sandboxCSS": ".flex-container { border: 0.125rem dashed #ccc; padding: 1rem; display: flex; height: 15rem; align-items: center; }", - "codePrefix": "/* Richte das mittlere Element am Anfang aus */\n", + "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; }", + "codePrefix": ".middle {\n ", "initialCode": "", - "codeSuffix": "", + "codeSuffix": "\n}", "previewContainer": "preview-area", "validations": [ - { - "type": "contains", - "value": ".middle", - "message": "Verwende den '.middle' Klassenselektor", - "options": { "caseSensitive": false } - }, - { - "type": "contains", - "value": "align-self", - "message": "Verwende die 'align-self' Eigenschaft", - "options": { "caseSensitive": false } - }, { "type": "property_value", "value": { "property": "align-self", "expected": "flex-start" }, - "message": "Setze align-self auf 'flex-start'", - "options": { "exact": true } + "message": "Setze align-self auf 'flex-start'" } ] } diff --git a/lessons/flexbox.json b/lessons/flexbox.json index 464c6b8..807dec0 100644 --- a/lessons/flexbox.json +++ b/lessons/flexbox.json @@ -9,41 +9,22 @@ "id": "flexbox-1", "title": "Flexbox Container Basics", "description": "Learn how to create a flex container and understand the main and cross axes.", - "task": "Convert the parent div into a flex container and set it to display items in a row (which is the default).", + "task": "Add display: flex to .flex-container to create a flexbox layout.", "previewHTML": "
1
2
3
", - "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .box { background-color: #3498db; color: white; padding: 1.25rem; margin: 0.5rem; text-align: center; font-weight: bold; }", - "sandboxCSS": ".flex-container { border: 0.125rem dashed #ccc; padding: 1rem; }", - "codePrefix": "/* Convert the container to use flexbox */\n", + "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 ", "initialCode": "", - "codeSuffix": "", + "codeSuffix": "\n}", "previewContainer": "preview-area", "validations": [ - { - "type": "contains", - "value": ".flex-container", - "message": "Use the '.flex-container' class selector", - "options": { - "caseSensitive": false - } - }, - { - "type": "contains", - "value": "display", - "message": "Use the 'display' property", - "options": { - "caseSensitive": false - } - }, { "type": "property_value", "value": { "property": "display", "expected": "flex" }, - "message": "Set the display property to 'flex'", - "options": { - "exact": true - } + "message": "Set display to 'flex'" } ] }, @@ -51,11 +32,11 @@ "id": "flexbox-2", "title": "Flex Direction and Wrap", "description": "Control the direction and wrapping of flex items within a container.", - "task": "Set the flex container to display items in a column and allow them to wrap if needed.", + "task": "Add flex-direction: column and flex-wrap: wrap to .flex-container.", "previewHTML": "
1
2
3
4
5
", - "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .box { background-color: #3498db; color: white; padding: 1.25rem; margin: 0.5rem; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; }", - "sandboxCSS": ".flex-container { border: 0.125rem dashed #ccc; padding: 1rem; height: 20rem; display: flex; }", - "codePrefix": "/* Set the flex direction to column and enable wrapping */\n.flex-container {\n /* Add your code below */\n", + "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 ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", @@ -104,11 +85,11 @@ "id": "flexbox-3", "title": "Justify Content", "description": "Learn how to align flex items along the main axis of the flex container.", - "task": "Distribute the flex items evenly along the main axis with space between them.", + "task": "Add justify-content: space-between to .flex-container to distribute the boxes evenly.", "previewHTML": "
1
2
3
", - "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .box { background-color: #3498db; color: white; padding: 1.25rem; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; }", - "sandboxCSS": ".flex-container { border: 0.125rem dashed #ccc; padding: 1rem; display: flex; }", - "codePrefix": "/* Distribute the items with space between them */\n.flex-container {\n /* Add your code below */\n", + "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 ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", @@ -138,11 +119,11 @@ "id": "flexbox-4", "title": "Align Items", "description": "Control how flex items are aligned along the cross axis of the flex container.", - "task": "Center the flex items vertically along the cross axis.", + "task": "Add align-items: center to .flex-container to vertically center the boxes.", "previewHTML": "
1
2
3
", - "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .box { background-color: #3498db; color: white; padding: 1.25rem; margin: 0.5rem; text-align: center; font-weight: bold; width: 3rem; display: flex; justify-content: center; } .tall { height: 8rem; align-items: flex-start; } .short { height: 3rem; align-items: flex-start; }", - "sandboxCSS": ".flex-container { border: 0.125rem dashed #ccc; padding: 1rem; display: flex; height: 12rem; }", - "codePrefix": "/* Center the items vertically */\n.flex-container {\n /* Add your code below */\n", + "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 ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", @@ -170,90 +151,47 @@ }, { "id": "flexbox-5", - "title": "Flex Item Properties", - "description": "Control how individual flex items grow, shrink, and establish their base size.", - "task": "Make the second box grow twice as much as the others and prevent the third box from shrinking.", + "title": "Flex Grow", + "description": "The flex property controls how much an item grows relative to others.", + "task": "Add flex: 2 to .box2 to make it grow twice as wide.", "previewHTML": "
1
2
3
", - "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .box { background-color: #3498db; color: white; padding: 1.25rem; margin: 0.5rem; text-align: center; font-weight: bold; height: 3rem; display: flex; align-items: center; justify-content: center; } .box1 { background-color: #e74c3c; } .box2 { background-color: #2ecc71; } .box3 { background-color: #f39c12; }", - "sandboxCSS": ".flex-container { border: 0.125rem dashed #ccc; padding: 1rem; display: flex; width: 100%; }", - "codePrefix": "/* Make box2 grow more and prevent box3 from shrinking */\n", - "initialCode": ".box1 {\n flex: 1;\n}\n\n.box2 {\n /* Make this grow twice as much as the others */\n}\n\n.box3 {\n flex: 1;\n /* Prevent this from shrinking */\n}", - "codeSuffix": "", + "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; }", + "codePrefix": ".box2 {\n ", + "initialCode": "", + "codeSuffix": "\n}", "previewContainer": "preview-area", "validations": [ { - "type": "contains", - "value": ".box2", - "message": "Style the '.box2' element", - "options": { - "caseSensitive": false - } - }, - { - "type": "contains", - "value": ".box3", - "message": "Style the '.box3' element", - "options": { - "caseSensitive": false - } - }, - { - "type": "regex", - "value": ".box2\\s*{[^}]*flex:\\s*2", - "message": "Set flex to '2' for box2", - "options": { - "caseSensitive": false - } - }, - { - "type": "regex", - "value": ".box3\\s*{[^}]*flex-shrink:\\s*0", - "message": "Set flex-shrink to '0' for box3", - "options": { - "caseSensitive": false - } + "type": "property_value", + "value": { + "property": "flex", + "expected": "2" + }, + "message": "Set flex to '2'" } ] }, { "id": "flexbox-6", - "title": "Aligning Individual Items", - "description": "Learn how to override the container's alignment for individual flex items.", - "task": "Set 'align-self' on the middle item to align it to the start of the cross axis.", + "title": "Align Self", + "description": "Use align-self to override alignment for a single flex item.", + "task": "Add align-self: flex-start to .middle to move it to the top.", "previewHTML": "
1
2
3
", - "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .box { background-color: #3498db; color: white; padding: 1.25rem; margin: 0.5rem; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; } .middle { background-color: #2ecc71; }", - "sandboxCSS": ".flex-container { border: 0.125rem dashed #ccc; padding: 1rem; display: flex; height: 15rem; align-items: center; }", - "codePrefix": "/* Align the middle item to the start */\n", + "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; }", + "codePrefix": ".middle {\n ", "initialCode": "", - "codeSuffix": "", + "codeSuffix": "\n}", "previewContainer": "preview-area", "validations": [ - { - "type": "contains", - "value": ".middle", - "message": "Use the '.middle' class selector", - "options": { - "caseSensitive": false - } - }, - { - "type": "contains", - "value": "align-self", - "message": "Use the 'align-self' property", - "options": { - "caseSensitive": false - } - }, { "type": "property_value", "value": { "property": "align-self", "expected": "flex-start" }, - "message": "Set align-self to 'flex-start'", - "options": { - "exact": true - } + "message": "Set align-self to 'flex-start'" } ] }