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

refactor: shorten compound class names to single words
Some checks failed
Deploy static content to Pages / deploy (push) Has been cancelled
Details

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 5adff0861d
commit 496ff11252
7 changed files with 102 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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 <kbd>.unit-box</kbd> auf <kbd>80%</kbd> und max-width auf <kbd>37.5rem</kbd>.",
"previewHTML": "<div class=\"unit-box\">Ändere meine Größe!</div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .unit-box { background: #f5f5f5; padding: 1rem; }",
"task": "Setze die Breite von <kbd>.box</kbd> auf <kbd>80%</kbd> und max-width auf <kbd>37.5rem</kbd>.",
"previewHTML": "<div class=\"box\">Ändere meine Größe!</div>",
"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 <code>--main-color</code> Variable in :root mit <kbd>#6200ee</kbd> und wende sie als Rahmenfarbe auf <kbd>.var-box</kbd> an.",
"previewHTML": "<div class=\"var-box\">Variablen-Box</div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .var-box { padding: 1rem; border: 0.125rem solid #ddd; }",
"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=\"themed\">Variablen-Box</div>",
"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 <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>.",
"previewHTML": "<div class=\"calc-box\">Calc Demo</div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .calc-box { background: #e8f5e9; padding: 1rem; }",
"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=\"sized\">Calc Demo</div>",
"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 <kbd>.viewport-box</kbd> eine Breite von <kbd>50vw</kbd> und Höhe von <kbd>20vh</kbd>.",
"previewHTML": "<div class=\"viewport-box\">Viewport-Box</div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .viewport-box { background: #ffe0b2; }",
"task": "Gib <kbd>.view</kbd> eine Breite von <kbd>50vw</kbd> und Höhe von <kbd>20vh</kbd>.",
"previewHTML": "<div class=\"view\">Viewport-Box</div>",
"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",