public/code-crispies
2
1
Fork 0
Code Issues 7 Pull Requests Actions Activity

refactor: shorten compound class names to single words

Browse Source 
- box-model: .margin-box→.outer, .border-box→.sized, .shorthand-box→.spaced,
  .padding-box→.padded, .border-demo→.line
- units-variables: .unit-box→.box, .var-box→.themed, .calc-box→.sized,
  .viewport-box→.view
- responsive: .responsive-box→.panel, .fluid-text→.text, .grid-responsive→.cards
- Move expected toggle below preview area
- Update German translations with same changes
This commit is contained in:
Michael Czechowski
2025-12-30 18:23:54 +01:00
parent 00c94fc7ec
commit e13a4fe41f
7 changed files with 102 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
lessons/01-box-model.json
View File

@@ -52,11 +52,11 @@
"id": "box-model-3", "id": "box-model-3",
"title": "Adding Margins", "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.", "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 <kbd>margin: 1rem</kbd> to <kbd>.margin-box</kbd> to create space between it and the adjacent element.", "task": "Add <kbd>margin: 1rem</kbd> to <kbd>.outer</kbd> to create space between it and the adjacent element.",
"previewHTML": "<div class=\"container\"><div class=\"margin-box\">This box needs margins</div><div class=\"neighbor\">Adjacent element</div></div>", "previewHTML": "<div class=\"container\"><div class=\"outer\">This box needs margins</div><div class=\"neighbor\">Adjacent element</div></div>",
"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; }", "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": "", "sandboxCSS": "",
"codePrefix": ".margin-box {\n ", "codePrefix": ".outer {\n ",
"initialCode": "", "initialCode": "",
"codeSuffix": "\n}", "codeSuffix": "\n}",
"solution": "margin: 1rem;", "solution": "margin: 1rem;",
@@ -73,11 +73,11 @@
"id": "box-model-4", "id": "box-model-4",
"title": "Box Sizing: Border-Box", "title": "Box Sizing: Border-Box",
"description": "The <kbd>box-sizing</kbd> property determines how element dimensions are calculated. The default <kbd>content-box</kbd> excludes padding and border from width/height, while <kbd>border-box</kbd> includes them, making layout calculations more intuitive.", "description": "The <kbd>box-sizing</kbd> property determines how element dimensions are calculated. The default <kbd>content-box</kbd> excludes padding and border from width/height, while <kbd>border-box</kbd> includes them, making layout calculations more intuitive.",
"task": "Add <kbd>box-sizing: border-box</kbd> to <kbd>.border-box</kbd> so padding and border are included in its width.", "task": "Add <kbd>box-sizing: border-box</kbd> to <kbd>.sized</kbd> so padding and border are included in its width.",
"previewHTML": "<div class=\"sizing-demo\"><div class=\"box content-box\">Content-box (default)</div><div class=\"box border-box\">Border-box</div></div>", "previewHTML": "<div class=\"sizing-demo\"><div class=\"box default\">Content-box (default)</div><div class=\"box sized\">Border-box</div></div>",
"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; }", "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": "", "sandboxCSS": "",
"codePrefix": ".border-box {\n ", "codePrefix": ".sized {\n ",
"initialCode": "", "initialCode": "",
"codeSuffix": "\n}", "codeSuffix": "\n}",
"solution": "box-sizing: border-box;", "solution": "box-sizing: border-box;",
@@ -115,11 +115,11 @@
"id": "box-model-6", "id": "box-model-6",
"title": "Margin Shorthand Notation", "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.", "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 <kbd>margin: 1rem 2rem</kbd> to <kbd>.shorthand-box</kbd> for 1rem top/bottom and 2rem left/right.", "task": "Add <kbd>margin: 1rem 2rem</kbd> to <kbd>.spaced</kbd> for 1rem top/bottom and 2rem left/right.",
"previewHTML": "<div class=\"container\"><div class=\"shorthand-box\">This box needs margins: 1rem top/bottom, 2rem left/right</div></div>", "previewHTML": "<div class=\"container\"><div class=\"spaced\">This box needs margins: 1rem top/bottom, 2rem left/right</div></div>",
"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; }", "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": "", "sandboxCSS": "",
"codePrefix": ".shorthand-box {\n ", "codePrefix": ".spaced {\n ",
"initialCode": "", "initialCode": "",
"codeSuffix": "\n}", "codeSuffix": "\n}",
"solution": "margin: 1rem 2rem;", "solution": "margin: 1rem 2rem;",
@@ -137,11 +137,11 @@
"id": "box-model-7", "id": "box-model-7",
"title": "Padding Shorthand Notation", "title": "Padding Shorthand Notation",
"description": "Like margin, padding shorthand allows setting all sides at once. A single value applies to all four sides equally.", "description": "Like margin, padding shorthand allows setting all sides at once. A single value applies to all four sides equally.",
"task": "Add <kbd>padding: 1.5rem</kbd> to <kbd>.padding-box</kbd> to add equal padding on all sides.", "task": "Add <kbd>padding: 1.5rem</kbd> to <kbd>.padded</kbd> to add equal padding on all sides.",
"previewHTML": "<div class=\"padding-box\">This box needs equal padding on all sides</div>", "previewHTML": "<div class=\"padded\">This box needs equal padding on all sides</div>",
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .padding-box { background-color: papayawhip; border: 2px solid orange; }", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .padded { background-color: papayawhip; border: 2px solid orange; }",
"sandboxCSS": "", "sandboxCSS": "",
"codePrefix": ".padding-box {\n ", "codePrefix": ".padded {\n ",
"initialCode": "", "initialCode": "",
"codeSuffix": "\n}", "codeSuffix": "\n}",
"solution": "padding: 1.5rem;", "solution": "padding: 1.5rem;",
@@ -158,11 +158,11 @@
"id": "box-model-8", "id": "box-model-8",
"title": "Border on Specific Sides", "title": "Border on Specific Sides",
"description": "For granular control, you can target specific sides with <kbd>border-top</kbd>, <kbd>border-right</kbd>, <kbd>border-bottom</kbd>, or <kbd>border-left</kbd>.", "description": "For granular control, you can target specific sides with <kbd>border-top</kbd>, <kbd>border-right</kbd>, <kbd>border-bottom</kbd>, or <kbd>border-left</kbd>.",
"task": "Add <kbd>border-bottom: 4px solid dodgerblue</kbd> to <kbd>.border-demo</kbd>.", "task": "Add <kbd>border-bottom: 4px solid dodgerblue</kbd> to <kbd>.line</kbd>.",
"previewHTML": "<div class=\"border-demo\">This element needs only a bottom border</div>", "previewHTML": "<div class=\"line\">This element needs only a bottom border</div>",
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .border-demo { padding: 1rem; background-color: aliceblue; }", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .line { padding: 1rem; background-color: aliceblue; }",
"sandboxCSS": "", "sandboxCSS": "",
"codePrefix": ".border-demo {\n ", "codePrefix": ".line {\n ",
"initialCode": "", "initialCode": "",
"codeSuffix": "\n}", "codeSuffix": "\n}",
"solution": "border-bottom: 4px solid dodgerblue;", "solution": "border-bottom: 4px solid dodgerblue;",

