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 <code> tags for proper styling

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.",
+			"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 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.",
+			"task": "Add <code>padding: 1rem</code> to <code>.box</code> to create space between its content and border.",
 			"previewHTML": "<div class=\"box\">Box Model Components</div>",
-			"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" },
+					"value": { "property": "padding", "expected": "1rem" },
-					"message": "Set padding to exactly '1.25rem'"
+					"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.",
+			"description": "Borders outline an element, creating visual separation from surrounding content. The border shorthand accepts three values: width, style, and color.",
-			"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.",
+			"task": "Add <code>border: 2px solid darkslategray</code> to <code>.box</code>.",
 			"previewHTML": "<div class=\"box\">This box needs a border</div>",
-			"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",
+					"value": "border:\\s*2px\\s+solid\\s+darkslategray",
-					"message": "Set border to '0.125rem solid #333'",
+					"message": "Set border to '2px solid darkslategray'",
-					"options": { "caseSensitive": false }
-				},
-				{
-					"type": "contains",
-					"value": "solid",
-					"message": "Include 'solid' as the border style",
 					"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.",
+			"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 of '1rem' to the box element to create space between it and surrounding elements. The margin property sets space outside an element's border.",
+			"task": "Add <code>margin: 1rem</code> to <code>.margin-box</code> to create space between it and the adjacent element.",
 			"previewHTML": "<div class=\"container\"><div class=\"margin-box\">This box needs margins</div><div class=\"neighbor\">Adjacent element</div></div>",
-			"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",
+			"title": "Box Sizing: 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.",
+			"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": "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.",
+			"task": "Add <code>box-sizing: border-box</code> to <code>.border-box</code> so padding and border are included in its width.",
 			"previewHTML": "<div class=\"sizing-demo\"><div class=\"box content-box\">Content-box (default)</div><div class=\"box border-box\">Border-box</div></div>",
-			"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.",
+			"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 a bottom margin of '2rem' to the first paragraph. You'll observe that the space between paragraphs equals 2rem (not 3rem), demonstrating margin collapse.",
+			"task": "Add <code>margin-bottom: 2rem</code> to <code>.first</code>. Notice the space between paragraphs equals 2rem (not 3rem) due to margin collapse.",
 			"previewHTML": "<div class=\"collapse-demo\"><p class=\"first\">This paragraph has a bottom margin.</p><p class=\"second\">This paragraph has a top margin of 1rem.</p></div>",
-			"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.",
+			"description": "The margin shorthand can set all four sides at once. Two values set vertical (top/bottom) and horizontal (left/right) margins respectively.",
-			"task": "Use margin shorthand syntax to set the top and bottom margins to '1rem' and the left and right margins to '2rem' simultaneously.",
+			"task": "Add <code>margin: 1rem 2rem</code> to <code>.shorthand-box</code> for 1rem top/bottom and 2rem left/right.",
 			"previewHTML": "<div class=\"container\"><div class=\"shorthand-box\">This box needs margins: 1rem top/bottom, 2rem left/right</div></div>",
-			"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.",
+			"description": "Like margin, padding shorthand allows setting all sides at once. A single value applies to all four sides equally.",
-			"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.",
+			"task": "Add <code>padding: 1.5rem</code> to <code>.padding-box</code> to add equal padding on all sides.",
 			"previewHTML": "<div class=\"padding-box\">This box needs equal padding on all sides</div>",
-			"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",
+			"title": "Border on Specific Sides",
-			"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.",
+			"description": "For granular control, you can target specific sides with border-top, border-right, border-bottom, or border-left.",
-			"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.",
+			"task": "Add <code>border-bottom: 4px solid dodgerblue</code> to <code>.border-demo</code>.",
 			"previewHTML": "<div class=\"border-demo\">This element needs only a bottom border</div>",
-			"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",
+					"value": "border-bottom:\\s*4px\\s+solid\\s+dodgerblue",
-					"message": "Set border-bottom to '0.25rem solid #2196f3'",
+					"message": "Set border-bottom to '4px solid dodgerblue'",
 					"options": { "caseSensitive": false }
 				}
 			]

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 <code>padding: 1rem</code> zu <code>.box</code> hinzu, um Abstand zwischen Inhalt und Rahmen zu schaffen.",
 			"previewHTML": "<div class=\"box\">Box-Modell Komponenten</div>",
