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

fix: add kbd tags to lesson messages and reorder task/description

Browse Source 
- Replace single quotes with <kbd> tags in validation messages
- German and English lessons updated for consistent formatting
- Move task instruction before description in UI (index.html)
This commit is contained in:
Michael Czechowski
2025-12-30 18:08:11 +01:00
parent b4d2f52d50
commit b269472367
19 changed files with 263 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lessons/de/00-basic-selectors.json
View File

@@ -354,7 +354,7 @@
{
"type": "regex",
"value": "^p#special\\s*{",
"message": "Verwende <kbd>p#special</kbd>, um Absätze mit ID 'special' anzuvisieren",
"message": "Verwende <kbd>p#special</kbd>, um Absätze mit ID <kbd>special</kbd> anzuvisieren",
"options": {
"caseSensitive": true
}

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

@@ -21,7 +21,7 @@
{
"type": "property_value",
"value": { "property": "padding", "expected": "1rem" },
"message": "Setze padding auf '1rem'"
"message": "Setze <kbd>padding: 1rem</kbd>"
}
]
},
@@ -41,7 +41,7 @@
{
"type": "regex",
"value": "border:\\s*2px\\s+solid\\s+darkslategray",
"message": "Setze border auf '2px solid darkslategray'",
"message": "Setze <kbd>border: 2px solid darkslategray</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -62,7 +62,7 @@
{
"type": "property_value",
"value": { "property": "margin", "expected": "1rem" },
"message": "Setze margin auf '1rem'"
"message": "Setze <kbd>margin: 1rem</kbd>"
}
]
},
@@ -82,7 +82,7 @@
{
"type": "property_value",
"value": { "property": "box-sizing", "expected": "border-box" },
"message": "Setze box-sizing auf 'border-box'"
"message": "Setze <kbd>box-sizing: border-box</kbd>"
}
]
},
@@ -102,7 +102,7 @@
{
"type": "property_value",
"value": { "property": "margin-bottom", "expected": "2rem" },
"message": "Setze margin-bottom auf '2rem'"
"message": "Setze <kbd>margin-bottom: 2rem</kbd>"
}
]
},
@@ -122,7 +122,7 @@
{
"type": "regex",
"value": "margin:\\s*1rem\\s+2rem",
"message": "Setze margin auf '1rem 2rem'",
"message": "Setze <kbd>margin: 1rem 2rem</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -143,7 +143,7 @@
{
"type": "property_value",
"value": { "property": "padding", "expected": "1.5rem" },
"message": "Setze padding auf '1.5rem'"
"message": "Setze <kbd>padding: 1.5rem</kbd>"
}
]
},
@@ -163,7 +163,7 @@
{
"type": "regex",
"value": "border-bottom:\\s*4px\\s+solid\\s+dodgerblue",
"message": "Setze border-bottom auf '4px solid dodgerblue'",
"message": "Setze <kbd>border-bottom: 4px solid dodgerblue</kbd>",
"options": { "caseSensitive": false }
}
]

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

