diff --git a/lessons/ar/01-box-model.json b/lessons/ar/01-box-model.json index a5b10a6..d525bcf 100644 --- a/lessons/ar/01-box-model.json +++ b/lessons/ar/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": "", diff --git a/lessons/de/01-box-model.json b/lessons/de/01-box-model.json index f51f01b..1e4810c 100644 --- a/lessons/de/01-box-model.json +++ b/lessons/de/01-box-model.json @@ -9,7 +9,7 @@ "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 padding: 1rem zu .box hinzu, um Abstand zwischen Inhalt und Rahmen zu schaffen.", + "task": "Setze padding auf 1rem, um Abstand zwischen Inhalt und Rahmen zu schaffen.", "previewHTML": "
Box-Modell Komponenten
", "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": "Rahmen hinzufügen", "description": "Rahmen umranden ein Element und schaffen visuelle Trennung. Die border-Kurzschreibweise akzeptiert drei Werte: Breite, Stil und Farbe.", - "task": "Füge border: 2px solid darkslategray zu .box hinzu.", + "task": "Setze border auf 2px solid darkslategray.", "previewHTML": "
Diese Box braucht einen Rahmen
", "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": "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 margin: 1rem zu .outer hinzu, um Abstand zum benachbarten Element zu schaffen.", + "task": "Setze margin auf 1rem, um Abstand zum benachbarten Element zu schaffen.", "previewHTML": "
Diese Box braucht Margins
Benachbartes 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": "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": "Füge box-sizing: border-box zu .sized hinzu, damit Padding und Border in die Breite einbezogen werden.", + "task": "Setze box-sizing auf border-box, damit Padding und Border in die Breite einbezogen werden.", "previewHTML": "
Content-box (Standard)
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-Kollaps", "description": "Wenn zwei vertikale Margins aufeinandertreffen, kollabieren sie zum größeren der beiden Werte statt zu addieren.", - "task": "Füge margin-bottom: 2rem zu .first hinzu. Der Abstand zwischen den Absätzen beträgt 2rem (nicht 3rem) durch Margin-Kollaps.", + "task": "Setze margin-bottom auf 2rem. Der Abstand zwischen den Absätzen beträgt 2rem (nicht 3rem) durch Margin-Kollaps.", "previewHTML": "

Dieser Absatz hat einen Bottom-Margin.

Dieser Absatz hat einen Top-Margin von 1rem.

", "previewBaseCSS": "body { font-family: system-ui, 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-Kurzschreibweise", "description": "Die Margin-Kurzschreibweise kann alle vier Seiten setzen. Zwei Werte setzen vertikale (oben/unten) und horizontale (links/rechts) Margins.", - "task": "Füge margin: 1rem 2rem zu .spaced hinzu für 1rem oben/unten und 2rem links/rechts.", + "task": "Setze margin auf 1rem 2rem für 1rem oben/unten und 2rem links/rechts.", "previewHTML": "
Diese Box braucht Margins: 1rem oben/unten, 2rem links/rechts
", "previewBaseCSS": "body { font-family: system-ui, 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-Kurzschreibweise", "description": "Wie Margin erlaubt Padding-Kurzschreibweise das Setzen aller Seiten. Ein einzelner Wert gilt für alle vier Seiten.", - "task": "Füge padding: 1.5rem zu .padded hinzu für gleichmäßiges Padding.", + "task": "Setze padding auf 2rem für gleichmäßiges Padding.", "previewHTML": "
Diese Box braucht gleichmäßiges Padding
", "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": "Setze padding: 1.5rem" + "value": { "property": "padding", "expected": "2rem" }, + "message": "Setze padding: 2rem" } ] }, @@ -158,7 +158,7 @@ "id": "box-model-8", "title": "Rahmen auf einzelnen Seiten", "description": "Für feinere Kontrolle können einzelne Seiten mit border-top, border-right, border-bottom oder border-left angesprochen werden.", - "task": "Füge border-bottom: 4px solid dodgerblue zu .line hinzu.", + "task": "Setze border-bottom auf 4px solid dodgerblue.", "previewHTML": "
Dieses Element braucht nur einen unteren Rahmen
", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .line { padding: 1rem; background-color: aliceblue; }", "sandboxCSS": "", diff --git a/lessons/es/01-box-model.json b/lessons/es/01-box-model.json index a5b10a6..d525bcf 100644 --- a/lessons/es/01-box-model.json +++ b/lessons/es/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": "", diff --git a/lessons/pl/01-box-model.json b/lessons/pl/01-box-model.json index a5b10a6..d525bcf 100644 --- a/lessons/pl/01-box-model.json +++ b/lessons/pl/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": "", diff --git a/lessons/uk/01-box-model.json b/lessons/uk/01-box-model.json index a5b10a6..d525bcf 100644 --- a/lessons/uk/01-box-model.json +++ b/lessons/uk/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": "",