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

fix(lessons): use code tags for quoted text, add syntax examples
Some checks failed
Deploy static content to Pages / deploy (push) Has been cancelled
Details

Browse Source 
- Fixed validation in welcome lesson (Hello World instead of Hello)
- Replaced 'quoted text' with <code>quoted text</code> in all task descriptions
- Added syntax examples to Transitions and Keyframes lessons
- Updated all language versions (en, de, pl, es, ar, uk)
This commit is contained in:
Michael Czechowski
2026-01-06 15:50:11 +01:00
parent 8e892254f8
commit 0bc6e93390
66 changed files with 1279 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
lessons/de/25-html-datalist.json
View File

@@ -10,7 +10,7 @@
"id": "datalist-basic",
"title": "Eingabe mit Vorschlägen",
"description": "Das <kbd>&lt;datalist&gt;</kbd>-Element bietet Autovervollständigungs-Vorschläge für Eingabefelder. Verbinde es mit dem <kbd>list</kbd>-Attribut am Input, das zur <kbd>id</kbd> der Datalist passt.<br><br>Benutzer können trotzdem frei tippen - Vorschläge sind nur Hilfen!",
"task": "Erstelle eine Browser-Auswahl:<br>1. Füge ein <kbd>&lt;label&gt;</kbd> mit 'Browser:' hinzu<br>2. Füge ein <kbd>&lt;input&gt;</kbd> mit <kbd>list=\"browsers\"</kbd> hinzu<br>3. Füge eine <kbd>&lt;datalist id=\"browsers\"&gt;</kbd> mit Optionen für Chrome, Firefox und Safari hinzu",
"task": "Erstelle eine Browser-Auswahl:<br>1. Füge ein <kbd>&lt;label&gt;</kbd> mit <code>Browser:</code> hinzu<br>2. Füge ein <kbd>&lt;input&gt;</kbd> mit <kbd>list=\"browsers\"</kbd> hinzu<br>3. Füge eine <kbd>&lt;datalist id=\"browsers\"&gt;</kbd> mit Optionen für Chrome, Firefox und Safari hinzu",
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } label { display: block; margin-bottom: 8px; font-weight: 500; } input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px; } input:focus { outline: 2px solid #1976d2; border-color: transparent; }",
"sandboxCSS": "",
@@ -44,7 +44,7 @@
"id": "datalist-countries",
"title": "Länderauswahl",
"description": "Datalists funktionieren super für lange Listen wie Länder. Benutzer können tippen, um Vorschläge sofort zu filtern.<br><br>Das <kbd>value</kbd>-Attribut ist das, was eingegeben wird, und du kannst Anzeigetext dahinter hinzufügen.",
"task": "Erstelle eine Länder-Eingabe:<br>1. Füge ein <kbd>&lt;label&gt;</kbd> mit 'Land:' hinzu<br>2. Füge ein <kbd>&lt;input&gt;</kbd> mit <kbd>list=\"countries\"</kbd> hinzu<br>3. Füge eine <kbd>&lt;datalist id=\"countries\"&gt;</kbd> mit mindestens 4 Länder-Optionen hinzu",
"task": "Erstelle eine Länder-Eingabe:<br>1. Füge ein <kbd>&lt;label&gt;</kbd> mit <code>Land:</code> hinzu<br>2. Füge ein <kbd>&lt;input&gt;</kbd> mit <kbd>list=\"countries\"</kbd> hinzu<br>3. Füge eine <kbd>&lt;datalist id=\"countries\"&gt;</kbd> mit mindestens 4 Länder-Optionen hinzu",
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; padding: 30px; background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%); min-height: 100vh; margin: 0; box-sizing: border-box; } label { display: block; margin-bottom: 10px; font-weight: 600; color: #00695c; } input { width: 100%; padding: 12px 15px; border: 2px solid #26a69a; border-radius: 8px; font-size: 16px; background: white; } input:focus { outline: none; border-color: #00695c; box-shadow: 0 0 0 3px rgba(38,166,154,0.2); }",
"sandboxCSS": "",