-			"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" },
+					"value": { "property": "padding", "expected": "1rem" },
-					"message": "Setze padding auf genau '1.25rem'"
+					"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.",
+			"description": "Rahmen umranden ein Element und schaffen visuelle Trennung. Die border-Kurzschreibweise akzeptiert drei Werte: Breite, Stil 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.",
+			"task": "Füge <code>border: 2px solid darkslategray</code> zu <code>.box</code> hinzu.",
 			"previewHTML": "<div class=\"box\">Diese Box braucht einen Rahmen</div>",
-			"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",
+					"value": "border:\\s*2px\\s+solid\\s+darkslategray",
-					"message": "Setze border auf '0.125rem solid #333'",
+					"message": "Setze border auf '2px solid darkslategray'",
-					"options": { "caseSensitive": false }
-				},
-				{
-					"type": "contains",
-					"value": "solid",
-					"message": "Verwende 'solid' als Rahmenstil",
 					"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 <code>margin: 1rem</code> zu <code>.margin-box</code> hinzu, um Abstand zum benachbarten Element zu schaffen.",
 			"previewHTML": "<div class=\"container\"><div class=\"margin-box\">Diese Box braucht Margins</div><div class=\"neighbor\">Benachbartes Element</div></div>",
-			"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 <code>box-sizing: border-box</code> zu <code>.border-box</code> hinzu, damit Padding und Border in die Breite einbezogen werden.",
 			"previewHTML": "<div class=\"sizing-demo\"><div class=\"box content-box\">Content-box (Standard)</div><div class=\"box border-box\">Border-box</div></div>",
-			"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.",
+			"description": "Wenn zwei vertikale Margins aufeinandertreffen, kollabieren sie zum größeren der beiden Werte statt zu addieren.",
-			"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.",
+			"task": "Füge <code>margin-bottom: 2rem</code> zu <code>.first</code> hinzu. Der Abstand zwischen den Absätzen beträgt 2rem (nicht 3rem) durch Margin-Kollaps.",
 			"previewHTML": "<div class=\"collapse-demo\"><p class=\"first\">Dieser Absatz hat einen Bottom-Margin.</p><p class=\"second\">Dieser Absatz hat einen Top-Margin von 1rem.</p></div>",
-			"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.",
+			"description": "Die Margin-Kurzschreibweise kann alle vier Seiten setzen. Zwei Werte setzen vertikale (oben/unten) und horizontale (links/rechts) Margins.",
-			"task": "Verwende die Margin-Kurzschreibweise, um Top/Bottom auf '1rem' und Left/Right auf '2rem' zu setzen.",
+			"task": "Füge <code>margin: 1rem 2rem</code> zu <code>.shorthand-box</code> hinzu für 1rem oben/unten und 2rem links/rechts.",
 			"previewHTML": "<div class=\"container\"><div class=\"shorthand-box\">Diese Box braucht Margins: 1rem oben/unten, 2rem links/rechts</div></div>",
-			"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).",
+			"description": "Wie Margin erlaubt Padding-Kurzschreibweise das Setzen aller Seiten. Ein einzelner Wert gilt für alle vier Seiten.",
-			"task": "Verwende Padding-Kurzschreibweise, um alle Seiten auf '1.5rem' zu setzen. Ein einzelner Wert gilt für alle vier Seiten.",
+			"task": "Füge <code>padding: 1.5rem</code> zu <code>.padding-box</code> hinzu für gleichmäßiges Padding.",
 			"previewHTML": "<div class=\"padding-box\">Diese Box braucht gleichmäßiges Padding</div>",
-			"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",
+			"title": "Rahmen auf einzelnen Seiten",
-			"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.",
+			"description": "Für feinere Kontrolle können einzelne Seiten mit border-top, border-right, border-bottom oder border-left angesprochen werden.",
-			"task": "Setze nur den unteren Rahmen auf '0.25rem solid #2196f3'. Verwende border-bottom statt der allgemeinen border-Eigenschaft.",
+			"task": "Füge <code>border-bottom: 4px solid dodgerblue</code> zu <code>.border-demo</code> hinzu.",
 			"previewHTML": "<div class=\"border-demo\">Dieses Element braucht nur einen unteren Rahmen</div>",
-			"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",
+					"value": "border-bottom:\\s*4px\\s+solid\\s+dodgerblue",
-					"message": "Setze border-bottom auf '0.25rem solid #2196f3'",
+					"message": "Setze border-bottom auf '4px solid dodgerblue'",
 					"options": { "caseSensitive": false }
 				}
 			]

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 <code>display: flex</code> zu <code>.flex-container</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, -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; }",
+			"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: 0.125rem dashed #ccc; padding: 1rem; }",
+			"sandboxCSS": ".flex-container { border: 2px dashed #aaa; padding: 1rem; }",
-			"codePrefix": "/* Wandle den Container in Flexbox um */\n",
+			"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'",
+					"message": "Setze display auf 'flex'"
-					"options": { "exact": true }
 				}
 			]
 		},
