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)
This commit is contained in:
@@ -10,7 +10,7 @@
|
||||
"id": "get-started",
|
||||
"title": "Los geht's",
|
||||
"description": "<strong>Code Crispies</strong> ist eine kostenlose Open-Source-Plattform zum Erlernen von Webentwicklung durch praktische Übungen. Kein Konto erforderlich!<br><br><strong>Was du lernst:</strong><br>• <strong>HTML</strong> - Semantische Elemente, Formulare, Tabellen, SVG (<em>HTML Block & Inline</em>, <em>HTML Formulare</em>, <em>HTML Tabellen</em>)<br>• <strong>CSS</strong> - Selektoren, Box-Model, Flexbox, Animationen (<em>CSS Selektoren</em>, <em>CSS Box-Model</em>, <em>CSS Flexbox</em>)<br>• <strong>Responsive Design</strong> - Media Queries und Mobile-First Layouts<br><br><strong>So funktioniert's:</strong><br>1. Lies die Aufgabe im linken Bereich<br>2. Schreibe Code im Editor<br>3. Sieh Live-Ergebnisse in der Vorschau<br>4. Bekomme sofortiges Feedback mit Hinweisen<br><br><strong>Tastenkürzel:</strong> <kbd>Strg+Z</kbd> rückgängig, <kbd>Strg+Umschalt+Z</kbd> wiederholen<br><br><strong>Weitere Ressourcen:</strong><br>• <a href=\"https://nextlevelshit.github.io/html-over-js/\" target=\"_blank\">HTML over JS</a> - Native HTML vs JavaScript-Lösungen<br>• <a href=\"https://nextlevelshit.github.io/web-engineering-mandala/\" target=\"_blank\">Web Engineering Mandala</a> - JavaScript Technologie-Roadmap",
|
||||
"task": "Hello World",
|
||||
"task": "Schreibe <code>Hello World</code>",
|
||||
"previewHTML": "",
|
||||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; } h1 { color: #6366f1; }",
|
||||
"sandboxCSS": "",
|
||||
@@ -20,8 +20,8 @@
|
||||
"validations": [
|
||||
{
|
||||
"type": "contains",
|
||||
"value": "Hello",
|
||||
"message": "Schreibe 'Hello World'"
|
||||
"value": "Hello World",
|
||||
"message": "Schreibe <code>Hello World</code>"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
{
|
||||
"id": "transitions-1",
|
||||
"title": "Einfache Transitions",
|
||||
"description": "Lerne, wie du <code>transition</code> auf Eigenschaften anwendest für sanfte Änderungen bei Zustandswechseln.",
|
||||
"description": "Lerne, wie du <kbd>transition</kbd> auf Eigenschaften anwendest für sanfte Änderungen bei Zustandswechseln.<br><br><pre>.element {\n transition: property duration;\n /* z.B. transition: background-color 0.3s; */\n}</pre>",
|
||||
"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; }",
|
||||
@@ -63,7 +63,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.",
|
||||
"description": "Erstelle benannte Animationen mit <kbd>@keyframes</kbd> und wende sie mit der <kbd>animation</kbd> Kurzschreibweise an.<br><br><pre>@keyframes name {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.2); }\n 100% { transform: scale(1); }\n}\n.element {\n animation: name 1s infinite;\n}</pre>",
|
||||
"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; }",
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
"id": "semantic-containers",
|
||||
"title": "Semantische Container-Elemente",
|
||||
"description": "Modernes HTML verwendet semantische Container, die ihren Inhalt beschreiben:<br><br><kbd><header></kbd> - Kopfbereich der Seite oder eines Abschnitts<br><kbd><nav></kbd> - Navigationslinks<br><kbd><main></kbd> - Hauptinhalt<br><kbd><section></kbd> - Thematische Gruppierung<br><kbd><article></kbd> - Eigenständiger Inhalt<br><kbd><footer></kbd> - Fußbereich der Seite oder eines Abschnitts",
|
||||
"task": "Erstelle eine einfache Seitenstruktur:<br>1. Füge ein <kbd><header></kbd> mit einem <kbd><h1></kbd> hinzu, das den Text 'Meine Webseite' enthält<br>2. Füge ein <kbd><main></kbd>-Element mit einem Absatz hinzu, der 'Willkommen auf meiner Seite!' sagt<br>3. Füge ein <kbd><footer></kbd> mit einem Absatz hinzu, der 'Copyright 2025' sagt",
|
||||
"task": "Erstelle eine einfache Seitenstruktur:<br>1. Füge ein <kbd><header></kbd> mit einem <kbd><h1></kbd> hinzu, das den Text <code>Meine Webseite</code> enthält<br>2. Füge ein <kbd><main></kbd>-Element mit einem Absatz hinzu, der <code>Willkommen auf meiner Seite!</code> sagt<br>3. Füge ein <kbd><footer></kbd> mit einem Absatz hinzu, der <code>Copyright 2025</code> sagt",
|
||||
"previewHTML": "",
|
||||
"previewBaseCSS": "body { font-family: system-ui; margin: 0; } header { background: #1976d2; color: white; padding: 15px; } main { padding: 20px; min-height: 100px; } footer { background: #424242; color: white; padding: 10px; text-align: center; }",
|
||||
"sandboxCSS": "",
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
"id": "form-structure",
|
||||
"title": "Formularstruktur",
|
||||
"description": "Jedes Formular benötigt einen <kbd><form></kbd>-Wrapper. Innerhalb verwendest du <kbd><label></kbd> zur Beschreibung der Eingaben und <kbd><input></kbd> für die Dateneingabe.<br><br>Das <kbd>for</kbd>-Attribut bei Labels sollte mit der <kbd>id</kbd> der Eingaben übereinstimmen für bessere Zugänglichkeit.",
|
||||
"task": "Erstelle ein Formular mit:<br>1. Einem <kbd><label></kbd> mit dem Text 'Name:' und dem <kbd>for=\"name\"</kbd>-Attribut<br>2. Einem Text-<kbd><input></kbd> mit <kbd>id=\"name\"</kbd> und <kbd>name=\"name\"</kbd>-Attributen",
|
||||
"task": "Erstelle ein Formular mit:<br>1. Einem <kbd><label></kbd> mit dem Text <code>Name:</code> und dem <kbd>for=\"name\"</kbd>-Attribut<br>2. Einem Text-<kbd><input></kbd> mit <kbd>id=\"name\"</kbd> und <kbd>name=\"name\"</kbd>-Attributen",
|
||||
"previewHTML": "",
|
||||
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-bottom: 5px; font-weight: 500; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }",
|
||||
"sandboxCSS": "",
|
||||
@@ -77,8 +77,8 @@
|
||||
{
|
||||
"id": "submit-button",
|
||||
"title": "Absende-Button",
|
||||
"description": "Formulare benötigen eine Möglichkeit zum Absenden. Verwende:<br><br><kbd><button type=\"submit\"></kbd> - Bevorzugt, flexibler Inhalt<br><kbd><input type=\"submit\"></kbd> - Einfacher Text-Button<br><br>Der Button-Text sollte handlungsorientiert sein (z.B. 'Anmelden', 'Registrieren', 'Senden').",
|
||||
"task": "Füge dem Formular einen Absende-Button mit dem Text 'Anmelden' hinzu.",
|
||||
"description": "Formulare benötigen eine Möglichkeit zum Absenden. Verwende:<br><br><kbd><button type=\"submit\"></kbd> - Bevorzugt, flexibler Inhalt<br><kbd><input type=\"submit\"></kbd> - Einfacher Text-Button<br><br>Der Button-Text sollte handlungsorientiert sein (z.B. <code>Anmelden</code>, 'Registrieren', 'Senden').",
|
||||
"task": "Füge dem Formular einen Absende-Button mit dem Text <code>Anmelden</code> hinzu.",
|
||||
"previewHTML": "",
|
||||
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-top: 15px; margin-bottom: 5px; } label:first-child { margin-top: 0; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } button { width: 100%; margin-top: 20px; padding: 10px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } button:hover { background: #1565c0; }",
|
||||
"sandboxCSS": "",
|
||||
@@ -94,7 +94,7 @@
|
||||
{
|
||||
"type": "element_text",
|
||||
"value": { "selector": "button", "text": "Anmelden" },
|
||||
"message": "Der Button sollte 'Anmelden' anzeigen"
|
||||
"message": "Der Button sollte <code>Anmelden</code> anzeigen"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
"id": "details-summary-basic",
|
||||
"title": "Dein erstes Aufklapp-Element",
|
||||
"description": "Das <kbd><details></kbd>-Element erstellt einen aufklappbaren Bereich. Das <kbd><summary></kbd> bietet die anklickbare Beschriftung.<br><br>Klicke auf die Zusammenfassung, um den versteckten Inhalt anzuzeigen - kein JavaScript nötig!",
|
||||
"task": "Erstelle ein <kbd><details></kbd>-Element mit:<br>1. Einem <kbd><summary></kbd> mit dem Text 'Klicken zum Aufklappen'<br>2. Einem <kbd><p></kbd> mit dem Text 'Dieser Inhalt war versteckt!'",
|
||||
"task": "Erstelle ein <kbd><details></kbd>-Element mit:<br>1. Einem <kbd><summary></kbd> mit dem Text <code>Klicken zum Aufklappen</code><br>2. Einem <kbd><p></kbd> mit dem Text <code>Dieser Inhalt war versteckt!</code>",
|
||||
"previewHTML": "",
|
||||
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } details { border: 1px solid #ddd; border-radius: 8px; padding: 15px; } summary { font-weight: 600; cursor: pointer; } summary:hover { color: #1976d2; } details p { margin-top: 15px; color: #666; }",
|
||||
"sandboxCSS": "",
|
||||
@@ -63,7 +63,7 @@
|
||||
"id": "faq-accordion",
|
||||
"title": "FAQ-Akkordeon",
|
||||
"description": "Mehrere <kbd><details></kbd>-Elemente erstellen ein Akkordeon-artiges FAQ. Jede Frage kann unabhängig aufgeklappt werden.<br><br><b>Pro-Tipp:</b> Tippe <kbd>details*3>summary+p</kbd> und drücke Tab für Emmet-Expansion. Das <kbd>*3</kbd> erstellt 3 Elemente, <kbd>></kbd> geht eine Ebene tiefer, <kbd>+</kbd> fügt Geschwister hinzu.",
|
||||
"task": "Erstelle einen FAQ-Bereich mit:<br>1. Einer <kbd><h1></kbd> mit dem Text 'Häufig gestellte Fragen'<br>2. Drei <kbd><details></kbd>-Elementen, jeweils mit einer Frage im <kbd><summary></kbd> und einer Antwort im <kbd><p></kbd>",
|
||||
"task": "Erstelle einen FAQ-Bereich mit:<br>1. Einer <kbd><h1></kbd> mit dem Text <code>Häufig gestellte Fragen</code><br>2. Drei <kbd><details></kbd>-Elementen, jeweils mit einer Frage im <kbd><summary></kbd> und einer Antwort im <kbd><p></kbd>",
|
||||
"previewHTML": "",
|
||||
"previewBaseCSS": "body { font-family: system-ui; min-height: 100vh; background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); display: flex; flex-direction: column; justify-content: center; padding: 40px; margin: 0; box-sizing: border-box; } h1 { font-size: 2.5rem; color: #4a4a4a; text-align: center; margin: 0 0 30px 0; } details { background: white; border-radius: 12px; margin-bottom: 15px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } summary { font-size: 1.3rem; font-weight: 600; color: #5c5c5c; cursor: pointer; list-style: none; } summary::before { content: '▸ '; color: #fcb69f; } details[open] summary::before { content: '▾ '; } details p { margin: 15px 0 0 0; color: #666; line-height: 1.6; }",
|
||||
"sandboxCSS": "",
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
"id": "progress-basic",
|
||||
"title": "Fortschrittsbalken",
|
||||
"description": "Das <kbd><progress></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><progress>...</progress></kbd> mit einem Fallback-Text dazwischen für ältere Browser.",
|
||||
"task": "Erstelle einen Fortschrittsbalken mit 70% Fortschritt:<br>1. Füge ein <kbd><label></kbd> mit 'Download:' hinzu<br>2. Füge ein <kbd><progress></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><label></kbd> mit <code>Download:</code> hinzu<br>2. Füge ein <kbd><progress></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><p></kbd> mit 'Lädt...' hinzu<br>2. Füge ein <kbd><progress></kbd> ohne value-Attribut hinzu",
|
||||
"task": "Erstelle eine Ladeanzeige:<br>1. Füge ein <kbd><p></kbd> mit <code>Lädt...</code> hinzu<br>2. Füge ein <kbd><progress></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><meter></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><label></kbd> mit 'Akku:' hinzu<br>2. Füge ein <kbd><meter></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><label></kbd> mit <code>Akku:</code> hinzu<br>2. Füge ein <kbd><meter></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": "",
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
"id": "datalist-basic",
|
||||
"title": "Eingabe mit Vorschlägen",
|
||||
"description": "Das <kbd><datalist></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><label></kbd> mit 'Browser:' hinzu<br>2. Füge ein <kbd><input></kbd> mit <kbd>list=\"browsers\"</kbd> hinzu<br>3. Füge eine <kbd><datalist id=\"browsers\"></kbd> mit Optionen für Chrome, Firefox und Safari hinzu",
|
||||
"task": "Erstelle eine Browser-Auswahl:<br>1. Füge ein <kbd><label></kbd> mit <code>Browser:</code> hinzu<br>2. Füge ein <kbd><input></kbd> mit <kbd>list=\"browsers\"</kbd> hinzu<br>3. Füge eine <kbd><datalist id=\"browsers\"></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><label></kbd> mit 'Land:' hinzu<br>2. Füge ein <kbd><input></kbd> mit <kbd>list=\"countries\"</kbd> hinzu<br>3. Füge eine <kbd><datalist id=\"countries\"></kbd> mit mindestens 4 Länder-Optionen hinzu",
|
||||
"task": "Erstelle eine Länder-Eingabe:<br>1. Füge ein <kbd><label></kbd> mit <code>Land:</code> hinzu<br>2. Füge ein <kbd><input></kbd> mit <kbd>list=\"countries\"</kbd> hinzu<br>3. Füge eine <kbd><datalist id=\"countries\"></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": "",
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
"id": "dialog-basic",
|
||||
"title": "Dialog öffnen",
|
||||
"description": "Das <kbd><dialog></kbd>-Element erstellt ein natives Modal. Füge das <kbd>open</kbd>-Attribut hinzu, um es anzuzeigen.<br><br>Verwende <kbd><form method=\"dialog\"></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><h2></kbd> mit 'Willkommen!'<br>3. Einem <kbd><p></kbd> mit einer Begrüßungsnachricht<br>4. Einem <kbd><form method=\"dialog\"></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><h2></kbd> mit <code>Willkommen!</code><br>3. Einem <kbd><p></kbd> mit einer Begrüßungsnachricht<br>4. Einem <kbd><form method=\"dialog\"></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><h2></kbd> mit 'Löschen bestätigen'<br>3. Ein <kbd><p></kbd> mit 'Bist du sicher?'<br>4. Ein <kbd><form method=\"dialog\"></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><h2></kbd> mit <code>Löschen bestätigen</code><br>3. Ein <kbd><p></kbd> mit <code>Bist du sicher?</code><br>4. Ein <kbd><form method=\"dialog\"></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": "",
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
"id": "fieldset-basic",
|
||||
"title": "Gruppieren mit Fieldset",
|
||||
"description": "Das <kbd><fieldset></kbd>-Element gruppiert zusammengehörige Formularfelder. Füge ein <kbd><legend></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><form></kbd>-Element<br>2. Ein <kbd><fieldset></kbd> darin<br>3. Ein <kbd><legend></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><form></kbd>-Element<br>2. Ein <kbd><fieldset></kbd> darin<br>3. Ein <kbd><legend></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><textarea></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><fieldset></kbd> mit <kbd><legend></kbd> 'Kontaktiere uns'<br>2. Ein beschriftetes <kbd><input></kbd> für E-Mail<br>3. Eine beschriftete <kbd><textarea></kbd> für die Nachricht<br>4. Einen Absende-<kbd><button></kbd>",
|
||||
"task": "Erstelle ein Kontaktformular:<br>1. Ein <kbd><fieldset></kbd> mit <kbd><legend></kbd> <code>Kontaktiere uns</code><br>2. Ein beschriftetes <kbd><input></kbd> für E-Mail<br>3. Eine beschriftete <kbd><textarea></kbd> für die Nachricht<br>4. Einen Absende-<kbd><button></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><fieldset></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": "",
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
"id": "table-basic",
|
||||
"title": "Grundlegende Tabellenstruktur",
|
||||
"description": "Tabellen verwenden <kbd><table></kbd> mit <kbd><tr></kbd> für Zeilen. In Zeilen nutze <kbd><th></kbd> für Überschriften und <kbd><td></kbd> für Datenzellen.<br><br>Das <kbd><caption></kbd>-Element bietet einen zugänglichen Titel für die Tabelle.",
|
||||
"task": "Erstelle eine einfache Tabelle mit:<br>1. Einer <kbd><caption></kbd> mit 'Obstpreise'<br>2. Einer Kopfzeile mit 'Obst' und 'Preis' Spalten<br>3. Mindestens 2 Datenzeilen",
|
||||
"task": "Erstelle eine einfache Tabelle mit:<br>1. Einer <kbd><caption></kbd> mit <code>Obstpreise</code><br>2. Einer Kopfzeile mit <code>Obst</code> und <code>Preis</code> Spalten<br>3. Mindestens 2 Datenzeilen",
|
||||
"previewHTML": "",
|
||||
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f5f5f5; } table { border-collapse: collapse; width: 100%; max-width: 400px; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } caption { padding: 15px; font-weight: 600; font-size: 1.2rem; color: #333; background: #f8f9fa; } th, td { padding: 12px 20px; text-align: left; border-bottom: 1px solid #eee; } th { background: #3498db; color: white; font-weight: 500; } tr:hover { background: #f8f9fa; } tr:last-child td { border-bottom: none; }",
|
||||
"sandboxCSS": "",
|
||||
@@ -44,7 +44,7 @@
|
||||
"id": "table-thead-tbody",
|
||||
"title": "Tabellenkopf & -körper",
|
||||
"description": "Verwende <kbd><thead></kbd> zum Gruppieren von Kopfzeilen und <kbd><tbody></kbd> zum Gruppieren von Datenzeilen. Das hilft Browsern und Hilfstechnologien, die Tabellenstruktur zu verstehen.<br><br>Du kannst auch <kbd><tfoot></kbd> für Fußzeilen wie Summen verwenden.",
|
||||
"task": "Erstelle eine strukturierte Tabelle:<br>1. Eine <kbd><caption></kbd> mit 'Monatliche Verkäufe'<br>2. Ein <kbd><thead></kbd> mit Monat und Umsatz Überschriften<br>3. Ein <kbd><tbody></kbd> mit mindestens 2 Datenzeilen",
|
||||
"task": "Erstelle eine strukturierte Tabelle:<br>1. Eine <kbd><caption></kbd> mit <code>Monatliche Verkäufe</code><br>2. Ein <kbd><thead></kbd> mit Monat und Umsatz Überschriften<br>3. Ein <kbd><tbody></kbd> mit mindestens 2 Datenzeilen",
|
||||
"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; } table { border-collapse: collapse; width: 100%; max-width: 450px; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.2); } caption { padding: 20px; font-weight: 700; font-size: 1.3rem; color: white; background: transparent; text-shadow: 0 2px 4px rgba(0,0,0,0.2); caption-side: top; } thead { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } th { padding: 15px 20px; text-align: left; color: white; font-weight: 500; } tbody tr { border-bottom: 1px solid #eee; } tbody tr:hover { background: #f8f9fa; } td { padding: 15px 20px; color: #333; } tbody tr:last-child { border-bottom: none; }",
|
||||
"sandboxCSS": "",
|
||||
@@ -83,7 +83,7 @@
|
||||
"id": "table-complete",
|
||||
"title": "Vollständige Tabelle mit Fuß",
|
||||
"description": "Füge <kbd><tfoot></kbd> hinzu, um einen Fußbereich für Summen oder Zusammenfassungen zu erstellen. Der Fuß bleibt unten, auch wenn tbody viele Zeilen hat.<br><br>Kombiniere alle Abschnitte für eine vollständig strukturierte, zugängliche Tabelle.",
|
||||
"task": "Erstelle eine vollständige Tabelle:<br>1. Eine <kbd><caption></kbd> mit 'Bestellübersicht'<br>2. Ein <kbd><thead></kbd> mit Artikel und Preis Überschriften<br>3. Ein <kbd><tbody></kbd> mit 2 Artikeln<br>4. Ein <kbd><tfoot></kbd> mit einer Summenzeile",
|
||||
"task": "Erstelle eine vollständige Tabelle:<br>1. Eine <kbd><caption></kbd> mit <code>Bestellübersicht</code><br>2. Ein <kbd><thead></kbd> mit Artikel und Preis Überschriften<br>3. Ein <kbd><tbody></kbd> mit 2 Artikeln<br>4. Ein <kbd><tfoot></kbd> mit einer Summenzeile",
|
||||
"previewHTML": "",
|
||||
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #fafafa; } table { border-collapse: collapse; width: 100%; max-width: 400px; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } caption { padding: 15px 20px; font-weight: 600; font-size: 1.1rem; color: #333; text-align: left; background: #f8f9fa; border-bottom: 2px solid #eee; } th, td { padding: 12px 20px; text-align: left; } thead th { background: #2c3e50; color: white; } tbody td { border-bottom: 1px solid #eee; } tbody tr:hover { background: #f8f9fa; } tfoot { background: #ecf0f1; font-weight: 600; } tfoot td { border-top: 2px solid #2c3e50; color: #2c3e50; }",
|
||||
"sandboxCSS": "",
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
"id": "marquee-basic",
|
||||
"title": "Lauftext",
|
||||
"description": "Das <kbd><marquee></kbd>-Element erstellt Lauftext - ein Klassiker aus dem frühen Web! Obwohl veraltet, funktioniert es noch in den meisten Browsern.<br><br>Hinweis: Für produktive Seiten nutze CSS-Animationen. Aber zum Lernen und Spaß haben ist Marquee super!",
|
||||
"task": "Erstelle ein einfaches Marquee:<br>1. Füge ein <kbd><marquee></kbd>-Element hinzu<br>2. Schreibe Text hinein wie 'Willkommen auf meiner Website!'",
|
||||
"task": "Erstelle ein einfaches Marquee:<br>1. Füge ein <kbd><marquee></kbd>-Element hinzu<br>2. Schreibe Text hinein wie <code>Willkommen auf meiner Website!</code>",
|
||||
"previewHTML": "",
|
||||
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%); min-height: 150px; display: flex; align-items: center; } marquee { font-size: 2rem; color: #00ff00; text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00; font-family: 'Courier New', monospace; }",
|
||||
"sandboxCSS": "",
|
||||
|
||||
Reference in New Issue
Block a user