@@ -9,7 +9,7 @@
"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.",
"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; }",
"sandboxCSS": "",
@@ -18,17 +18,31 @@
"codeSuffix": "}",
"previewContainer": "preview-area",
"validations": [
{ "type": "contains", "value": "width", "message": "Verwende die 'width' Eigenschaft", "options": { "caseSensitive": false } },
{ "type": "property_value", "value": { "property": "width", "expected": "80%" }, "message": "Setze width auf '80%'" },
{ "type": "contains", "value": "max-width", "message": "Verwende die 'max-width' Eigenschaft", "options": { "caseSensitive": false } },
{ "type": "property_value", "value": { "property": "max-width", "expected": "37.5rem" }, "message": "Setze max-width auf '37.5rem'" }
{
"type": "contains",
"value": "width",
"message": "Verwende die <kbd>width</kbd> Eigenschaft",
"options": { "caseSensitive": false }
},
{ "type": "property_value", "value": { "property": "width", "expected": "80%" }, "message": "Setze width auf <kbd>80%</kbd>" },
{
"type": "contains",
"value": "max-width",
"message": "Verwende die <kbd>max-width</kbd> Eigenschaft",
"options": { "caseSensitive": false }
},
{
"type": "property_value",
"value": { "property": "max-width", "expected": "37.5rem" },
"message": "Setze max-width auf <kbd>37.5rem</kbd>"
}
]
},
{
"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 #6200ee und wende sie als Rahmenfarbe auf '.var-box' an.",
"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; }",
"sandboxCSS": "",
@@ -37,8 +51,18 @@
"codeSuffix": "}\n.var-box { }",
"previewContainer": "preview-area",
"validations": [
{ "type": "contains", "value": "--main-color", "message": "Definiere '--main-color' in :root", "options": { "caseSensitive": false } },
{ "type": "contains", "value": "var(--main-color)", "message": "Verwende var(--main-color)", "options": { "caseSensitive": false } },
{
"type": "contains",
"value": "--main-color",
"message": "Definiere <kbd>--main-color</kbd> in :root",
"options": { "caseSensitive": false }
},
{
"type": "contains",
"value": "var(--main-color)",
"message": "Verwende <kbd>var(--main-color)</kbd>",
"options": { "caseSensitive": false }
},
{
"type": "property_value",
"value": { "property": "border", "expected": "var(--main-color)" },
@@ -51,7 +75,7 @@
"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 '.calc-box' auf calc(100% - 2rem) und min-height auf calc(10vh + 1rem).",
"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; }",
"sandboxCSS": "",
@@ -60,7 +84,7 @@
"codeSuffix": "}",
"previewContainer": "preview-area",
"validations": [
{ "type": "contains", "value": "calc", "message": "Verwende die 'calc()' Funktion", "options": { "caseSensitive": false } },
{ "type": "contains", "value": "calc", "message": "Verwende die <kbd>calc()</kbd> Funktion", "options": { "caseSensitive": false } },
{
"type": "regex",
"value": "width:\\s*calc\\(100% - 2rem\\)",
@@ -79,7 +103,7 @@
"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.",
"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; }",
"sandboxCSS": "",
@@ -88,10 +112,10 @@
"codeSuffix": "}",
"previewContainer": "preview-area",
"validations": [
{ "type": "contains", "value": "vw", "message": "Verwende 'vw' Einheit", "options": { "caseSensitive": false } },
{ "type": "contains", "value": "vh", "message": "Verwende 'vh' Einheit", "options": { "caseSensitive": false } },
{ "type": "property_value", "value": { "property": "width", "expected": "50vw" }, "message": "Setze width auf '50vw'" },
{ "type": "property_value", "value": { "property": "height", "expected": "20vh" }, "message": "Setze height auf '20vh'" }
{ "type": "contains", "value": "vw", "message": "Verwende <kbd>vw</kbd> Einheit", "options": { "caseSensitive": false } },
{ "type": "contains", "value": "vh", "message": "Verwende <kbd>vh</kbd> Einheit", "options": { "caseSensitive": false } },
{ "type": "property_value", "value": { "property": "width", "expected": "50vw" }, "message": "Setze width auf <kbd>50vw</kbd>" },
{ "type": "property_value", "value": { "property": "height", "expected": "20vh" }, "message": "Setze height auf <kbd>20vh</kbd>" }
]
}
]

42
lessons/de/06-transitions-animations.json
View File

@@ -9,7 +9,7 @@
"id": "transitions-1",
"title": "Einfache Transitions",
"description": "Lerne, wie du <code>transition</code> auf Eigenschaften anwendest für sanfte Änderungen bei Zustandswechseln.",
"task": "Füge eine Hover-Transition auf einen Button hinzu, sodass seine Hintergrundfarbe über 0.3s überblendet.",
"task": "Füge <kbd>transition: background-color 0.3s</kbd> zu <kbd>.btn</kbd> hinzu, damit die Farbe beim Hover sanft überblendet.",
"previewHTML": "<button class=\"btn\">Hover mich</button>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .btn { background: #6200ee; color: white; padding: 0.5rem 1rem; border: none; } .btn:hover { background: #3700b3; }",
"sandboxCSS": "",
@@ -18,11 +18,11 @@
"codeSuffix": "}",
"previewContainer": "preview-area",
"validations": [
{ "type": "contains", "value": "transition", "message": "Verwende die 'transition' Eigenschaft", "options": { "caseSensitive": false } },
{ "type": "contains", "value": "transition", "message": "Verwende die <kbd>transition</kbd> Eigenschaft", "options": { "caseSensitive": false } },
{
"type": "regex",
"value": "transition:\\s*background-color\\s*0\\.3s",
"message": "Transition background-color über 0.3s",
"message": "Setze <kbd>transition: background-color 0.3s</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -30,8 +30,8 @@
{
"id": "transitions-2",
"title": "Transition Timing-Funktionen",
"description": "Erkunde Easing-Funktionen wie ease, linear, ease-in, ease-out, um das Animationstempo zu steuern.",
"task": "Ändere den Button, um 'ease-in-out' Timing für seine Transition zu verwenden.",
"description": "Erkunde Easing-Funktionen wie <kbd>ease</kbd>, <kbd>linear</kbd>, <kbd>ease-in</kbd>, <kbd>ease-out</kbd>, um das Animationstempo zu steuern.",
"task": "Setze <kbd>transition-timing-function</kbd> auf <kbd>ease-in-out</kbd> bei <kbd>.btn</kbd>.",
"previewHTML": "<button class=\"btn\">Timing</button>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .btn { background: #6200ee; color: white; padding: 0.5rem 1rem; border: none; transition: background-color 0.3s; } .btn:hover { background: #03dac6; }",
"sandboxCSS": "",
@@ -43,13 +43,13 @@
{
"type": "contains",
"value": "transition-timing-function",
"message": "Verwende 'transition-timing-function'",
"message": "Verwende <kbd>transition-timing-function</kbd>",
"options": { "caseSensitive": false }
},
{
"type": "property_value",
"value": { "property": "transition-timing-function", "expected": "ease-in-out" },
"message": "Setze Timing auf 'ease-in-out'"
"message": "Setze <kbd>transition-timing-function: ease-in-out</kbd>"
}
]
},
@@ -57,7 +57,7 @@
"id": "transitions-3",
"title": "Keyframe-Animationen Grundlagen",
"description": "Erstelle benannte Animationen mit <code>@keyframes</code> und wende sie mit der <code>animation</code> Kurzschreibweise an.",
"task": "Definiere ein Keyframe namens 'bounce', das ein Element bei 50% um 20px nach oben bewegt, und wende es auf '.ball' über 1s infinite an.",
"task": "Definiere bei <kbd>50%</kbd> ein <kbd>transform: translateY(-20px)</kbd> und wende <kbd>animation: bounce 1s infinite</kbd> auf <kbd>.ball</kbd> an.",
"previewHTML": "<div class=\"ball\"></div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .ball { width: 50px; height: 50px; background: #ff0266; border-radius: 50%; margin: 2rem auto; }",
"sandboxCSS": "",
@@ -66,18 +66,18 @@
"codeSuffix": "}\n.ball { }",
"previewContainer": "preview-area",
"validations": [
{ "type": "contains", "value": "@keyframes bounce", "message": "Definiere '@keyframes bounce'", "options": { "caseSensitive": false } },
{ "type": "contains", "value": "@keyframes bounce", "message": "Definiere <kbd>@keyframes bounce</kbd>", "options": { "caseSensitive": false } },
{
"type": "regex",
"value": "50%.*transform: translateY\\(-20px\\)",
"message": "Bei 50%, bewege um 20px nach oben",
"message": "Bei <kbd>50%</kbd>, setze <kbd>transform: translateY(-20px)</kbd>",
"options": { "caseSensitive": false }
},
{ "type": "contains", "value": "animation", "message": "Verwende 'animation' Eigenschaft auf .ball", "options": { "caseSensitive": false } },
{ "type": "contains", "value": "animation", "message": "Verwende <kbd>animation</kbd> Eigenschaft auf <kbd>.ball</kbd>", "options": { "caseSensitive": false } },
{
"type": "regex",
"value": "animation:.*bounce.*1s.*infinite",
"message": "Wende 'bounce 1s infinite' an",
"message": "Wende <kbd>animation: bounce 1s infinite</kbd> an",
"options": { "caseSensitive": false }
}
]
@@ -85,8 +85,8 @@
{
"id": "transitions-4",
"title": "Animations-Eigenschaften im Detail",
"description": "Verfeinere Animationen mit delay, iteration-count, direction und fill-mode.",
"task": "Animiere '.box' mit einem 'fade' Keyframe über 2s, Verzögerung 1s, zweimalige Ausführung und bleibe danach sichtbar.",
"description": "Verfeinere Animationen mit <kbd>animation-delay</kbd>, <kbd>animation-iteration-count</kbd>, <kbd>animation-direction</kbd> und <kbd>animation-fill-mode</kbd>.",
"task": "Wende die <kbd>fade</kbd> Animation auf <kbd>.box</kbd> an mit <kbd>animation-name: fade</kbd>, <kbd>animation-duration: 2s</kbd>, <kbd>animation-delay: 1s</kbd>, <kbd>animation-iteration-count: 2</kbd> und <kbd>animation-fill-mode: forwards</kbd>.",
"previewHTML": "<div class=\"box\">Fade Demo</div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .box { width: 100px; height: 100px; background: #4caf50; margin: 2rem auto; }",
"sandboxCSS": "",
@@ -98,32 +98,32 @@
{
"type": "contains",
"value": "animation-delay",
"message": "Verwende 'animation-delay' Eigenschaft",
"message": "Verwende <kbd>animation-delay</kbd>",
"options": { "caseSensitive": false }
},
{
"type": "contains",
"value": "animation-iteration-count",
"message": "Verwende 'animation-iteration-count' Eigenschaft",
"message": "Verwende <kbd>animation-iteration-count</kbd>",
"options": { "caseSensitive": false }
},
{
"type": "contains",
"value": "animation-fill-mode",
"message": "Verwende 'animation-fill-mode' Eigenschaft",
"message": "Verwende <kbd>animation-fill-mode</kbd>",
"options": { "caseSensitive": false }
},
{ "type": "property_value", "value": { "property": "animation-duration", "expected": "2s" }, "message": "Duration sollte 2s sein" },
{ "type": "property_value", "value": { "property": "animation-delay", "expected": "1s" }, "message": "Delay sollte 1s sein" },
{ "type": "property_value", "value": { "property": "animation-duration", "expected": "2s" }, "message": "Setze <kbd>animation-duration: 2s</kbd>" },
{ "type": "property_value", "value": { "property": "animation-delay", "expected": "1s" }, "message": "Setze <kbd>animation-delay: 1s</kbd>" },
{
"type": "property_value",
"value": { "property": "animation-iteration-count", "expected": "2" },
"message": "Iteration-count sollte 2 sein"
"message": "Setze <kbd>animation-iteration-count: 2</kbd>"
},
{
"type": "property_value",
"value": { "property": "animation-fill-mode", "expected": "forwards" },
"message": "Fill-mode sollte forwards sein"
"message": "Setze <kbd>animation-fill-mode: forwards</kbd>"
}
]
}

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

@@ -9,7 +9,7 @@
"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.",
"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>.",
"previewHTML": "<div class=\"responsive-box\">Ändere die Fenstergröße</div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .responsive-box { padding: 1rem; background: lightblue; }",
"sandboxCSS": "",
@@ -27,14 +27,19 @@
{
"type": "contains",
"value": ".responsive-box",
"message": "Adressiere '.responsive-box' innerhalb der Media Query",
"message": "Adressiere <kbd>.responsive-box</kbd> innerhalb der Media Query",
"options": { "caseSensitive": false }
},
{
"type": "contains",
"value": "background",
"message": "Ändere die <kbd>background</kbd> Eigenschaft",
"options": { "caseSensitive": false }
},
{ "type": "contains", "value": "background", "message": "Ändere die 'background' Eigenschaft", "options": { "caseSensitive": false } },
{
"type": "property_value",
"value": { "property": "background", "expected": "lightcoral" },
"message": "Setze background auf 'lightcoral'",
"message": "Setze background auf <kbd>lightcoral</kbd>",
"options": { "exact": false }
}
]
@@ -43,7 +48,7 @@
"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.",
"task": "Setze die font-size von <kbd>.fluid-text</kbd> auf <kbd>5vw</kbd>, damit sie sich mit dem Viewport ändert.",
"previewHTML": "<p class=\"fluid-text\">Flüssige Typografie</p>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; }",
"sandboxCSS": "",
@@ -52,16 +57,26 @@
"codeSuffix": "}",
"previewContainer": "preview-area",
"validations": [
{ "type": "contains", "value": "font-size", "message": "Verwende die 'font-size' Eigenschaft", "options": { "caseSensitive": false } },
{ "type": "contains", "value": "vw", "message": "Verwende 'vw' Einheit für flüssige Größe", "options": { "caseSensitive": false } },
{ "type": "property_value", "value": { "property": "font-size", "expected": "5vw" }, "message": "Setze font-size auf '5vw'" }
{
"type": "contains",
"value": "font-size",
"message": "Verwende die <kbd>font-size</kbd> Eigenschaft",
"options": { "caseSensitive": false }
},
{
"type": "contains",
"value": "vw",
"message": "Verwende <kbd>vw</kbd> Einheit für flüssige Größe",
"options": { "caseSensitive": false }
},
{ "type": "property_value", "value": { "property": "font-size", "expected": "5vw" }, "message": "Setze font-size auf <kbd>5vw</kbd>" }
]
},
{
"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.",
"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>.",
"previewHTML": "<div class=\"grid-responsive\"><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; }",
"sandboxCSS": "",
@@ -73,23 +88,23 @@
{
"type": "contains",
"value": "grid-template-columns",
"message": "Definiere 'grid-template-columns'",
"message": "Definiere <kbd>grid-template-columns</kbd>",
"options": { "caseSensitive": false }
},
{
"type": "regex",
"value": "repeat\\(auto-fit,\\s*minmax\\(200px,\\s*1fr\\)\\)",
"message": "Verwende repeat(auto-fit, minmax(200px, 1fr))",
"message": "Verwende <kbd>repeat(auto-fit, minmax(200px, 1fr))</kbd>",
"options": { "caseSensitive": false }
},
{ "type": "contains", "value": "gap", "message": "Verwende die 'gap' Eigenschaft", "options": { "caseSensitive": false } }
{ "type": "contains", "value": "gap", "message": "Verwende die <kbd>gap</kbd> Eigenschaft", "options": { "caseSensitive": false } }
]
},
{
"id": "responsive-4",
"title": "Mobile-First Media Queries",
"description": "Verfolge einen Mobile-First-Ansatz: Schreibe Basis-Stile für kleine Bildschirme und erweitere für größere Viewports.",
"task": "Schreibe eine Media Query für min-width 768px, die die Breite von '.sidebar' auf 250px setzt.",
"task": "Schreibe eine Media Query für min-width 768px, die die Breite von <kbd>.sidebar</kbd> auf <kbd>250px</kbd> setzt.",
"previewHTML": "<aside class=\"sidebar\">Seitenleiste</aside>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .sidebar { background: #c8e6c9; padding: 1rem; }",
"sandboxCSS": "",
@@ -104,11 +119,16 @@
"message": "Verwende eine Media Query für min-width: 768px",
"options": { "caseSensitive": false }
},
{ "type": "contains", "value": ".sidebar", "message": "Adressiere '.sidebar' in der Media Query", "options": { "caseSensitive": false } },
{
"type": "contains",
"value": ".sidebar",
"message": "Adressiere <kbd>.sidebar</kbd> in der Media Query",
"options": { "caseSensitive": false }
},
{
"type": "property_value",
"value": { "property": "width", "expected": "250px" },
"message": "Setze width auf '250px'",
"message": "Setze width auf <kbd>250px</kbd>",
"options": { "exact": false }
}
]

