fix(lessons): use code tags for quoted text, add syntax examples

- 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)

lessons/de/24-html-progress-meter.json

@@ -10,7 +10,7 @@
 			"id": "progress-basic",
 			"title": "Fortschrittsbalken",
 			"description": "Das <kbd>&lt;progress&gt;</kbd>-Element zeigt den Aufgabenfortschritt. Verwende <kbd>value</kbd> für den aktuellen Stand und <kbd>max</kbd> für das Maximum.<br><br><b>Wichtig:</b> Dies ist kein selbstschließendes Tag! Schreibe <kbd>&lt;progress&gt;...&lt;/progress&gt;</kbd> mit einem Fallback-Text dazwischen für ältere Browser.",
-			"task": "Erstelle einen Fortschrittsbalken mit 70% Fortschritt:<br>1. Füge ein <kbd>&lt;label&gt;</kbd> mit 'Download:' hinzu<br>2. Füge ein <kbd>&lt;progress&gt;</kbd> mit <kbd>value=\"70\"</kbd> und <kbd>max=\"100\"</kbd> hinzu",
+			"task": "Erstelle einen Fortschrittsbalken mit 70% Fortschritt:<br>1. Füge ein <kbd>&lt;label&gt;</kbd> mit <code>Download:</code> hinzu<br>2. Füge ein <kbd>&lt;progress&gt;</kbd> mit <kbd>value=\"70\"</kbd> und <kbd>max=\"100\"</kbd> hinzu",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } label { display: block; margin-bottom: 8px; font-weight: 500; } progress { width: 100%; height: 20px; border-radius: 10px; } progress::-webkit-progress-bar { background: #e0e0e0; border-radius: 10px; } progress::-webkit-progress-value { background: linear-gradient(90deg, #4caf50, #8bc34a); border-radius: 10px; } progress::-moz-progress-bar { background: linear-gradient(90deg, #4caf50, #8bc34a); border-radius: 10px; }",
 			"sandboxCSS": "",
@@ -44,7 +44,7 @@
 			"id": "progress-indeterminate",
 			"title": "Unbestimmter Fortschritt",
 			"description": "Wenn der Fortschritt unbekannt ist (wie beim Laden), lasse das <kbd>value</kbd>-Attribut weg. Dies erstellt einen animierten unbestimmten Zustand.<br><br>Nützlich für Netzwerkanfragen oder Prozesse mit unbekannter Dauer.",
-			"task": "Erstelle eine Ladeanzeige:<br>1. Füge ein <kbd>&lt;p&gt;</kbd> mit 'Lädt...' hinzu<br>2. Füge ein <kbd>&lt;progress&gt;</kbd> ohne value-Attribut hinzu",
+			"task": "Erstelle eine Ladeanzeige:<br>1. Füge ein <kbd>&lt;p&gt;</kbd> mit <code>Lädt...</code> hinzu<br>2. Füge ein <kbd>&lt;progress&gt;</kbd> ohne value-Attribut hinzu",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } p { margin-bottom: 10px; color: #666; } progress { width: 100%; height: 8px; border-radius: 4px; } progress::-webkit-progress-bar { background: #e0e0e0; border-radius: 4px; }",
 			"sandboxCSS": "",
@@ -68,7 +68,7 @@
 			"id": "meter-gauge",
 			"title": "Meter-Anzeigen",
 			"description": "Das <kbd>&lt;meter&gt;</kbd>-Element zeigt einen Skalarwert innerhalb eines Bereichs. Verwende es für Messungen wie Speicherplatz, Akku oder Bewertungen.<br><br>Setze <kbd>low</kbd>, <kbd>high</kbd> und <kbd>optimum</kbd>, um gute/schlechte Bereiche zu definieren - der Browser färbt es entsprechend ein!",
-			"task": "Erstelle eine Akku-Anzeige:<br>1. Füge ein <kbd>&lt;label&gt;</kbd> mit 'Akku:' hinzu<br>2. Füge ein <kbd>&lt;meter&gt;</kbd> hinzu mit:<br>   - <kbd>value=\"0.8\"</kbd><br>   - <kbd>min=\"0\"</kbd> und <kbd>max=\"1\"</kbd><br>   - <kbd>low=\"0.2\"</kbd> und <kbd>high=\"0.8\"</kbd><br>   - <kbd>optimum=\"1\"</kbd>",
+			"task": "Erstelle eine Akku-Anzeige:<br>1. Füge ein <kbd>&lt;label&gt;</kbd> mit <code>Akku:</code> hinzu<br>2. Füge ein <kbd>&lt;meter&gt;</kbd> hinzu mit:<br>   - <kbd>value=\"0.8\"</kbd><br>   - <kbd>min=\"0\"</kbd> und <kbd>max=\"1\"</kbd><br>   - <kbd>low=\"0.2\"</kbd> und <kbd>high=\"0.8\"</kbd><br>   - <kbd>optimum=\"1\"</kbd>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } label { display: block; margin-bottom: 8px; font-weight: 500; } meter { width: 100%; height: 25px; }",
 			"sandboxCSS": "",