@@ -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 <code>flex-direction: column</code> und <code>flex-wrap: wrap</code> zu <code>.flex-container</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, -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; }",
+			"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: 0.125rem dashed #ccc; padding: 1rem; height: 20rem; display: flex; }",
+			"sandboxCSS": ".flex-container { border: 2px dashed #aaa; padding: 1rem; height: 16rem; display: flex; }",
-			"codePrefix": "/* Setze flex-direction auf column und aktiviere Umbruch */\n.flex-container {\n  /* Füge deinen Code unten ein */\n",
+			"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'",
+					"message": "Setze flex-direction auf 'column'"
-					"options": { "exact": true }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "flex-wrap", "expected": "wrap" },
-					"message": "Setze flex-wrap auf 'wrap'",
+					"message": "Setze flex-wrap auf 'wrap'"
-					"options": { "exact": true }
 				}
 			]
 		},
@@ -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 <code>justify-content: space-between</code> zu <code>.flex-container</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, -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; }",
+			"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: 0.125rem dashed #ccc; padding: 1rem; display: flex; }",
+			"sandboxCSS": ".flex-container { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
-			"codePrefix": "/* Verteile die Elemente mit Abstand dazwischen */\n.flex-container {\n  /* Füge deinen Code unten ein */\n",
+			"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'",
+					"message": "Setze justify-content auf 'space-between'"
-					"options": { "exact": true }
 				}
 			]
 		},
@@ -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 <code>align-items: center</code> zu <code>.flex-container</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, -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; }",
+			"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: 0.125rem dashed #ccc; padding: 1rem; display: flex; height: 12rem; }",
+			"sandboxCSS": ".flex-container { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 10rem; }",
-			"codePrefix": "/* Zentriere die Elemente vertikal */\n.flex-container {\n  /* Füge deinen Code unten ein */\n",
+			"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'",
+					"message": "Setze align-items auf 'center'"
-					"options": { "exact": true }
 				}
 			]
 		},
 		{
 			"id": "flexbox-5",
-			"title": "Flex-Element Eigenschaften",
+			"title": "Flex Grow",
-			"description": "Steuere, wie einzelne Flex-Elemente wachsen, schrumpfen und ihre Basisgröße festlegen.",
+			"description": "Die <code>flex</code> Eigenschaft steuert, wie stark ein Element im Verhältnis zu anderen wächst.",
-			"task": "Lass die zweite Box doppelt so stark wachsen wie die anderen und verhindere, dass die dritte Box schrumpft.",
+			"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, -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; }",
+			"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: 0.125rem dashed #ccc; padding: 1rem; display: flex; width: 100%; }",
+			"sandboxCSS": ".flex-container { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
-			"codePrefix": "/* Lass box2 mehr wachsen und verhindere das Schrumpfen von box3 */\n",
+			"codePrefix": ".box2 {\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}",
+			"initialCode": "",
-			"codeSuffix": "",
+			"codeSuffix": "\n}",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
-					"type": "contains",
+					"type": "property_value",
-					"value": ".box2",
+					"value": { "property": "flex", "expected": "2" },
-					"message": "Style das '.box2' Element",
+					"message": "Setze flex auf '2'"
-					"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 }
 				}
 			]
 		},
 		{
 			"id": "flexbox-6",
-			"title": "Einzelne Elemente ausrichten",
+			"title": "Align Self",
-			"description": "Lerne, wie du die Container-Ausrichtung für einzelne Flex-Elemente überschreiben kannst.",
+			"description": "Verwende <code>align-self</code>, um die Ausrichtung für ein einzelnes Flex-Element zu überschreiben.",
-			"task": "Setze 'align-self' auf das mittlere Element, um es am Anfang der Querachse auszurichten.",
+			"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, -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; }",
+			"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: 0.125rem dashed #ccc; padding: 1rem; display: flex; height: 15rem; align-items: center; }",
+			"sandboxCSS": ".flex-container { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 12rem; align-items: center; }",
-			"codePrefix": "/* Richte das mittlere Element am Anfang aus */\n",
+			"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'",
+					"message": "Setze align-self auf 'flex-start'"
-					"options": { "exact": true }
 				}
 			]
 		}

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 <code>display: flex</code> to <code>.flex-container</code> to create a flexbox layout.",
 			"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, -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; }",