2
lessons/de/10-tailwind-basics.json
View File

@@ -20,7 +20,7 @@
{
"type": "contains_class",
"value": "bg-blue-500",
"message": "Füge die 'bg-blue-500'-Klasse für einen blauen Hintergrund hinzu."
"message": "Füge die <kbd>bg-blue-500</kbd>-Klasse für einen blauen Hintergrund hinzu."
}
]
},

4
lessons/de/22-html-forms-validation.json
View File

@@ -79,7 +79,7 @@
{
"type": "attribute_value",
"value": { "selector": "#email", "attr": "type", "value": "email" },
"message": "Setze den Eingabetyp für E-Mail auf 'email'"
"message": "Setze den Eingabetyp für E-Mail auf <kbd>email</kbd>"
},
{
"type": "attribute_value",
@@ -89,7 +89,7 @@
{
"type": "attribute_value",
"value": { "selector": "#password", "attr": "type", "value": "password" },
"message": "Setze den Eingabetyp für Passwort auf 'password'"
"message": "Setze den Eingabetyp für Passwort auf <kbd>password</kbd>"
},
{
"type": "attribute_value",

14
lessons/de/flexbox.json
View File

@@ -21,7 +21,7 @@
{
"type": "property_value",
"value": { "property": "display", "expected": "flex" },
"message": "Setze display auf 'flex'"
"message": "Setze display auf <kbd>flex</kbd>"
}
]
},
@@ -41,12 +41,12 @@
{
"type": "property_value",
"value": { "property": "flex-direction", "expected": "column" },
"message": "Setze flex-direction auf 'column'"
"message": "Setze flex-direction auf <kbd>column</kbd>"
},
{
"type": "property_value",
"value": { "property": "flex-wrap", "expected": "wrap" },
"message": "Setze flex-wrap auf 'wrap'"
"message": "Setze flex-wrap auf <kbd>wrap</kbd>"
}
]
},
@@ -66,7 +66,7 @@
{
"type": "property_value",
"value": { "property": "justify-content", "expected": "space-between" },
"message": "Setze justify-content auf 'space-between'"
"message": "Setze justify-content auf <kbd>space-between</kbd>"
}
]
},
@@ -86,7 +86,7 @@
{
"type": "property_value",
"value": { "property": "align-items", "expected": "center" },
"message": "Setze align-items auf 'center'"
"message": "Setze align-items auf <kbd>center</kbd>"
}
]
},
@@ -106,7 +106,7 @@
{
"type": "property_value",
"value": { "property": "flex", "expected": "2" },
"message": "Setze flex auf '2'"
"message": "Setze flex auf <kbd>2</kbd>"
}
]
},
@@ -126,7 +126,7 @@
{
"type": "property_value",
"value": { "property": "align-self", "expected": "flex-start" },
"message": "Setze align-self auf 'flex-start'"
"message": "Setze align-self auf <kbd>flex-start</kbd>"
}
]
}