feat: update lessons

lessons/00-basics.json

@@ -1,60 +1,64 @@
 {
 	"id": "basics",
-	"title": "CSS Basics",
+	"title": "CSS Fundamentals",
-	"description": "Learn the fundamental concepts of CSS styling",
+	"description": "Establish a solid foundation in Cascading Style Sheets (CSS), the language used to control the presentation and layout of web documents. This module introduces core concepts that form the basis of modern web styling.",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "basics-1",
-			"title": "Introduction to Selectors",
+			"title": "CSS Syntax Structure",
-			"description": "Selectors are patterns used to select HTML elements you want to style. In this lesson, you'll learn how to target elements with CSS.",
+			"description": "CSS consists of selectors that target HTML elements and declaration blocks that specify how those elements should be styled. Understanding this fundamental syntax structure is essential for all CSS development.",
-			"task": "Style the paragraph element by making its text color blue. Use the 'color' property with the value 'blue'.",
+			"task": "Complete the CSS rule by adding a semicolon after the color property value. Every CSS declaration must end with a semicolon to separate it from the next declaration.",
 			"previewHTML": "<p class='target'>This paragraph needs to be blue!</p><p>This paragraph should remain unchanged.</p>",
 			"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; }",
 			"sandboxCSS": ".target { outline: 0.125rem dashed #ccc; padding: 0.625rem; }",
-			"codePrefix": "/* Style the paragraph with class 'target' */\n",
+			"codePrefix": "/* Complete the CSS rule by adding a semicolon */\n.target {\n  color: blue",
 			"initialCode": "",
-			"codeSuffix": "",
+			"codeSuffix": "\n}",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "contains",
-					"value": ".target",
+					"value": ";",
-					"message": "Make sure to use the '.target' class selector",
+					"message": "Make sure to add a semicolon after the color value",
 					"options": {
-						"caseSensitive": false
+						"caseSensitive": true
-					}
-				},
-				{
-					"type": "contains",
-					"value": "color",
-					"message": "Use the 'color' property",
-					"options": {
-						"caseSensitive": false
-					}
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "color",
-						"expected": "blue"
-					},
-					"message": "Set the color property to 'blue'",
-					"options": {
-						"exact": false
 					}
 				}
 			]
 		},
 		{
 			"id": "basics-2",
-			"title": "Box Model Basics",
+			"title": "CSS Selectors: Classes",
-			"description": "The CSS box model is a fundamental concept that describes how elements are sized and spaced on a page.",
+			"description": "Class selectors allow you to target specific HTML elements that share the same class attribute. Classes are denoted by a dot (.) followed by the class name and are one of the most frequently used selectors in CSS.",
-			"task": "Add padding of 1.25rem and a 0.125rem solid border with color #333 to the box element.",
+			"task": "Write a class selector to target elements with the class 'highlight'. Then, set their text color to 'crimson'. Begin with the dot (.) followed by the class name.",
-			"previewHTML": "<div class='box'>This box needs padding and a border!</div>",
+			"previewHTML": "<p class='highlight'>This text should be crimson.</p><p>This text remains unchanged.</p>",
-			"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .box { background-color: #f0f0f0; }",
+			"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; }",
+			"sandboxCSS": ".highlight { background-color: #fffacd; padding: 0.3125rem; }",
+			"codePrefix": "/* Write a class selector to target elements with the class 'highlight' */\n",
+			"initialCode": "",
+			"codeSuffix": " {\n  color: crimson;\n}",
+			"previewContainer": "preview-area",
+			"validations": [
+				{
+					"type": "contains",
+					"value": ".highlight",
+					"message": "Make sure to use the '.highlight' class selector",
+					"options": {
+						"caseSensitive": false
+					}
+				}
+			]
+		},
+		{
+			"id": "basics-3",
+			"title": "Box Model: Adding Padding",
+			"description": "The CSS box model consists of content, padding, border, and margin areas. Padding creates space between an element's content and its border, improving visual appearance and readability.",
+			"task": "Add padding to the box element. Set the padding to '1.25rem' to create space between the content and the element's edges.",
+			"previewHTML": "<div class='box'>This box needs padding!</div>",
+			"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .box { background-color: #f0f0f0; border: 0.0625rem solid #ddd; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Add padding and border to the box */\n.box {\n  /* Add your code below */\n",
+			"codePrefix": "/* Add padding to the box */\n.box {\n  /* Add your code below */\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
 			"previewContainer": "preview-area",
@@ -67,14 +71,6 @@
 						"caseSensitive": false
 					}
 				},