+			"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: 0.125rem dashed #ccc; padding: 1rem; }",
+			"sandboxCSS": ".flex-container { border: 2px dashed #aaa; padding: 1rem; }",
-			"codePrefix": "/* Convert the container to use flexbox */\n",
+			"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'",
+					"message": "Set display to 'flex'"
-					"options": {
-						"exact": true
-					}
 				}
 			]
 		},
@@ -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 <code>flex-direction: column</code> and <code>flex-wrap: wrap</code> to <code>.flex-container</code>.",
 			"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, -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; }",
+			"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: 0.125rem dashed #ccc; padding: 1rem; height: 20rem; display: flex; }",
+			"sandboxCSS": ".flex-container { border: 2px dashed #aaa; padding: 1rem; height: 16rem; display: flex; }",
-			"codePrefix": "/* Set the flex direction to column and enable wrapping */\n.flex-container {\n  /* Add your code below */\n",
+			"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 <code>justify-content: space-between</code> to <code>.flex-container</code> to distribute the boxes evenly.",
 			"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, -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; }",
+			"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: 0.125rem dashed #ccc; padding: 1rem; display: flex; }",
+			"sandboxCSS": ".flex-container { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
-			"codePrefix": "/* Distribute the items with space between them */\n.flex-container {\n  /* Add your code below */\n",
+			"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 <code>align-items: center</code> to <code>.flex-container</code> to vertically center the boxes.",
 			"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, -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; }",
+			"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: 0.125rem dashed #ccc; padding: 1rem; display: flex; height: 12rem; }",
+			"sandboxCSS": ".flex-container { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 10rem; }",
-			"codePrefix": "/* Center the items vertically */\n.flex-container {\n  /* Add your code below */\n",
+			"codePrefix": ".flex-container {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
 			"previewContainer": "preview-area",
@@ -170,90 +151,47 @@
 		},
 		{
 			"id": "flexbox-5",
-			"title": "Flex Item Properties",
+			"title": "Flex Grow",
-			"description": "Control how individual flex items grow, shrink, and establish their base size.",
+			"description": "The <code>flex</code> property controls how much an item grows relative to others.",
-			"task": "Make the second box grow twice as much as the others and prevent the third box from shrinking.",
+			"task": "Add <code>flex: 2</code> to <code>.box2</code> to make it grow twice as wide.",
 			"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, -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; }",
+			"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: 0.125rem dashed #ccc; padding: 1rem; display: flex; width: 100%; }",
+			"sandboxCSS": ".flex-container { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
-			"codePrefix": "/* Make box2 grow more and prevent box3 from shrinking */\n",
+			"codePrefix": ".box2 {\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}",
+			"initialCode": "",
-			"codeSuffix": "",
+			"codeSuffix": "\n}",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
-					"type": "contains",
+					"type": "property_value",
-					"value": ".box2",
+					"value": {
-					"message": "Style the '.box2' element",
+						"property": "flex",
-					"options": {
+						"expected": "2"
-						"caseSensitive": false
+					},
-					}
+					"message": "Set flex to '2'"
-				},
-				{
-					"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
-					}
 				}
 			]
 		},
 		{
 			"id": "flexbox-6",
-			"title": "Aligning Individual Items",
+			"title": "Align Self",
-			"description": "Learn how to override the container's alignment for individual flex items.",
+			"description": "Use <code>align-self</code> to override alignment for a single flex item.",
-			"task": "Set 'align-self' on the middle item to align it to the start of the cross axis.",
+			"task": "Add <code>align-self: flex-start</code> to <code>.middle</code> to move it to the top.",
 			"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, -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; }",
+			"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: 0.125rem dashed #ccc; padding: 1rem; display: flex; height: 15rem; align-items: center; }",
+			"sandboxCSS": ".flex-container { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 12rem; align-items: center; }",
-			"codePrefix": "/* Align the middle item to the start */\n",
+			"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'",
+					"message": "Set align-self to 'flex-start'"
-					"options": {
-						"exact": true
-					}
 				}
 			]
 		}