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

6
lessons/de/28-html-forms-fieldset.json
View File

@@ -10,7 +10,7 @@
"id": "fieldset-basic",
"title": "Gruppieren mit Fieldset",
"description": "Das <kbd>&lt;fieldset&gt;</kbd>-Element gruppiert zusammengehörige Formularfelder. Füge ein <kbd>&lt;legend&gt;</kbd> als erstes Kind hinzu, um der Gruppe einen Titel zu geben.<br><br>Das verbessert die Zugänglichkeit und visuelle Organisation komplexer Formulare.",
"task": "Erstelle ein Formular mit einem Fieldset:<br>1. Ein <kbd>&lt;form&gt;</kbd>-Element<br>2. Ein <kbd>&lt;fieldset&gt;</kbd> darin<br>3. Ein <kbd>&lt;legend&gt;</kbd> mit 'Persönliche Daten'<br>4. Zwei beschriftete Eingabefelder für Name und E-Mail",
"task": "Erstelle ein Formular mit einem Fieldset:<br>1. Ein <kbd>&lt;form&gt;</kbd>-Element<br>2. Ein <kbd>&lt;fieldset&gt;</kbd> darin<br>3. Ein <kbd>&lt;legend&gt;</kbd> mit <code>Persönliche Daten</code><br>4. Zwei beschriftete Eingabefelder für Name und E-Mail",
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f0f4f8; } form { max-width: 400px; } fieldset { border: 2px solid #3498db; border-radius: 10px; padding: 20px; background: white; } legend { color: #3498db; font-weight: 600; padding: 0 10px; font-size: 1.1rem; } label { display: block; margin: 15px 0 5px; color: #333; font-weight: 500; } input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; box-sizing: border-box; } input:focus { outline: 2px solid #3498db; border-color: transparent; }",
"sandboxCSS": "",
@@ -49,7 +49,7 @@
"id": "fieldset-textarea",
"title": "Textarea hinzufügen",
"description": "Das <kbd>&lt;textarea&gt;</kbd>-Element erstellt ein mehrzeiliges Textfeld, perfekt für längere Inhalte wie Nachrichten oder Beschreibungen.<br><br>Verwende <kbd>rows</kbd> und <kbd>cols</kbd> Attribute, um die Standardgröße festzulegen.",
"task": "Erstelle ein Kontaktformular:<br>1. Ein <kbd>&lt;fieldset&gt;</kbd> mit <kbd>&lt;legend&gt;</kbd> 'Kontaktiere uns'<br>2. Ein beschriftetes <kbd>&lt;input&gt;</kbd> für E-Mail<br>3. Eine beschriftete <kbd>&lt;textarea&gt;</kbd> für die Nachricht<br>4. Einen Absende-<kbd>&lt;button&gt;</kbd>",
"task": "Erstelle ein Kontaktformular:<br>1. Ein <kbd>&lt;fieldset&gt;</kbd> mit <kbd>&lt;legend&gt;</kbd> <code>Kontaktiere uns</code><br>2. Ein beschriftetes <kbd>&lt;input&gt;</kbd> für E-Mail<br>3. Eine beschriftete <kbd>&lt;textarea&gt;</kbd> für die Nachricht<br>4. Einen Absende-<kbd>&lt;button&gt;</kbd>",
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; margin: 0; box-sizing: border-box; } form { max-width: 450px; margin: 0 auto; } fieldset { border: none; border-radius: 15px; padding: 30px; background: white; box-shadow: 0 10px 40px rgba(0,0,0,0.2); } legend { color: #667eea; font-weight: 700; padding: 0; font-size: 1.5rem; margin-bottom: 10px; } label { display: block; margin: 20px 0 8px; color: #333; font-weight: 500; } input, textarea { width: 100%; padding: 12px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px; box-sizing: border-box; font-family: inherit; } input:focus, textarea:focus { outline: none; border-color: #667eea; } textarea { resize: vertical; min-height: 100px; } button { margin-top: 20px; width: 100%; padding: 14px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; } button:hover { opacity: 0.9; }",
"sandboxCSS": "",
@@ -88,7 +88,7 @@
"id": "fieldset-multiple",
"title": "Mehrere Fieldsets",
"description": "Komplexe Formulare können mehrere <kbd>&lt;fieldset&gt;</kbd>-Elemente verwenden, um verschiedene Abschnitte zu organisieren.<br><br>Das verbessert die Benutzerfreundlichkeit bei langen Formularen wie Registrierung oder Checkout.",
"task": "Erstelle ein Registrierungsformular mit 2 Fieldsets:<br>1. 'Kontodaten' mit Benutzername und Passwort<br>2. 'Einstellungen' mit einer Textarea für Bio<br>3. Einen Absende-Button außerhalb der Fieldsets",
"task": "Erstelle ein Registrierungsformular mit 2 Fieldsets:<br>1. <code>Kontodaten</code> mit Benutzername und Passwort<br>2. <code>Einstellungen</code> mit einer Textarea für Bio<br>3. Einen Absende-Button außerhalb der Fieldsets",
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #fafafa; } form { max-width: 500px; } fieldset { border: 1px solid #ddd; border-radius: 10px; padding: 20px; margin-bottom: 20px; background: white; } legend { color: #2c3e50; font-weight: 600; padding: 0 10px; } label { display: block; margin: 15px 0 5px; color: #555; } input, textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; box-sizing: border-box; font-family: inherit; } input:focus, textarea:focus { outline: 2px solid #3498db; border-color: transparent; } textarea { resize: vertical; min-height: 80px; } button { width: 100%; padding: 14px; background: #2c3e50; color: white; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; } button:hover { background: #34495e; }",
"sandboxCSS": "",