diff --git a/lessons/01-box-model.json b/lessons/01-box-model.json index 231ada1..9b90902 100644 --- a/lessons/01-box-model.json +++ b/lessons/01-box-model.json @@ -52,11 +52,11 @@ "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 .margin-box to create space between it and the adjacent element.", - "previewHTML": "
This box needs margins
Adjacent element
", - "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; }", + "task": "Add margin: 1rem to .outer to create space between it and the adjacent element.", + "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": "", - "codePrefix": ".margin-box {\n ", + "codePrefix": ".outer {\n ", "initialCode": "", "codeSuffix": "\n}", "solution": "margin: 1rem;", @@ -73,11 +73,11 @@ "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 .border-box so padding and border are included in its 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; } .content-box { box-sizing: content-box; }", + "task": "Add box-sizing: border-box to .sized so padding and border are included in its 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": "", - "codePrefix": ".border-box {\n ", + "codePrefix": ".sized {\n ", "initialCode": "", "codeSuffix": "\n}", "solution": "box-sizing: border-box;", @@ -115,11 +115,11 @@ "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 .shorthand-box for 1rem top/bottom and 2rem left/right.", - "previewHTML": "
This box needs margins: 1rem top/bottom, 2rem left/right
", - "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .container { background-color: whitesmoke; padding: 8px; } .shorthand-box { background-color: honeydew; border: 2px solid mediumseagreen; padding: 1rem; }", + "task": "Add margin: 1rem 2rem to .spaced 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": "", - "codePrefix": ".shorthand-box {\n ", + "codePrefix": ".spaced {\n ", "initialCode": "", "codeSuffix": "\n}", "solution": "margin: 1rem 2rem;", @@ -137,11 +137,11 @@ "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 .padding-box 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; } .padding-box { background-color: papayawhip; border: 2px solid orange; }", + "task": "Add padding: 1.5rem to .padded 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": ".padding-box {\n ", + "codePrefix": ".padded {\n ", "initialCode": "", "codeSuffix": "\n}", "solution": "padding: 1.5rem;", @@ -158,11 +158,11 @@ "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 .border-demo.", - "previewHTML": "
This element needs only a bottom border
", - "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .border-demo { padding: 1rem; background-color: aliceblue; }", + "task": "Add border-bottom: 4px solid dodgerblue to .line.", + "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": "", - "codePrefix": ".border-demo {\n ", + "codePrefix": ".line {\n ", "initialCode": "", "codeSuffix": "\n}", "solution": "border-bottom: 4px solid dodgerblue;", diff --git a/lessons/05-units-variables.json b/lessons/05-units-variables.json index e98a16d..de70ba9 100644 --- a/lessons/05-units-variables.json +++ b/lessons/05-units-variables.json @@ -9,11 +9,11 @@ "id": "units-1", "title": "Absolute vs. Relative Units", "description": "Learn the difference between px, rem, em, %, and vw/vh for flexible, responsive layouts.", - "task": "Set the width of .unit-box to 80% and max-width to 37.5rem.", - "previewHTML": "
Resize me!
", - "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .unit-box { background: #f5f5f5; padding: 1rem; }", + "task": "Set the width of .box to 80% and max-width to 37.5rem.", + "previewHTML": "
Resize me!
", + "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .box { background: #f5f5f5; padding: 1rem; }", "sandboxCSS": "", - "codePrefix": "/* Set flexible sizing */\n.unit-box {", + "codePrefix": "/* Set flexible sizing */\n.box {", "initialCode": "", "codeSuffix": "}", "solution": " width: 80%;\n max-width: 37.5rem;", @@ -33,14 +33,14 @@ "id": "units-2", "title": "CSS Custom Properties", "description": "Define and reuse variables (--custom properties) to centralize your theme values.", - "task": "Create a --main-color variable in :root with #6200ee and apply it as the border color on .var-box.", - "previewHTML": "
Variable Box
", - "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .var-box { padding: 1rem; border: 0.125rem solid #ddd; }", + "task": "Create a --main-color variable in :root with #6200ee and apply it as the border color on .themed.", + "previewHTML": "
Variable Box
", + "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .themed { padding: 1rem; border: 0.125rem solid #ddd; }", "sandboxCSS": "", "codePrefix": "/* Define and use a CSS variable */\n:root {", "initialCode": "", - "codeSuffix": "}\n.var-box { }", - "solution": " --main-color: #6200ee;\n}\n.var-box {\n border-color: var(--main-color);", + "codeSuffix": "}\n.themed { }", + "solution": " --main-color: #6200ee;\n}\n.themed {\n border-color: var(--main-color);", "previewContainer": "preview-area", "validations": [ { @@ -67,11 +67,11 @@ "id": "units-3", "title": "Unit Calculations (calc)", "description": "Use the calc() function to combine different units in one expression.", - "task": "Set the width of .calc-box to calc(100% - 2rem) and min-height to calc(10vh + 1rem).", - "previewHTML": "
Calc Demo
", - "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .calc-box { background: #e8f5e9; padding: 1rem; }", + "task": "Set the width of .sized to calc(100% - 2rem) and min-height to calc(10vh + 1rem).", + "previewHTML": "
Calc Demo
", + "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .sized { background: #e8f5e9; padding: 1rem; }", "sandboxCSS": "", - "codePrefix": "/* Use calc for dynamic sizing */\n.calc-box {", + "codePrefix": "/* Use calc for dynamic sizing */\n.sized {", "initialCode": "", "codeSuffix": "}", "solution": " width: calc(100% - 2rem);\n min-height: calc(10vh + 1rem);", @@ -96,11 +96,11 @@ "id": "units-4", "title": "Viewport & Responsive Units", "description": "Control layouts relative to viewport size with vw, vh, and vmin/vmax units.", - "task": "Give .viewport-box a width of 50vw and height of 20vh.", - "previewHTML": "
Viewport Box
", - "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .viewport-box { background: #ffe0b2; }", + "task": "Give .view a width of 50vw and height of 20vh.", + "previewHTML": "
Viewport Box
", + "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .view { background: #ffe0b2; }", "sandboxCSS": "", - "codePrefix": "/* Use viewport units */\n.viewport-box {", + "codePrefix": "/* Use viewport units */\n.view {", "initialCode": "", "codeSuffix": "}", "solution": " width: 50vw;\n height: 20vh;", diff --git a/lessons/08-responsive.json b/lessons/08-responsive.json index 2e4bb6a..bc856cd 100644 --- a/lessons/08-responsive.json +++ b/lessons/08-responsive.json @@ -9,14 +9,14 @@ "id": "responsive-1", "title": "Media Queries", "description": "Understand the syntax and use cases for CSS media queries to apply styles conditionally based on viewport characteristics.", - "task": "Write a media query with @media (max-width: 600px) that changes .responsive-box background to lightcoral.", - "previewHTML": "
Resize the window
", - "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .responsive-box { padding: 1rem; background: lightblue; }", + "task": "Write a media query with @media (max-width: 600px) that changes .panel background to lightcoral.", + "previewHTML": "
Resize the window
", + "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .panel { padding: 1rem; background: lightblue; }", "sandboxCSS": "", "codePrefix": "/* Add your media query below */\n", "initialCode": "", "codeSuffix": "", - "solution": "@media (max-width: 600px) {\n .responsive-box {\n background: lightcoral;\n }\n}", + "solution": "@media (max-width: 600px) {\n .panel {\n background: lightcoral;\n }\n}", "previewContainer": "preview-area", "validations": [ { @@ -27,8 +27,8 @@ }, { "type": "contains", - "value": ".responsive-box", - "message": "Target .responsive-box inside the media query", + "value": ".panel", + "message": "Target .panel inside the media query", "options": { "caseSensitive": false } }, { @@ -43,11 +43,11 @@ "id": "responsive-2", "title": "Fluid Type", "description": "Use relative units like vw to make font sizes scale with the viewport width.", - "task": "Set font-size: 5vw on .fluid-text so it scales as the viewport changes.", - "previewHTML": "

Fluid Typography

", + "task": "Set font-size: 5vw on .text so it scales as the viewport changes.", + "previewHTML": "

Fluid Typography

", "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; }", "sandboxCSS": "", - "codePrefix": "/* Apply fluid font sizing */\n.fluid-text {", + "codePrefix": "/* Apply fluid font sizing */\n.text {", "initialCode": "", "codeSuffix": "}", "solution": " font-size: 5vw;", @@ -60,11 +60,11 @@ "id": "responsive-3", "title": "Flex Grids", "description": "Combine CSS Grid with auto-fit or auto-fill for responsive column layouts.", - "task": "Add display: grid, grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)), and gap: 1rem to .grid-responsive.", - "previewHTML": "
1
2
3
4
", - "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .grid-responsive > div { background: #d1c4e9; padding: 1rem; }", + "task": "Add display: grid, grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)), and gap: 1rem to .cards.", + "previewHTML": "
1
2
3
4
", + "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .cards > div { background: #d1c4e9; padding: 1rem; }", "sandboxCSS": "", - "codePrefix": "/* Create a responsive grid */\n.grid-responsive {", + "codePrefix": "/* Create a responsive grid */\n.cards {", "initialCode": "", "codeSuffix": "}", "solution": " display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1rem;", diff --git a/lessons/de/01-box-model.json b/lessons/de/01-box-model.json index 67c8b89..56212b7 100644 --- a/lessons/de/01-box-model.json +++ b/lessons/de/01-box-model.json @@ -50,11 +50,11 @@ "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 .margin-box hinzu, 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; } .margin-box { background-color: plum; padding: 1rem; border: 2px solid orchid; } .neighbor { background-color: lightblue; padding: 1rem; border: 2px solid steelblue; }", + "task": "Füge margin: 1rem zu .outer hinzu, 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": "", - "codePrefix": ".margin-box {\n ", + "codePrefix": ".outer {\n ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", @@ -70,11 +70,11 @@ "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 .border-box hinzu, 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; } .content-box { box-sizing: content-box; }", + "task": "Füge box-sizing: border-box zu .sized hinzu, 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": "", - "codePrefix": ".border-box {\n ", + "codePrefix": ".sized {\n ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", @@ -110,11 +110,11 @@ "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 .shorthand-box hinzu für 1rem oben/unten und 2rem links/rechts.", - "previewHTML": "
Diese Box braucht Margins: 1rem oben/unten, 2rem links/rechts
", - "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .container { background-color: whitesmoke; padding: 8px; } .shorthand-box { background-color: honeydew; border: 2px solid mediumseagreen; padding: 1rem; }", + "task": "Füge margin: 1rem 2rem zu .spaced hinzu für 1rem oben/unten und 2rem links/rechts.", + "previewHTML": "
Diese Box braucht Margins: 1rem oben/unten, 2rem links/rechts
", + "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .container { background-color: whitesmoke; padding: 8px; } .spaced { background-color: honeydew; border: 2px solid mediumseagreen; padding: 1rem; }", "sandboxCSS": "", - "codePrefix": ".shorthand-box {\n ", + "codePrefix": ".spaced {\n ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", @@ -131,11 +131,11 @@ "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 .padding-box hinzu für gleichmäßiges Padding.", - "previewHTML": "
Diese Box braucht gleichmäßiges Padding
", - "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .padding-box { background-color: papayawhip; border: 2px solid orange; }", + "task": "Füge padding: 1.5rem zu .padded hinzu 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": ".padding-box {\n ", + "codePrefix": ".padded {\n ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", @@ -151,11 +151,11 @@ "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 .border-demo hinzu.", - "previewHTML": "
Dieses Element braucht nur einen unteren Rahmen
", - "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .border-demo { padding: 1rem; background-color: aliceblue; }", + "task": "Füge border-bottom: 4px solid dodgerblue zu .line hinzu.", + "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": "", - "codePrefix": ".border-demo {\n ", + "codePrefix": ".line {\n ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", diff --git a/lessons/de/05-units-variables.json b/lessons/de/05-units-variables.json index 927f0b5..03fe298 100644 --- a/lessons/de/05-units-variables.json +++ b/lessons/de/05-units-variables.json @@ -9,11 +9,11 @@ "id": "units-1", "title": "Absolute vs. Relative Einheiten", "description": "Lerne den Unterschied zwischen px, rem, em, % und vw/vh für flexible, responsive Layouts.", - "task": "Setze die Breite von .unit-box auf 80% und max-width auf 37.5rem.", - "previewHTML": "
Ändere meine Größe!
", - "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .unit-box { background: #f5f5f5; padding: 1rem; }", + "task": "Setze die Breite von .box auf 80% und max-width auf 37.5rem.", + "previewHTML": "
Ändere meine Größe!
", + "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .box { background: #f5f5f5; padding: 1rem; }", "sandboxCSS": "", - "codePrefix": "/* Setze flexible Größen */\n.unit-box {", + "codePrefix": "/* Setze flexible Größen */\n.box {", "initialCode": "", "codeSuffix": "}", "previewContainer": "preview-area", @@ -42,13 +42,13 @@ "id": "units-2", "title": "CSS Custom Properties", "description": "Definiere und verwende Variablen (--custom properties) wieder, um deine Theme-Werte zu zentralisieren.", - "task": "Erstelle eine --main-color Variable in :root mit #6200ee und wende sie als Rahmenfarbe auf .var-box an.", - "previewHTML": "
Variablen-Box
", - "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .var-box { padding: 1rem; border: 0.125rem solid #ddd; }", + "task": "Erstelle eine --main-color Variable in :root mit #6200ee und wende sie als Rahmenfarbe auf .themed an.", + "previewHTML": "
Variablen-Box
", + "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .themed { padding: 1rem; border: 0.125rem solid #ddd; }", "sandboxCSS": "", "codePrefix": "/* Definiere und verwende eine CSS-Variable */\n:root {", "initialCode": "", - "codeSuffix": "}\n.var-box { }", + "codeSuffix": "}\n.themed { }", "previewContainer": "preview-area", "validations": [ { @@ -75,11 +75,11 @@ "id": "units-3", "title": "Einheiten-Berechnungen (calc)", "description": "Verwende die calc() Funktion, um verschiedene Einheiten in einem Ausdruck zu kombinieren.", - "task": "Setze die Breite von .calc-box auf calc(100% - 2rem) und min-height auf calc(10vh + 1rem).", - "previewHTML": "
Calc Demo
", - "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .calc-box { background: #e8f5e9; padding: 1rem; }", + "task": "Setze die Breite von .sized auf calc(100% - 2rem) und min-height auf calc(10vh + 1rem).", + "previewHTML": "
Calc Demo
", + "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .sized { background: #e8f5e9; padding: 1rem; }", "sandboxCSS": "", - "codePrefix": "/* Verwende calc für dynamische Größen */\n.calc-box {", + "codePrefix": "/* Verwende calc für dynamische Größen */\n.sized {", "initialCode": "", "codeSuffix": "}", "previewContainer": "preview-area", @@ -103,11 +103,11 @@ "id": "units-4", "title": "Viewport & Responsive Einheiten", "description": "Steuere Layouts relativ zur Viewport-Größe mit vw, vh und vmin/vmax Einheiten.", - "task": "Gib .viewport-box eine Breite von 50vw und Höhe von 20vh.", - "previewHTML": "
Viewport-Box
", - "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .viewport-box { background: #ffe0b2; }", + "task": "Gib .view eine Breite von 50vw und Höhe von 20vh.", + "previewHTML": "
Viewport-Box
", + "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .view { background: #ffe0b2; }", "sandboxCSS": "", - "codePrefix": "/* Verwende Viewport-Einheiten */\n.viewport-box {", + "codePrefix": "/* Verwende Viewport-Einheiten */\n.view {", "initialCode": "", "codeSuffix": "}", "previewContainer": "preview-area", diff --git a/lessons/de/08-responsive.json b/lessons/de/08-responsive.json index 5588049..a7bd8c9 100644 --- a/lessons/de/08-responsive.json +++ b/lessons/de/08-responsive.json @@ -9,9 +9,9 @@ "id": "responsive-1", "title": "Einführung in Media Queries", "description": "Verstehe die Syntax und Anwendungsfälle für CSS Media Queries, um Stile bedingt basierend auf Viewport-Eigenschaften anzuwenden.", - "task": "Schreibe eine Media Query, die gilt, wenn der Viewport maximal 600px breit ist, und ändere den Hintergrund von .responsive-box auf lightcoral.", - "previewHTML": "
Ändere die Fenstergröße
", - "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .responsive-box { padding: 1rem; background: lightblue; }", + "task": "Schreibe eine Media Query, die gilt, wenn der Viewport maximal 600px breit ist, und ändere den Hintergrund von .panel auf lightcoral.", + "previewHTML": "
Ändere die Fenstergröße
", + "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .panel { padding: 1rem; background: lightblue; }", "sandboxCSS": "", "codePrefix": "/* Füge deine Media Query unten ein */\n", "initialCode": "", @@ -26,8 +26,8 @@ }, { "type": "contains", - "value": ".responsive-box", - "message": "Adressiere .responsive-box innerhalb der Media Query", + "value": ".panel", + "message": "Adressiere .panel innerhalb der Media Query", "options": { "caseSensitive": false } }, { @@ -48,11 +48,11 @@ "id": "responsive-2", "title": "Flüssige Typografie", "description": "Verwende relative Einheiten wie vw, damit Schriftgrößen mit der Viewport-Breite skalieren.", - "task": "Setze die font-size von .fluid-text auf 5vw, damit sie sich mit dem Viewport ändert.", - "previewHTML": "

Flüssige Typografie

", + "task": "Setze die font-size von .text auf 5vw, damit sie sich mit dem Viewport ändert.", + "previewHTML": "

Flüssige Typografie

", "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; }", "sandboxCSS": "", - "codePrefix": "/* Wende flüssige Schriftgröße an */\n.fluid-text {", + "codePrefix": "/* Wende flüssige Schriftgröße an */\n.text {", "initialCode": "", "codeSuffix": "}", "previewContainer": "preview-area", @@ -76,11 +76,11 @@ "id": "responsive-3", "title": "Flexible Raster", "description": "Kombiniere CSS Grid mit auto-fit oder auto-fill für responsive Spaltenlayouts.", - "task": "Definiere .grid-responsive mit grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) und einem gap von 1rem.", - "previewHTML": "
1
2
3
4
", - "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .grid-responsive > div { background: #d1c4e9; padding: 1rem; }", + "task": "Definiere .cards mit grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) und einem gap von 1rem.", + "previewHTML": "
1
2
3
4
", + "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .cards > div { background: #d1c4e9; padding: 1rem; }", "sandboxCSS": "", - "codePrefix": "/* Erstelle ein responsives Raster */\n.grid-responsive {", + "codePrefix": "/* Erstelle ein responsives Raster */\n.cards {", "initialCode": "", "codeSuffix": "}", "previewContainer": "preview-area", diff --git a/src/index.html b/src/index.html index c444313..f24a2d3 100644 --- a/src/index.html +++ b/src/index.html @@ -64,16 +64,16 @@
-
- Your Output - -
+
+ Your Output + +