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/27-html-dialog.json
View File

@@ -10,7 +10,7 @@
"id": "dialog-basic",
"title": "Dialog öffnen",
"description": "Das <kbd>&lt;dialog&gt;</kbd>-Element erstellt ein natives Modal. Füge das <kbd>open</kbd>-Attribut hinzu, um es anzuzeigen.<br><br>Verwende <kbd>&lt;form method=\"dialog\"&gt;</kbd> darin, um es beim Absenden des Formulars zu schließen - kein JavaScript nötig!",
"task": "Erstelle einen Dialog mit:<br>1. Dem <kbd>open</kbd>-Attribut, um ihn anzuzeigen<br>2. Einem <kbd>&lt;h2&gt;</kbd> mit 'Willkommen!'<br>3. Einem <kbd>&lt;p&gt;</kbd> mit einer Begrüßungsnachricht<br>4. Einem <kbd>&lt;form method=\"dialog\"&gt;</kbd> mit einem Schließen-Button",
"task": "Erstelle einen Dialog mit:<br>1. Dem <kbd>open</kbd>-Attribut, um ihn anzuzeigen<br>2. Einem <kbd>&lt;h2&gt;</kbd> mit <code>Willkommen!</code><br>3. Einem <kbd>&lt;p&gt;</kbd> mit einer Begrüßungsnachricht<br>4. Einem <kbd>&lt;form method=\"dialog\"&gt;</kbd> mit einem Schließen-Button",
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; min-height: 200px; background: #f5f5f5; } dialog { border: none; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); padding: 25px; max-width: 400px; } dialog::backdrop { background: rgba(0,0,0,0.5); } dialog h2 { margin: 0 0 15px 0; color: #1976d2; } dialog p { color: #666; margin: 0 0 20px 0; } dialog button { background: #1976d2; color: white; border: none; padding: 10px 25px; border-radius: 6px; cursor: pointer; font-size: 16px; } dialog button:hover { background: #1565c0; }",
"sandboxCSS": "",
@@ -49,7 +49,7 @@
"id": "dialog-form",
"title": "Dialog mit Formular",
"description": "Dialoge können vollständige Formulare enthalten. Das <kbd>method=\"dialog\"</kbd> lässt das Formular den Dialog beim Absenden schließen, anstatt Daten zu senden.<br><br>Dieses Muster ist perfekt für Bestätigungsdialoge, schnelle Eingaben oder Einstellungspanels.",
"task": "Erstelle einen Bestätigungsdialog:<br>1. Füge <kbd>open</kbd> hinzu, um ihn anzuzeigen<br>2. Ein <kbd>&lt;h2&gt;</kbd> mit 'Löschen bestätigen'<br>3. Ein <kbd>&lt;p&gt;</kbd> mit 'Bist du sicher?'<br>4. Ein <kbd>&lt;form method=\"dialog\"&gt;</kbd> mit Abbrechen- und Löschen-Buttons",
"task": "Erstelle einen Bestätigungsdialog:<br>1. Füge <kbd>open</kbd> hinzu, um ihn anzuzeigen<br>2. Ein <kbd>&lt;h2&gt;</kbd> mit <code>Löschen bestätigen</code><br>3. Ein <kbd>&lt;p&gt;</kbd> mit <code>Bist du sicher?</code><br>4. Ein <kbd>&lt;form method=\"dialog\"&gt;</kbd> mit Abbrechen- und Löschen-Buttons",
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; min-height: 200px; background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%); } dialog { border: none; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); padding: 25px; max-width: 350px; text-align: center; } dialog h2 { margin: 0 0 10px 0; color: #c62828; } dialog p { color: #666; margin: 0 0 20px 0; } dialog form { display: flex; gap: 10px; justify-content: center; } dialog button { padding: 10px 20px; border-radius: 6px; cursor: pointer; font-size: 14px; border: none; } dialog button:first-child { background: #e0e0e0; color: #333; } dialog button:last-child { background: #c62828; color: white; } dialog button:hover { opacity: 0.9; }",
"sandboxCSS": "",