-				{
-					"type": "contains",
-					"value": "border",
-					"message": "Use the 'border' property",
-					"options": {
-						"caseSensitive": false
-					}
-				},
 				{
 					"type": "property_value",
 					"value": {
@@ -83,7 +79,30 @@
 					},
 					"message": "Set the padding to '1.25rem'",
 					"options": {
-						"exact": false
+						"exact": true
+					}
+				}
+			]
+		},
+		{
+			"id": "basics-4",
+			"title": "Box Model: Adding Borders",
+			"description": "Borders define the perimeter of an element, separating it visually from surrounding content. CSS offers precise control over border thickness, style, and color.",
+			"task": "Add a border to the element. Set the border property to '0.125rem solid #333' to create a thin, solid dark border around the box.",
+			"previewHTML": "<div class='bordered-box'>This box needs a border!</div>",
+			"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .bordered-box { background-color: #f8f8f8; padding: 1rem; }",
+			"sandboxCSS": "",
+			"codePrefix": "/* Add a border to the box */\n.bordered-box {\n  /* Add your code below */\n  ",
+			"initialCode": "",
+			"codeSuffix": "\n}",
+			"previewContainer": "preview-area",
+			"validations": [
+				{
+					"type": "contains",
+					"value": "border",
+					"message": "Use the 'border' property",
+					"options": {
+						"caseSensitive": false
 					}
 				},
 				{
@@ -97,26 +116,18 @@
 			]
 		},
 		{
-			"id": "basics-3",
+			"id": "basics-5",
-			"title": "Colors and Backgrounds",
+			"title": "Colors: RGB and Hexadecimal Notation",
-			"description": "Learn how to apply background colors and control text coloring in different ways.",
+			"description": "CSS supports various color models, with RGB (Red, Green, Blue) and hexadecimal notation being among the most common. Understanding color representation is essential for creating visually appealing designs.",
-			"task": "Style the element with a background color of #e0f7fa and text color of #01579b.",
+			"task": "Set the background color of the element to the hexadecimal value '#e0f7fa' (a light cyan). Hexadecimal color values start with a hash symbol (#) followed by 6 characters representing RGB values.",
-			"previewHTML": "<div class='colorbox'>This element needs colors!</div>",
+			"previewHTML": "<div class='colorbox'>This element needs a background color!</div>",
-			"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .colorbox { padding: 1.5rem; text-align: center; font-weight: bold; font-size: 1.125rem; }",
+			"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .colorbox { padding: 1.5rem; text-align: center; font-weight: bold; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Style the colorbox with background and text colors */\n",
+			"codePrefix": "/* Set the background color using a hexadecimal value */\n.colorbox {\n  /* Add your code below */\n  ",
 			"initialCode": "",
-			"codeSuffix": "",
+			"codeSuffix": "\n}",
 			"previewContainer": "preview-area",
 			"validations": [
-				{
-					"type": "contains",
-					"value": ".colorbox",
-					"message": "Use the '.colorbox' class selector",
-					"options": {
-						"caseSensitive": false
-					}
-				},
 				{
 					"type": "contains",
 					"value": "background-color",
@@ -125,14 +136,6 @@
 						"caseSensitive": false
 					}
 				},
-				{
-					"type": "contains",
-					"value": "color",
-					"message": "Use the 'color' property",
-					"options": {
-						"caseSensitive": false
-					}
-				},
 				{
 					"type": "property_value",
 					"value": {
@@ -143,41 +146,22 @@
 					"options": {
 						"exact": true
 					}
-				},
-				{
-					"type": "property_value",
-					"value": {
-						"property": "color",
-						"expected": "#01579b"
-					},
-					"message": "Set the text color to '#01579b'",
-					"options": {
-						"exact": true
-					}
 				}
 			]
 		},
 		{
-			"id": "basics-4",
+			"id": "basics-6",
-			"title": "Typography Basics",
+			"title": "Typography: Font Family",
-			"description": "Learn how to control text appearance with CSS typography properties.",
+			"description": "The font-family property specifies the typeface used for text content. It's best practice to provide a list of fonts (a 'font stack') to ensure compatibility across different operating systems.",
-			"task": "Style the heading with font-family 'Georgia, serif', font-size of 1.5rem, and add text-shadow of 0.0625rem 0.0625rem 0.125rem #aaa.",
+			"task": "Set the font family of the heading to 'Georgia, serif'. The comma indicates that 'serif' will be used as a fallback if 'Georgia' is not available on the user's system.",
-			"previewHTML": "<h2 class='heading'>Style This Heading Text</h2>",
+			"previewHTML": "<h2 class='heading'>This heading needs a serif font</h2>",
 			"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; }",
 			"sandboxCSS": ".heading { border-bottom: 0.0625rem solid #ddd; padding-bottom: 0.625rem; }",
-			"codePrefix": "/* Style the heading text */\n",
+			"codePrefix": "/* Set the font family */\n.heading {\n  /* Add your code below */\n  ",
 			"initialCode": "",
-			"codeSuffix": "",
+			"codeSuffix": "\n}",
 			"previewContainer": "preview-area",
 			"validations": [
-				{
-					"type": "contains",
-					"value": ".heading",
-					"message": "Use the '.heading' class selector",
-					"options": {
-						"caseSensitive": false
-					}
-				},
 				{
 					"type": "contains",
 					"value": "font-family",
@@ -186,26 +170,10 @@
 						"caseSensitive": false
 					}
 				},
-				{
-					"type": "contains",
-					"value": "font-size",
-					"message": "Use the 'font-size' property",
-					"options": {
-						"caseSensitive": false
-					}
-				},
-				{
-					"type": "contains",
-					"value": "text-shadow",
-					"message": "Use the 'text-shadow' property",
-					"options": {
-						"caseSensitive": false
-					}
-				},
 				{
 					"type": "regex",
-					"value": "text-shadow:\\s*0.0625rem\\s+0.0625rem\\s+0.125rem\\s+#aaa",
+					"value": "font-family:\\s*Georgia,\\s*serif",
-					"message": "Set the text-shadow to '0.0625rem 0.0625rem 0.125rem #aaa'",
+					"message": "Set the font-family to 'Georgia, serif'",
 					"options": {
 						"caseSensitive": false
 					}
@@ -213,26 +181,18 @@
 			]
 		},
 		{
-			"id": "basics-5",
+			"id": "basics-7",
-			"title": "CSS Units and Variables",
+			"title": "CSS Units: Relative vs. Absolute",
-			"description": "Learn about different CSS units like rem, percentages, em, and how to use CSS variables (custom properties).",
+			"description": "CSS offers various measurement units for specifying sizes. Relative units (like rem, em, %) adapt to different screen sizes, while absolute units (like pixels) maintain fixed dimensions regardless of context.",
-			"task": "Set the width of the box to 80%, the max-width to 37.5rem, and create a CSS variable --main-color with the value #6200ee, then use it for the border color.",
+			"task": "Set the width of the box to '80%' of its parent container. Percentage units are relative to the parent element's dimensions and are crucial for responsive design.",
-			"previewHTML": "<div class='units-box'>This box needs sizing with different units and a border using a CSS variable.</div>",
+			"previewHTML": "<div class='container'><div class='responsive-box'>This box should take up 80% width</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .units-box { background-color: #f5f5f5; padding: 1rem; border: 0.125rem solid #ddd; }",
+			"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .container { background-color: #f5f5f5; padding: 1rem; } .responsive-box { background-color: #e1bee7; padding: 1rem; text-align: center; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Style the box using different units and CSS variables */\n:root {\n  /* Define your CSS variable here */\n}\n\n",
+			"codePrefix": "/* Set the width using a percentage unit */\n.responsive-box {\n  /* Add your code below */\n  ",
 			"initialCode": "",
-			"codeSuffix": "",
+			"codeSuffix": "\n}",
 			"previewContainer": "preview-area",
 			"validations": [
-				{
-					"type": "contains",
-					"value": ".units-box",
-					"message": "Use the '.units-box' class selector",
-					"options": {
-						"caseSensitive": false
-					}
-				},
 				{
 					"type": "contains",
 					"value": "width",
@@ -241,30 +201,6 @@
 						"caseSensitive": false
 					}
 				},
-				{
-					"type": "contains",
-					"value": "max-width",
-					"message": "Use the 'max-width' property",
-					"options": {
-						"caseSensitive": false
-					}
-				},
-				{
-					"type": "contains",
-					"value": "--main-color",
-					"message": "Define the '--main-color' CSS variable",
-					"options": {
-						"caseSensitive": false
-					}
-				},
-				{
-					"type": "contains",
-					"value": "var(--main-color)",
-					"message": "Use the CSS variable with var(--main-color)",
-					"options": {
-						"caseSensitive": false
-					}
-				},
 				{
 					"type": "property_value",
 					"value": {
@@ -275,16 +211,36 @@
 					"options": {
 						"exact": true
 					}
+				}
+			]
 		},
 		{
-					"type": "property_value",
+			"id": "basics-8",
-					"value": {
+			"title": "CSS Variables: Custom Properties",
-						"property": "max-width",
+			"description": "CSS variables (custom properties) allow you to store specific values for reuse throughout your stylesheet. They help create consistent designs and make global changes more efficient.",
-						"expected": "37.5rem"
+			"task": "Create a CSS variable named '--accent-color' with the value '#6200ee' in the root scope, then use it for the text color of the element.",
-					},
+			"previewHTML": "<div class='themed-element'>This text should use the accent color</div>",
-					"message": "Set the max-width to '37.5rem'",
+			"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; }",
+			"sandboxCSS": ".themed-element { padding: 1rem; background-color: #f5f5f5; font-weight: bold; }",
+			"codePrefix": "/* Define and use a CSS variable */\n:root {\n  /* Define your variable here */\n  ",
+			"initialCode": "",
+			"codeSuffix": "\n}\n\n.themed-element {\n  color: var(--accent-color);\n}",
+			"previewContainer": "preview-area",
+			"validations": [
+				{
+					"type": "contains",
+					"value": "--accent-color",
+					"message": "Define the '--accent-color' CSS variable",
 					"options": {
-						"exact": true
+						"caseSensitive": true
+					}
+				},
+				{
+					"type": "contains",
+					"value": "#6200ee",
+					"message": "Set the variable value to '#6200ee'",
+					"options": {
+						"caseSensitive": false
 					}
 				}
 			]

lessons/01-box-model.json

@@ -1,49 +1,113 @@
 {
 	"id": "box-model",
-	"title": "CSS Box Model Essentials",
+	"title": "CSS Box Model & Layout Principles",
-	"description": "Understand how CSS calculates sizes and spacing around elements using margin, border, padding, and content areas.",
+	"description": "Master the fundamental principles of space management in web design through the CSS box model. This module explores how content, padding, borders, and margins combine to create layout structures that are both visually appealing and structurally sound.",
 	"difficulty": "beginner",
 	"lessons": [
 		{
 			"id": "box-model-1",
-			"title": "Content, Padding, Border, Margin",
+			"title": "Box Model Components",
-			"description": "Learn the four layers of the CSS box model and how each affects element dimensions.",
+			"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": "Create a <code>div</code> with class 'box' and add 1.25rem padding, a 0.125rem solid #333 border, and 1rem margin.",
+			"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.",
-			"previewHTML": "<div class=\"box\">Box Model Demo</div>",
+			"previewHTML": "<div class=\"box\">Box Model Components</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .box { background-color: #f0f0f0; }",
+			"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1rem; } .box { background-color: #f0f0f0; border: 0.125rem dashed #aaa; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Style the box element */\n.box {",
+			"codePrefix": "/* Add padding to the box element */\n.box {\n  /* Add your code below */\n  ",
 			"initialCode": "",
-			"codeSuffix": "}",
+			"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": "Padding should be 1.25rem" },
-				{ "type": "contains", "value": "border", "message": "Use the 'border' property", "options": { "caseSensitive": false } },
 				{
-					"type": "regex",
+					"type": "contains",
-					"value": "border:\\s*0.125rem\\s+solid\\s+#333",
+					"value": "padding",
-					"message": "Border should be '0.125rem solid #333'",
+					"message": "Use the 'padding' property",
 					"options": { "caseSensitive": false }
 				},
-				{ "type": "contains", "value": "margin", "message": "Use the 'margin' property", "options": { "caseSensitive": false } },
+				{
-				{ "type": "property_value", "value": { "property": "margin", "expected": "1rem" }, "message": "Margin should be 1rem" }
+					"type": "property_value",
+					"value": { "property": "padding", "expected": "1.25rem" },
+					"message": "Set padding to exactly '1.25rem'"
+				}
 			]
 		},
 		{
 			"id": "box-model-2",
-			"title": "Box-Sizing Property",
+			"title": "Adding Borders",
-			"description": "Discover how <code>box-sizing</code> changes the box model calculation for width and height.",
+			"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": "Set <code>box-sizing: border-box;</code> on the .box element and note how its width includes padding and border.",
+			"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.",
-			"previewHTML": "<div class=\"box\">Border-box Demo</div>",
+			"previewHTML": "<div class=\"box\">This box needs a border</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; } .box { width: 200px; padding: 1rem; border: 0.125rem solid #333; background: #eef; }",
+			"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1rem; } .box { background-color: #f0f0f0; padding: 1.25rem; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Apply box-sizing */\n.box {",
+			"codePrefix": "/* Add a border to the box */\n.box {\n  /* Add your code below */\n  ",
 			"initialCode": "",
-			"codeSuffix": "}",
+			"codeSuffix": "\n}",
 			"previewContainer": "preview-area",
 			"validations": [
-				{ "type": "contains", "value": "box-sizing", "message": "Include the 'box-sizing' property", "options": { "caseSensitive": false } },
+				{
+					"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",
+					"options": { "caseSensitive": false }
+				}
+			]
+		},
+		{
+			"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.",
+			"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; }",
+			"sandboxCSS": "",
+			"codePrefix": "/* Add margin to the box */\n.margin-box {\n  /* Add your code below */\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" },
+					"message": "Set margin to '1rem'"
+				}
+			]
+		},
+		{
+			"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.",
+			"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 */ }",
+			"sandboxCSS": "",
+			"codePrefix": "/* Set box-sizing property */\n.border-box {\n  /* Add your code below */\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" },
@@ -52,45 +116,107 @@
 			]
 		},
 		{
-			"id": "box-model-3",
+			"id": "box-model-5",
 			"title": "Margin Collapse",
-			"description": "Understand how vertical margins can collapse between adjacent elements.",
+			"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": "Create two stacked <code>div</code>s with class 'box' and 1rem top margin on each. Observe margin collapse.",
+			"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.",
-			"previewHTML": "<div class=\"box\">First</div><div class=\"box\">Second</div>",
+			"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: sans-serif; } .box { padding: 1rem; background: #ddd; margin-top: 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; }",
 			"sandboxCSS": "",
-			"codePrefix": "",
+			"codePrefix": "/* Add margin to observe margin collapse */\n.first {\n  /* Add your code below */\n  ",
 			"initialCode": "",
-			"codeSuffix": "",
+			"codeSuffix": "\n}",
 			"previewContainer": "preview-area",
 			"validations": [
-				{ "type": "contains", "value": "margin-top", "message": "Use 'margin-top' on .box", "options": { "caseSensitive": false } },
+				{
-				{ "type": "property_value", "value": { "property": "margin-top", "expected": "1rem" }, "message": "Top margin should be 1rem" }
+					"type": "contains",
+					"value": "margin-bottom",
+					"message": "Use the 'margin-bottom' property",
+					"options": { "caseSensitive": false }
+				},
+				{
+					"type": "property_value",
+					"value": { "property": "margin-bottom", "expected": "2rem" },
+					"message": "Set margin-bottom to '2rem'"
+				}
 			]
 		},
 		{
-			"id": "box-model-4",
+			"id": "box-model-6",
-			"title": "Using Shorthand Properties",
+			"title": "Margin Shorthand Notation",
-			"description": "Learn to write concise padding and margin using 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": "Refactor separate margin and padding properties into a single shorthand declaration on .box.",
+			"task": "Use margin shorthand syntax to set the top and bottom margins to '1rem' and the left and right margins to '2rem' simultaneously.",
-			"previewHTML": "<div class=\"box\">Shorthand Demo</div>",
+			"previewHTML": "<div class=\"container\"><div class=\"shorthand-box\">This box needs margins: 1rem top/bottom, 2rem left/right</div></div>",
-			"previewBaseCSS": "body { font-family: sans-serif; } .box { background: #fef; }",
+			"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; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Refactor to shorthand */\n.box {",
+			"codePrefix": "/* Use margin shorthand notation */\n.shorthand-box {\n  /* Add your code below */\n  ",
-			"initialCode": "margin: 1rem 0 2rem 0; padding: 0.5rem 1rem 0.5rem 1rem;",
+			"initialCode": "",
-			"codeSuffix": "}",
+			"codeSuffix": "\n}",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
-					"type": "regex",
+					"type": "contains",
-					"value": "margin:\\s*1rem\\s+0\\s+2rem\\s+0",
+					"value": "margin",
-					"message": "Use shorthand for margin: 1rem 0 2rem 0",
+					"message": "Use the 'margin' property",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "regex",
-					"value": "padding:\\s*0.5rem\\s+1rem\\s+0.5rem\\s+1rem",
+					"value": "margin:\\s*1rem\\s+2rem",
-					"message": "Use shorthand for padding: 0.5rem 1rem 0.5rem 1rem",
+					"message": "Use 'margin: 1rem 2rem' to set vertical and horizontal margins",
+					"options": { "caseSensitive": false }
+				}
+			]
+		},
+		{
+			"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.",
+			"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; }",
+			"sandboxCSS": "",
+			"codePrefix": "/* Use padding shorthand notation */\n.padding-box {\n  /* Add your code below */\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"
+				}
+			]
+		},
+		{
+			"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.",
+			"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; }",
+			"sandboxCSS": "",
+			"codePrefix": "/* Add a bottom border only */\n.border-demo {\n  /* Add your code below */\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'",
 					"options": { "caseSensitive": false }
 				}
 			]