34
lessons/05-units-variables.json
View File

@@ -9,11 +9,11 @@
"id": "units-1", "id": "units-1",
"title": "Absolute vs. Relative Units", "title": "Absolute vs. Relative Units",
"description": "Learn the difference between px, rem, em, %, and vw/vh for flexible, responsive layouts.", "description": "Learn the difference between px, rem, em, %, and vw/vh for flexible, responsive layouts.",
"task": "Set the <kbd>width</kbd> of <kbd>.unit-box</kbd> to <kbd>80%</kbd> and <kbd>max-width</kbd> to <kbd>37.5rem</kbd>.", "task": "Set the <kbd>width</kbd> of <kbd>.box</kbd> to <kbd>80%</kbd> and <kbd>max-width</kbd> to <kbd>37.5rem</kbd>.",
"previewHTML": "<div class=\"unit-box\">Resize me!</div>", "previewHTML": "<div class=\"box\">Resize me!</div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .unit-box { background: #f5f5f5; padding: 1rem; }", "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .box { background: #f5f5f5; padding: 1rem; }",
"sandboxCSS": "", "sandboxCSS": "",
"codePrefix": "/* Set flexible sizing */\n.unit-box {", "codePrefix": "/* Set flexible sizing */\n.box {",
"initialCode": "", "initialCode": "",
"codeSuffix": "}", "codeSuffix": "}",
"solution": " width: 80%;\n max-width: 37.5rem;", "solution": " width: 80%;\n max-width: 37.5rem;",
@@ -33,14 +33,14 @@
"id": "units-2", "id": "units-2",
"title": "CSS Custom Properties", "title": "CSS Custom Properties",
"description": "Define and reuse variables (--custom properties) to centralize your theme values.", "description": "Define and reuse variables (--custom properties) to centralize your theme values.",
"task": "Create a <kbd>--main-color</kbd> variable in <kbd>:root</kbd> with <kbd>#6200ee</kbd> and apply it as the border color on <kbd>.var-box</kbd>.", "task": "Create a <kbd>--main-color</kbd> variable in <kbd>:root</kbd> with <kbd>#6200ee</kbd> and apply it as the border color on <kbd>.themed</kbd>.",
"previewHTML": "<div class=\"var-box\">Variable Box</div>", "previewHTML": "<div class=\"themed\">Variable Box</div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .var-box { padding: 1rem; border: 0.125rem solid #ddd; }", "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .themed { padding: 1rem; border: 0.125rem solid #ddd; }",
"sandboxCSS": "", "sandboxCSS": "",
"codePrefix": "/* Define and use a CSS variable */\n:root {", "codePrefix": "/* Define and use a CSS variable */\n:root {",
"initialCode": "", "initialCode": "",
"codeSuffix": "}\n.var-box { }", "codeSuffix": "}\n.themed { }",
"solution": " --main-color: #6200ee;\n}\n.var-box {\n border-color: var(--main-color);", "solution": " --main-color: #6200ee;\n}\n.themed {\n border-color: var(--main-color);",
"previewContainer": "preview-area", "previewContainer": "preview-area",
"validations": [ "validations": [
{ {
@@ -67,11 +67,11 @@
"id": "units-3", "id": "units-3",
"title": "Unit Calculations (calc)", "title": "Unit Calculations (calc)",
"description": "Use the <kbd>calc()</kbd> function to combine different units in one expression.", "description": "Use the <kbd>calc()</kbd> function to combine different units in one expression.",
"task": "Set the <kbd>width</kbd> of <kbd>.calc-box</kbd> to <kbd>calc(100% - 2rem)</kbd> and <kbd>min-height</kbd> to <kbd>calc(10vh + 1rem)</kbd>.", "task": "Set the <kbd>width</kbd> of <kbd>.sized</kbd> to <kbd>calc(100% - 2rem)</kbd> and <kbd>min-height</kbd> to <kbd>calc(10vh + 1rem)</kbd>.",
"previewHTML": "<div class=\"calc-box\">Calc Demo</div>", "previewHTML": "<div class=\"sized\">Calc Demo</div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .calc-box { background: #e8f5e9; padding: 1rem; }", "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .sized { background: #e8f5e9; padding: 1rem; }",
"sandboxCSS": "", "sandboxCSS": "",
"codePrefix": "/* Use calc for dynamic sizing */\n.calc-box {", "codePrefix": "/* Use calc for dynamic sizing */\n.sized {",
"initialCode": "", "initialCode": "",
"codeSuffix": "}", "codeSuffix": "}",
"solution": " width: calc(100% - 2rem);\n min-height: calc(10vh + 1rem);", "solution": " width: calc(100% - 2rem);\n min-height: calc(10vh + 1rem);",
@@ -96,11 +96,11 @@
"id": "units-4", "id": "units-4",
"title": "Viewport & Responsive Units", "title": "Viewport & Responsive Units",
"description": "Control layouts relative to viewport size with vw, vh, and vmin/vmax units.", "description": "Control layouts relative to viewport size with vw, vh, and vmin/vmax units.",
"task": "Give <kbd>.viewport-box</kbd> a <kbd>width</kbd> of <kbd>50vw</kbd> and <kbd>height</kbd> of <kbd>20vh</kbd>.", "task": "Give <kbd>.view</kbd> a <kbd>width</kbd> of <kbd>50vw</kbd> and <kbd>height</kbd> of <kbd>20vh</kbd>.",
"previewHTML": "<div class=\"viewport-box\">Viewport Box</div>", "previewHTML": "<div class=\"view\">Viewport Box</div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .viewport-box { background: #ffe0b2; }", "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .view { background: #ffe0b2; }",
"sandboxCSS": "", "sandboxCSS": "",
"codePrefix": "/* Use viewport units */\n.viewport-box {", "codePrefix": "/* Use viewport units */\n.view {",
"initialCode": "", "initialCode": "",
"codeSuffix": "}", "codeSuffix": "}",
"solution": " width: 50vw;\n height: 20vh;", "solution": " width: 50vw;\n height: 20vh;",

26
lessons/08-responsive.json
View File

@@ -9,14 +9,14 @@
"id": "responsive-1", "id": "responsive-1",
"title": "Media Queries", "title": "Media Queries",
"description": "Understand the syntax and use cases for CSS media queries to apply styles conditionally based on viewport characteristics.", "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 <kbd>@media (max-width: 600px)</kbd> that changes <kbd>.responsive-box</kbd> background to <kbd>lightcoral</kbd>.", "task": "Write a media query with <kbd>@media (max-width: 600px)</kbd> that changes <kbd>.panel</kbd> background to <kbd>lightcoral</kbd>.",
"previewHTML": "<div class=\"responsive-box\">Resize the window</div>", "previewHTML": "<div class=\"panel\">Resize the window</div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .responsive-box { padding: 1rem; background: lightblue; }", "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .panel { padding: 1rem; background: lightblue; }",
"sandboxCSS": "", "sandboxCSS": "",
"codePrefix": "/* Add your media query below */\n", "codePrefix": "/* Add your media query below */\n",
"initialCode": "", "initialCode": "",
"codeSuffix": "", "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", "previewContainer": "preview-area",
"validations": [ "validations": [
{ {
@@ -27,8 +27,8 @@
}, },
{ {
"type": "contains", "type": "contains",
"value": ".responsive-box", "value": ".panel",
"message": "Target <kbd>.responsive-box</kbd> inside the media query", "message": "Target <kbd>.panel</kbd> inside the media query",
"options": { "caseSensitive": false } "options": { "caseSensitive": false }
}, },
{ {
@@ -43,11 +43,11 @@
"id": "responsive-2", "id": "responsive-2",
"title": "Fluid Type", "title": "Fluid Type",
"description": "Use relative units like <kbd>vw</kbd> to make font sizes scale with the viewport width.", "description": "Use relative units like <kbd>vw</kbd> to make font sizes scale with the viewport width.",
"task": "Set <kbd>font-size: 5vw</kbd> on <kbd>.fluid-text</kbd> so it scales as the viewport changes.", "task": "Set <kbd>font-size: 5vw</kbd> on <kbd>.text</kbd> so it scales as the viewport changes.",
"previewHTML": "<p class=\"fluid-text\">Fluid Typography</p>", "previewHTML": "<p class=\"text\">Fluid Typography</p>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; }", "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; }",
"sandboxCSS": "", "sandboxCSS": "",
"codePrefix": "/* Apply fluid font sizing */\n.fluid-text {", "codePrefix": "/* Apply fluid font sizing */\n.text {",
"initialCode": "", "initialCode": "",
"codeSuffix": "}", "codeSuffix": "}",
"solution": " font-size: 5vw;", "solution": " font-size: 5vw;",
@@ -60,11 +60,11 @@
"id": "responsive-3", "id": "responsive-3",
"title": "Flex Grids", "title": "Flex Grids",
"description": "Combine CSS Grid with <kbd>auto-fit</kbd> or <kbd>auto-fill</kbd> for responsive column layouts.", "description": "Combine CSS Grid with <kbd>auto-fit</kbd> or <kbd>auto-fill</kbd> for responsive column layouts.",
"task": "Add <kbd>display: grid</kbd>, <kbd>grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))</kbd>, and <kbd>gap: 1rem</kbd> to <kbd>.grid-responsive</kbd>.", "task": "Add <kbd>display: grid</kbd>, <kbd>grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))</kbd>, and <kbd>gap: 1rem</kbd> to <kbd>.cards</kbd>.",
"previewHTML": "<div class=\"grid-responsive\"><div>1</div><div>2</div><div>3</div><div>4</div></div>", "previewHTML": "<div class=\"cards\"><div>1</div><div>2</div><div>3</div><div>4</div></div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .grid-responsive > div { background: #d1c4e9; padding: 1rem; }", "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .cards > div { background: #d1c4e9; padding: 1rem; }",
"sandboxCSS": "", "sandboxCSS": "",
"codePrefix": "/* Create a responsive grid */\n.grid-responsive {", "codePrefix": "/* Create a responsive grid */\n.cards {",
"initialCode": "", "initialCode": "",
"codeSuffix": "}", "codeSuffix": "}",
"solution": " display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1rem;", "solution": " display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1rem;",

40
lessons/de/01-box-model.json
View File

@@ -50,11 +50,11 @@
"id": "box-model-3", "id": "box-model-3",
"title": "Außenabstände hinzufügen", "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.", "description": "Margins schaffen Abstand zwischen Elementen. Anders als Padding (das den inneren Abstand beeinflusst) existiert Margin außerhalb des Rahmens.",
"task": "Füge <code>margin: 1rem</code> zu <code>.margin-box</code> hinzu, um Abstand zum benachbarten Element zu schaffen.", "task": "Füge <code>margin: 1rem</code> zu <code>.outer</code> hinzu, um Abstand zum benachbarten Element zu schaffen.",
"previewHTML": "<div class=\"container\"><div class=\"margin-box\">Diese Box braucht Margins</div><div class=\"neighbor\">Benachbartes Element</div></div>", "previewHTML": "<div class=\"container\"><div class=\"outer\">Diese Box braucht Margins</div><div class=\"neighbor\">Benachbartes Element</div></div>",
"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; }", "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": "", "sandboxCSS": "",
"codePrefix": ".margin-box {\n ", "codePrefix": ".outer {\n ",
"initialCode": "", "initialCode": "",
"codeSuffix": "\n}", "codeSuffix": "\n}",
"previewContainer": "preview-area", "previewContainer": "preview-area",
@@ -70,11 +70,11 @@
"id": "box-model-4", "id": "box-model-4",
"title": "Box-Sizing: Border-Box", "title": "Box-Sizing: Border-Box",
"description": "Die box-sizing Eigenschaft bestimmt, wie Elementdimensionen berechnet werden. 'content-box' (Standard) schließt Padding und Border aus, während 'border-box' sie einschließt.", "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 <code>box-sizing: border-box</code> zu <code>.border-box</code> hinzu, damit Padding und Border in die Breite einbezogen werden.", "task": "Füge <code>box-sizing: border-box</code> zu <code>.sized</code> hinzu, damit Padding und Border in die Breite einbezogen werden.",
"previewHTML": "<div class=\"sizing-demo\"><div class=\"box content-box\">Content-box (Standard)</div><div class=\"box border-box\">Border-box</div></div>", "previewHTML": "<div class=\"sizing-demo\"><div class=\"box default\">Content-box (Standard)</div><div class=\"box sized\">Border-box</div></div>",
"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; }", "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": "", "sandboxCSS": "",
"codePrefix": ".border-box {\n ", "codePrefix": ".sized {\n ",
"initialCode": "", "initialCode": "",
"codeSuffix": "\n}", "codeSuffix": "\n}",
"previewContainer": "preview-area", "previewContainer": "preview-area",
@@ -110,11 +110,11 @@
"id": "box-model-6", "id": "box-model-6",
"title": "Margin-Kurzschreibweise", "title": "Margin-Kurzschreibweise",
"description": "Die Margin-Kurzschreibweise kann alle vier Seiten setzen. Zwei Werte setzen vertikale (oben/unten) und horizontale (links/rechts) Margins.", "description": "Die Margin-Kurzschreibweise kann alle vier Seiten setzen. Zwei Werte setzen vertikale (oben/unten) und horizontale (links/rechts) Margins.",
"task": "Füge <code>margin: 1rem 2rem</code> zu <code>.shorthand-box</code> hinzu für 1rem oben/unten und 2rem links/rechts.", "task": "Füge <code>margin: 1rem 2rem</code> zu <code>.spaced</code> hinzu für 1rem oben/unten und 2rem links/rechts.",
"previewHTML": "<div class=\"container\"><div class=\"shorthand-box\">Diese Box braucht Margins: 1rem oben/unten, 2rem links/rechts</div></div>", "previewHTML": "<div class=\"container\"><div class=\"spaced\">Diese Box braucht Margins: 1rem oben/unten, 2rem links/rechts</div></div>",
"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; }", "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": "", "sandboxCSS": "",
"codePrefix": ".shorthand-box {\n ", "codePrefix": ".spaced {\n ",
"initialCode": "", "initialCode": "",
"codeSuffix": "\n}", "codeSuffix": "\n}",
"previewContainer": "preview-area", "previewContainer": "preview-area",
@@ -131,11 +131,11 @@
"id": "box-model-7", "id": "box-model-7",
"title": "Padding-Kurzschreibweise", "title": "Padding-Kurzschreibweise",
"description": "Wie Margin erlaubt Padding-Kurzschreibweise das Setzen aller Seiten. Ein einzelner Wert gilt für alle vier Seiten.", "description": "Wie Margin erlaubt Padding-Kurzschreibweise das Setzen aller Seiten. Ein einzelner Wert gilt für alle vier Seiten.",
"task": "Füge <code>padding: 1.5rem</code> zu <code>.padding-box</code> hinzu für gleichmäßiges Padding.", "task": "Füge <code>padding: 1.5rem</code> zu <code>.padded</code> hinzu für gleichmäßiges Padding.",
"previewHTML": "<div class=\"padding-box\">Diese Box braucht gleichmäßiges Padding</div>", "previewHTML": "<div class=\"padded\">Diese Box braucht gleichmäßiges Padding</div>",
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .padding-box { background-color: papayawhip; border: 2px solid orange; }", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .padded { background-color: papayawhip; border: 2px solid orange; }",
"sandboxCSS": "", "sandboxCSS": "",
"codePrefix": ".padding-box {\n ", "codePrefix": ".padded {\n ",
"initialCode": "", "initialCode": "",
"codeSuffix": "\n}", "codeSuffix": "\n}",
"previewContainer": "preview-area", "previewContainer": "preview-area",
@@ -151,11 +151,11 @@
"id": "box-model-8", "id": "box-model-8",
"title": "Rahmen auf einzelnen Seiten", "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.", "description": "Für feinere Kontrolle können einzelne Seiten mit border-top, border-right, border-bottom oder border-left angesprochen werden.",
"task": "Füge <code>border-bottom: 4px solid dodgerblue</code> zu <code>.border-demo</code> hinzu.", "task": "Füge <code>border-bottom: 4px solid dodgerblue</code> zu <code>.line</code> hinzu.",
"previewHTML": "<div class=\"border-demo\">Dieses Element braucht nur einen unteren Rahmen</div>", "previewHTML": "<div class=\"line\">Dieses Element braucht nur einen unteren Rahmen</div>",
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .border-demo { padding: 1rem; background-color: aliceblue; }", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .line { padding: 1rem; background-color: aliceblue; }",
"sandboxCSS": "", "sandboxCSS": "",
"codePrefix": ".border-demo {\n ", "codePrefix": ".line {\n ",
"initialCode": "", "initialCode": "",
"codeSuffix": "\n}", "codeSuffix": "\n}",
"previewContainer": "preview-area", "previewContainer": "preview-area",

32
lessons/de/05-units-variables.json
View File

@@ -9,11 +9,11 @@
"id": "units-1", "id": "units-1",
"title": "Absolute vs. Relative Einheiten", "title": "Absolute vs. Relative Einheiten",
"description": "Lerne den Unterschied zwischen px, rem, em, % und vw/vh für flexible, responsive Layouts.", "description": "Lerne den Unterschied zwischen px, rem, em, % und vw/vh für flexible, responsive Layouts.",
"task": "Setze die Breite von <kbd>.unit-box</kbd> auf <kbd>80%</kbd> und max-width auf <kbd>37.5rem</kbd>.", "task": "Setze die Breite von <kbd>.box</kbd> auf <kbd>80%</kbd> und max-width auf <kbd>37.5rem</kbd>.",
"previewHTML": "<div class=\"unit-box\">Ändere meine Größe!</div>", "previewHTML": "<div class=\"box\">Ändere meine Größe!</div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .unit-box { background: #f5f5f5; padding: 1rem; }", "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .box { background: #f5f5f5; padding: 1rem; }",
"sandboxCSS": "", "sandboxCSS": "",
"codePrefix": "/* Setze flexible Größen */\n.unit-box {", "codePrefix": "/* Setze flexible Größen */\n.box {",
"initialCode": "", "initialCode": "",
"codeSuffix": "}", "codeSuffix": "}",
"previewContainer": "preview-area", "previewContainer": "preview-area",
@@ -42,13 +42,13 @@
"id": "units-2", "id": "units-2",
"title": "CSS Custom Properties", "title": "CSS Custom Properties",
"description": "Definiere und verwende Variablen (--custom properties) wieder, um deine Theme-Werte zu zentralisieren.", "description": "Definiere und verwende Variablen (--custom properties) wieder, um deine Theme-Werte zu zentralisieren.",
"task": "Erstelle eine <code>--main-color</code> Variable in :root mit <kbd>#6200ee</kbd> und wende sie als Rahmenfarbe auf <kbd>.var-box</kbd> an.", "task": "Erstelle eine <code>--main-color</code> Variable in :root mit <kbd>#6200ee</kbd> und wende sie als Rahmenfarbe auf <kbd>.themed</kbd> an.",
"previewHTML": "<div class=\"var-box\">Variablen-Box</div>", "previewHTML": "<div class=\"themed\">Variablen-Box</div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .var-box { padding: 1rem; border: 0.125rem solid #ddd; }", "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .themed { padding: 1rem; border: 0.125rem solid #ddd; }",
"sandboxCSS": "", "sandboxCSS": "",
"codePrefix": "/* Definiere und verwende eine CSS-Variable */\n:root {", "codePrefix": "/* Definiere und verwende eine CSS-Variable */\n:root {",
"initialCode": "", "initialCode": "",
"codeSuffix": "}\n.var-box { }", "codeSuffix": "}\n.themed { }",
"previewContainer": "preview-area", "previewContainer": "preview-area",
"validations": [ "validations": [
{ {
@@ -75,11 +75,11 @@
"id": "units-3", "id": "units-3",
"title": "Einheiten-Berechnungen (calc)", "title": "Einheiten-Berechnungen (calc)",
"description": "Verwende die <code>calc()</code> Funktion, um verschiedene Einheiten in einem Ausdruck zu kombinieren.", "description": "Verwende die <code>calc()</code> Funktion, um verschiedene Einheiten in einem Ausdruck zu kombinieren.",
"task": "Setze die Breite von <kbd>.calc-box</kbd> auf <kbd>calc(100% - 2rem)</kbd> und min-height auf <kbd>calc(10vh + 1rem)</kbd>.", "task": "Setze die Breite von <kbd>.sized</kbd> auf <kbd>calc(100% - 2rem)</kbd> und min-height auf <kbd>calc(10vh + 1rem)</kbd>.",
"previewHTML": "<div class=\"calc-box\">Calc Demo</div>", "previewHTML": "<div class=\"sized\">Calc Demo</div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .calc-box { background: #e8f5e9; padding: 1rem; }", "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .sized { background: #e8f5e9; padding: 1rem; }",
"sandboxCSS": "", "sandboxCSS": "",
"codePrefix": "/* Verwende calc für dynamische Größen */\n.calc-box {", "codePrefix": "/* Verwende calc für dynamische Größen */\n.sized {",
"initialCode": "", "initialCode": "",
"codeSuffix": "}", "codeSuffix": "}",
"previewContainer": "preview-area", "previewContainer": "preview-area",
@@ -103,11 +103,11 @@
"id": "units-4", "id": "units-4",
"title": "Viewport & Responsive Einheiten", "title": "Viewport & Responsive Einheiten",
"description": "Steuere Layouts relativ zur Viewport-Größe mit vw, vh und vmin/vmax Einheiten.", "description": "Steuere Layouts relativ zur Viewport-Größe mit vw, vh und vmin/vmax Einheiten.",
"task": "Gib <kbd>.viewport-box</kbd> eine Breite von <kbd>50vw</kbd> und Höhe von <kbd>20vh</kbd>.", "task": "Gib <kbd>.view</kbd> eine Breite von <kbd>50vw</kbd> und Höhe von <kbd>20vh</kbd>.",
"previewHTML": "<div class=\"viewport-box\">Viewport-Box</div>", "previewHTML": "<div class=\"view\">Viewport-Box</div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .viewport-box { background: #ffe0b2; }", "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .view { background: #ffe0b2; }",
"sandboxCSS": "", "sandboxCSS": "",
"codePrefix": "/* Verwende Viewport-Einheiten */\n.viewport-box {", "codePrefix": "/* Verwende Viewport-Einheiten */\n.view {",
"initialCode": "", "initialCode": "",
"codeSuffix": "}", "codeSuffix": "}",
"previewContainer": "preview-area", "previewContainer": "preview-area",

24
lessons/de/08-responsive.json
View File

@@ -9,9 +9,9 @@
"id": "responsive-1", "id": "responsive-1",
"title": "Einführung in Media Queries", "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.", "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 <kbd>.responsive-box</kbd> auf <kbd>lightcoral</kbd>.", "task": "Schreibe eine Media Query, die gilt, wenn der Viewport maximal 600px breit ist, und ändere den Hintergrund von <kbd>.panel</kbd> auf <kbd>lightcoral</kbd>.",
"previewHTML": "<div class=\"responsive-box\">Ändere die Fenstergröße</div>", "previewHTML": "<div class=\"panel\">Ändere die Fenstergröße</div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .responsive-box { padding: 1rem; background: lightblue; }", "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .panel { padding: 1rem; background: lightblue; }",
"sandboxCSS": "", "sandboxCSS": "",
"codePrefix": "/* Füge deine Media Query unten ein */\n", "codePrefix": "/* Füge deine Media Query unten ein */\n",
"initialCode": "", "initialCode": "",
@@ -26,8 +26,8 @@
}, },
{ {
"type": "contains", "type": "contains",
"value": ".responsive-box", "value": ".panel",
"message": "Adressiere <kbd>.responsive-box</kbd> innerhalb der Media Query", "message": "Adressiere <kbd>.panel</kbd> innerhalb der Media Query",
"options": { "caseSensitive": false } "options": { "caseSensitive": false }
}, },
{ {
@@ -48,11 +48,11 @@
"id": "responsive-2", "id": "responsive-2",
"title": "Flüssige Typografie", "title": "Flüssige Typografie",
"description": "Verwende relative Einheiten wie vw, damit Schriftgrößen mit der Viewport-Breite skalieren.", "description": "Verwende relative Einheiten wie vw, damit Schriftgrößen mit der Viewport-Breite skalieren.",
"task": "Setze die font-size von <kbd>.fluid-text</kbd> auf <kbd>5vw</kbd>, damit sie sich mit dem Viewport ändert.", "task": "Setze die font-size von <kbd>.text</kbd> auf <kbd>5vw</kbd>, damit sie sich mit dem Viewport ändert.",
"previewHTML": "<p class=\"fluid-text\">Flüssige Typografie</p>", "previewHTML": "<p class=\"text\">Flüssige Typografie</p>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; }", "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; }",
"sandboxCSS": "", "sandboxCSS": "",
"codePrefix": "/* Wende flüssige Schriftgröße an */\n.fluid-text {", "codePrefix": "/* Wende flüssige Schriftgröße an */\n.text {",
"initialCode": "", "initialCode": "",
"codeSuffix": "}", "codeSuffix": "}",
"previewContainer": "preview-area", "previewContainer": "preview-area",
@@ -76,11 +76,11 @@
"id": "responsive-3", "id": "responsive-3",
"title": "Flexible Raster", "title": "Flexible Raster",
"description": "Kombiniere CSS Grid mit auto-fit oder auto-fill für responsive Spaltenlayouts.", "description": "Kombiniere CSS Grid mit auto-fit oder auto-fill für responsive Spaltenlayouts.",
"task": "Definiere <kbd>.grid-responsive</kbd> mit <kbd>grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))</kbd> und einem gap von <kbd>1rem</kbd>.", "task": "Definiere <kbd>.cards</kbd> mit <kbd>grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))</kbd> und einem gap von <kbd>1rem</kbd>.",
"previewHTML": "<div class=\"grid-responsive\"><div>1</div><div>2</div><div>3</div><div>4</div></div>", "previewHTML": "<div class=\"cards\"><div>1</div><div>2</div><div>3</div><div>4</div></div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .grid-responsive > div { background: #d1c4e9; padding: 1rem; }", "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .cards > div { background: #d1c4e9; padding: 1rem; }",
"sandboxCSS": "", "sandboxCSS": "",
"codePrefix": "/* Erstelle ein responsives Raster */\n.grid-responsive {", "codePrefix": "/* Erstelle ein responsives Raster */\n.cards {",
"initialCode": "", "initialCode": "",
"codeSuffix": "}", "codeSuffix": "}",
"previewContainer": "preview-area", "previewContainer": "preview-area",

8
src/index.html
View File

@@ -64,16 +64,16 @@
<!-- Right Panel: Preview + Navigation --> <!-- Right Panel: Preview + Navigation -->
<div class="right-panel"> <div class="right-panel">
<div class="preview-section"> <div class="preview-section">
<div class="preview-header">
<span class="preview-label" data-i18n="yourOutput">Your Output</span>
<button id="show-expected-btn" class="btn btn-small" data-i18n="showExpected">Show Expected</button>
</div>
<div class="preview-wrapper"> <div class="preview-wrapper">
<div class="preview-frame" id="preview-area"></div> <div class="preview-frame" id="preview-area"></div>
<div class="expected-overlay" id="expected-overlay"> <div class="expected-overlay" id="expected-overlay">
<div class="expected-frame" id="preview-expected"></div> <div class="expected-frame" id="preview-expected"></div>
</div> </div>
</div> </div>
<div class="preview-header">
<span class="preview-label" data-i18n="yourOutput">Your Output</span>
<button id="show-expected-btn" class="btn btn-small" data-i18n="showExpected">Show Expected</button>
</div>
</div> </div>
<div class="game-controls"> <div class="game-controls">
<button id="prev-btn" class="btn" data-i18n="previous">Previous</button> <button id="prev-btn" class="btn" data-i18n="previous">Previous</button>