From 688de589870d6fda9e9c292ccbb4224091525e43 Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Wed, 7 Jan 2026 14:15:12 +0100 Subject: [PATCH] fix: update English box-model task instructions format Apply same task instruction format update to English source file. --- lessons/01-box-model.json | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/lessons/01-box-model.json b/lessons/01-box-model.json index 2a6afb2..57c4a70 100644 --- a/lessons/01-box-model.json +++ b/lessons/01-box-model.json @@ -9,7 +9,7 @@ "id": "box-model-1", "title": "Box Model Components", "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.", + "task": "Set padding to 1rem to create space between the content and border.", "previewHTML": "
Box Model Components
", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background-color: lavender; border: 2px dashed slategray; }", "sandboxCSS": "", @@ -30,7 +30,7 @@ "id": "box-model-2", "title": "Adding Borders", "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.", + "task": "Set border to 2px solid darkslategray.", "previewHTML": "
This box needs a border
", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background-color: mintcream; padding: 1rem; }", "sandboxCSS": "", @@ -52,7 +52,7 @@ "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.", - "task": "Add margin: 1rem to .outer to create space between it and the adjacent element.", + "task": "Set margin to 1rem to create space between this element and its neighbors.", "previewHTML": "
This box needs margins
Adjacent element
", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .container { background-color: whitesmoke; padding: 8px; } .outer { background-color: plum; padding: 1rem; border: 2px solid orchid; } .neighbor { background-color: lightblue; padding: 1rem; border: 2px solid steelblue; }", "sandboxCSS": "", @@ -73,7 +73,7 @@ "id": "box-model-4", "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 .sized so padding and border are included in its width.", + "task": "Set box-sizing to border-box so padding and border are included in the width.", "previewHTML": "
Content-box (default)
Border-box
", "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; } .default { box-sizing: content-box; }", "sandboxCSS": "", @@ -94,7 +94,7 @@ "id": "box-model-5", "title": "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.", + "task": "Set margin-bottom to 2rem. 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, sans-serif; padding: 1rem; } .collapse-demo { border: 1px solid silver; padding: 8px; background: ghostwhite; } .second { margin-top: 1rem; background: linen; }", "sandboxCSS": "", @@ -115,7 +115,7 @@ "id": "box-model-6", "title": "Margin Shorthand Notation", "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 .spaced for 1rem top/bottom and 2rem left/right.", + "task": "Set margin to 1rem 2rem 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, sans-serif; padding: 1rem; } .container { background-color: whitesmoke; padding: 8px; } .spaced { background-color: honeydew; border: 2px solid mediumseagreen; padding: 1rem; }", "sandboxCSS": "", @@ -137,20 +137,20 @@ "id": "box-model-7", "title": "Padding Shorthand Notation", "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 .padded to add equal padding on all sides.", + "task": "Set padding to 2rem to add equal padding on all sides.", "previewHTML": "
This box needs equal padding on all sides
", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .padded { background-color: papayawhip; border: 2px solid orange; }", "sandboxCSS": "", "codePrefix": ".padded {\n ", "initialCode": "", "codeSuffix": "\n}", - "solution": "padding: 1.5rem;", + "solution": "padding: 2rem;", "previewContainer": "preview-area", "validations": [ { "type": "property_value", - "value": { "property": "padding", "expected": "1.5rem" }, - "message": "Set padding: 1.5rem" + "value": { "property": "padding", "expected": "2rem" }, + "message": "Set padding: 2rem" } ] }, @@ -158,7 +158,7 @@ "id": "box-model-8", "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 .line.", + "task": "Set border-bottom to 4px solid dodgerblue.", "previewHTML": "
This element needs only a bottom border
", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .line { padding: 1rem; background-color: aliceblue; }", "sandboxCSS": "",