diff --git a/lessons/20-html-elements.json b/lessons/20-html-elements.json
index eb41fe4..940e326 100644
--- a/lessons/20-html-elements.json
+++ b/lessons/20-html-elements.json
@@ -38,7 +38,7 @@
"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": "",
- "initialCode": "",
+ "initialCode": "",
"solution": "\n\n Welcome to my site!
\n \n",
"previewContainer": "preview-area",
"validations": [
diff --git a/lessons/21-html-forms-basic.json b/lessons/21-html-forms-basic.json
index 7459050..2df99a6 100644
--- a/lessons/21-html-forms-basic.json
+++ b/lessons/21-html-forms-basic.json
@@ -14,7 +14,7 @@
"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": "",
- "initialCode": "",
+ "initialCode": "",
"solution": "",
"previewContainer": "preview-area",
"validations": [
diff --git a/lessons/23-html-details-summary.json b/lessons/23-html-details-summary.json
index 3b54580..c67495f 100644
--- a/lessons/23-html-details-summary.json
+++ b/lessons/23-html-details-summary.json
@@ -14,7 +14,7 @@
"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": "",
- "initialCode": "",
+ "initialCode": "",
"solution": "\n Click to reveal \n This content was hidden!
\n ",
"previewContainer": "preview-area",
"validations": [
@@ -67,7 +67,7 @@
"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": "",
- "initialCode": "",
+ "initialCode": "",
"solution": "Frequently Asked Questions \n\n\n What is HTML5? \n HTML5 is the latest version of HTML with new semantic elements and APIs.
\n \n\n\n Do I need JavaScript? \n Many interactive features work with pure HTML5, no JavaScript required!
\n \n\n\n Is this accessible? \n Yes! Native HTML elements have built-in keyboard and screen reader support.
\n ",
"previewContainer": "preview-area",
"validations": [
diff --git a/lessons/24-html-progress-meter.json b/lessons/24-html-progress-meter.json
index b3bbc2a..8b6b24a 100644
--- a/lessons/24-html-progress-meter.json
+++ b/lessons/24-html-progress-meter.json
@@ -14,7 +14,7 @@
"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": "",
- "initialCode": "",
+ "initialCode": "",
"solution": "Download: \n70% ",
"previewContainer": "preview-area",
"validations": [
@@ -48,7 +48,7 @@
"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": "",
- "initialCode": "",
+ "initialCode": "",
"solution": "Loading...
\nBattery: \n80% ",
"previewContainer": "preview-area",
"validations": [
diff --git a/lessons/29-html-figure.json b/lessons/29-html-figure.json
index 41e4545..279f27e 100644
--- a/lessons/29-html-figure.json
+++ b/lessons/29-html-figure.json
@@ -14,7 +14,7 @@
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f5f5f5; } figure { margin: 0; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); max-width: 400px; } figure img { width: 100%; height: 200px; object-fit: cover; display: block; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } figcaption { padding: 15px 20px; color: #555; font-size: 0.95rem; border-top: 1px solid #eee; }",
"sandboxCSS": "",
- "initialCode": "",
+ "initialCode": "",
"solution": "\n A beautiful mountain landscape at sunset. \n ",
"previewContainer": "preview-area",
"validations": [
@@ -43,7 +43,7 @@
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #1e1e1e; } figure { margin: 0; background: #2d2d2d; border-radius: 10px; overflow: hidden; max-width: 500px; } pre { margin: 0; padding: 20px; overflow-x: auto; } code { color: #9cdcfe; font-family: 'Fira Code', 'Consolas', monospace; font-size: 14px; line-height: 1.5; } figcaption { padding: 12px 20px; color: #888; font-size: 0.85rem; background: #252525; border-top: 1px solid #3d3d3d; }",
"sandboxCSS": "",
- "initialCode": "",
+ "initialCode": "",
"solution": "\n function greet(name) {\n return `Hello, ${name}!`;\n}A simple greeting function in JavaScript \n ",
"previewContainer": "preview-area",
"validations": [
@@ -77,7 +77,7 @@
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); min-height: 100vh; margin: 0; box-sizing: border-box; } figure { margin: 0; background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.15); max-width: 500px; padding: 15px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } figure img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; background: linear-gradient(45deg, #ff6b6b, #feca57); } figcaption { grid-column: 1 / -1; padding: 10px 5px 5px; color: #666; font-size: 0.9rem; text-align: center; }",
"sandboxCSS": "",
- "initialCode": "",
+ "initialCode": "",
"solution": "\n My vacation photo gallery \n ",
"previewContainer": "preview-area",
"validations": [
diff --git a/lessons/30-html-tables.json b/lessons/30-html-tables.json
index 6871d77..54ed137 100644
--- a/lessons/30-html-tables.json
+++ b/lessons/30-html-tables.json
@@ -14,7 +14,7 @@
"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": "",
- "initialCode": "",
+ "initialCode": "",
"solution": "\n Fruit Prices \n \n Fruit \n Price \n \n \n Apple \n $1.50 \n \n \n Banana \n $0.75 \n \n
",
"previewContainer": "preview-area",
"validations": [
@@ -48,7 +48,7 @@
"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": "",
- "initialCode": "",
+ "initialCode": "",
"solution": "\n Monthly Sales \n \n \n Month \n Revenue \n \n \n \n \n January \n $12,500 \n \n \n February \n $14,200 \n \n \n
",
"previewContainer": "preview-area",
"validations": [
@@ -87,7 +87,7 @@
"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": "",
- "initialCode": "",
+ "initialCode": "",
"solution": "\n Order Summary \n \n \n Item \n Price \n \n \n \n \n Widget \n $25.00 \n \n \n Gadget \n $35.00 \n \n \n \n \n Total \n $60.00 \n \n \n
",
"previewContainer": "preview-area",
"validations": [
diff --git a/lessons/31-html-marquee.json b/lessons/31-html-marquee.json
index 116dd44..e2ba33b 100644
--- a/lessons/31-html-marquee.json
+++ b/lessons/31-html-marquee.json
@@ -14,7 +14,7 @@
"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": "",
- "initialCode": "",
+ "initialCode": "",
"solution": "Welcome to my website! ",
"previewContainer": "preview-area",
"validations": [
@@ -33,7 +33,7 @@
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%); min-height: 150px; display: flex; align-items: center; } marquee { font-size: 2.5rem; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); font-weight: bold; }",
"sandboxCSS": "",
- "initialCode": "",
+ "initialCode": "",
"solution": "Bounce! Bounce! Bounce! ",
"previewContainer": "preview-area",
"validations": [
@@ -57,7 +57,7 @@
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; padding: 0; margin: 0; background: #1a1a2e; } marquee { background: linear-gradient(90deg, #c0392b 0%, #e74c3c 50%, #c0392b 100%); padding: 15px 0; font-size: 1.3rem; color: white; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; border-top: 3px solid #f1c40f; border-bottom: 3px solid #f1c40f; }",
"sandboxCSS": "",
- "initialCode": "",
+ "initialCode": "",
"solution": "BREAKING NEWS: Marquee element still works in browsers! ",
"previewContainer": "preview-area",
"validations": [
diff --git a/lessons/32-html-svg.json b/lessons/32-html-svg.json
index 99f095b..f10f4f6 100644
--- a/lessons/32-html-svg.json
+++ b/lessons/32-html-svg.json
@@ -14,7 +14,7 @@
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f5f5f5; display: flex; justify-content: center; } svg { background: white; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }",
"sandboxCSS": "",
- "initialCode": "",
+ "initialCode": "",
"solution": "\n ",
"previewContainer": "preview-area",
"validations": [
@@ -48,7 +48,7 @@
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 200px; display: flex; justify-content: center; align-items: center; } svg { background: white; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }",
"sandboxCSS": "",
- "initialCode": "",
+ "initialCode": "",
"solution": "\n ",
"previewContainer": "preview-area",
"validations": [
@@ -77,7 +77,7 @@
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); min-height: 250px; display: flex; justify-content: center; align-items: center; } svg { background: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); }",
"sandboxCSS": "",
- "initialCode": "",
+ "initialCode": "",
"solution": "\n ",
"previewContainer": "preview-area",
"validations": [
diff --git a/lessons/de/20-html-elements.json b/lessons/de/20-html-elements.json
index 285c909..3e48306 100644
--- a/lessons/de/20-html-elements.json
+++ b/lessons/de/20-html-elements.json
@@ -10,12 +10,12 @@
"id": "block-vs-inline-intro",
"title": "Block- vs Inline-Elemente",
"description": "HTML-Elemente fallen in zwei Hauptkategorien:Block-Elemente (Container) beginnen in einer neuen Zeile und nehmen die volle Breite ein. Beispiele: <div> , <p> , <h1> , <section> Inline-Elemente fließen innerhalb des Textes und nehmen nur die benötigte Breite ein. Beispiele: <span> , <a> , <strong> , <em> ",
- "task": "Umschließe das Wort wichtig mit <strong> -Tags, um es fett zu machen. Beachte, wie der Absatz (Block) die volle Breite einnimmt, während strong (Inline) mit dem Text fließt.",
+ "task": "Umschließe das Wort wichtigen mit <strong> -Tags, um es fett zu machen. Beachte, wie der Absatz (Block) die volle Breite einnimmt, während strong (Inline) mit dem Text fließt.",
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; } p { background: #e3f2fd; padding: 10px; } strong { background: #ffecb3; }",
"sandboxCSS": "",
- "initialCode": "Dies ist ein Absatz mit einem wichtig Wort.
",
- "solution": "Dies ist ein Absatz mit einem wichtig Wort.
",
+ "initialCode": "Dies ist ein Absatz mit einem wichtigen Wort.
",
+ "solution": "Dies ist ein Absatz mit einem wichtigen Wort.
",
"previewContainer": "preview-area",
"validations": [
{
@@ -26,7 +26,7 @@
{
"type": "parent_child",
"value": { "parent": "p", "child": "strong" },
- "message": "Umschließe das Wort 'wichtig' mit -Tags"
+ "message": "Umschließe das Wort 'wichtigen' mit -Tags"
}
]
},
@@ -38,7 +38,7 @@
"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": "",
- "initialCode": "",
+ "initialCode": "",
"solution": "\n\n Willkommen auf meiner Seite!
\n \n",
"previewContainer": "preview-area",
"validations": [
diff --git a/lessons/de/21-html-forms-basic.json b/lessons/de/21-html-forms-basic.json
index 5113ceb..bf64118 100644
--- a/lessons/de/21-html-forms-basic.json
+++ b/lessons/de/21-html-forms-basic.json
@@ -14,7 +14,7 @@
"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": "",
- "initialCode": "",
+ "initialCode": "",
"solution": "",
"previewContainer": "preview-area",
"validations": [
diff --git a/lessons/de/22-html-forms-validation.json b/lessons/de/22-html-forms-validation.json
index fb4dca0..53e8636 100644
--- a/lessons/de/22-html-forms-validation.json
+++ b/lessons/de/22-html-forms-validation.json
@@ -21,12 +21,12 @@
{
"type": "attribute_value",
"value": { "selector": "input[name='name']", "attr": "required", "value": true },
- "message": "Füge das 'required'-Attribut zur Name-Eingabe hinzu"
+ "message": "Füge required zum Namensfeld hinzu"
},
{
"type": "attribute_value",
"value": { "selector": "input[name='email']", "attr": "required", "value": true },
- "message": "Füge das 'required'-Attribut zur E-Mail-Eingabe hinzu"
+ "message": "Füge required zum E-Mail-Feld hinzu"
}
]
},
@@ -45,12 +45,12 @@
{
"type": "attribute_value",
"value": { "selector": "input[type='password']", "attr": "minlength", "value": "8" },
- "message": "Füge minlength=\"8\" zur Passwort-Eingabe hinzu"
+ "message": "Füge minlength=\"8\" zum Passwort hinzu"
},
{
"type": "attribute_value",
"value": { "selector": "input[type='password']", "attr": "maxlength", "value": "20" },
- "message": "Füge maxlength=\"20\" zur Passwort-Eingabe hinzu"
+ "message": "Füge maxlength=\"20\" zum Passwort hinzu"
},
{
"type": "attribute_value",
diff --git a/lessons/de/23-html-details-summary.json b/lessons/de/23-html-details-summary.json
index c3d237a..2555024 100644
--- a/lessons/de/23-html-details-summary.json
+++ b/lessons/de/23-html-details-summary.json
@@ -14,7 +14,7 @@
"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": "",
- "initialCode": "",
+ "initialCode": "",
"solution": "\n Klicken zum Aufklappen \n Dieser Inhalt war versteckt!
\n ",
"previewContainer": "preview-area",
"validations": [
@@ -67,7 +67,7 @@
"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": "",
- "initialCode": "",
+ "initialCode": "",
"solution": "Häufig gestellte Fragen \n\n\n Was ist HTML5? \n HTML5 ist die neueste Version von HTML mit neuen semantischen Elementen und APIs.
\n \n\n\n Brauche ich JavaScript? \n Viele interaktive Funktionen funktionieren mit purem HTML5, kein JavaScript nötig!
\n \n\n\n Ist das barrierefrei? \n Ja! Native HTML-Elemente haben eingebaute Tastatur- und Screenreader-Unterstützung.
\n ",
"previewContainer": "preview-area",
"validations": [
diff --git a/lessons/de/24-html-progress-meter.json b/lessons/de/24-html-progress-meter.json
index 2928944..5d8773b 100644
--- a/lessons/de/24-html-progress-meter.json
+++ b/lessons/de/24-html-progress-meter.json
@@ -14,7 +14,7 @@
"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": "",
- "initialCode": "",
+ "initialCode": "",
"solution": "Download: \n70% ",
"previewContainer": "preview-area",
"validations": [
@@ -48,7 +48,7 @@
"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": "",
- "initialCode": "",
+ "initialCode": "",
"solution": "Lädt...
\nAkku: \n80% ",
"previewContainer": "preview-area",
"validations": [
diff --git a/lessons/de/25-html-datalist.json b/lessons/de/25-html-datalist.json
index 2af7c9a..96ed029 100644
--- a/lessons/de/25-html-datalist.json
+++ b/lessons/de/25-html-datalist.json
@@ -26,7 +26,7 @@
{
"type": "attribute_value",
"value": { "selector": "input", "attr": "list", "value": "browsers" },
- "message": "Verbinde das Input mit der Datalist über list=\"browsers\""
+ "message": "Verbinde das Eingabefeld mit der Datalist über list=\"browsers\""
},
{
"type": "element_count",
@@ -65,7 +65,7 @@
{
"type": "attribute_value",
"value": { "selector": "input", "attr": "list", "value": "countries" },
- "message": "Verbinde das Input über list=\"countries\""
+ "message": "Verbinde das Eingabefeld über list=\"countries\""
},
{
"type": "element_count",
diff --git a/lessons/de/30-html-tables.json b/lessons/de/30-html-tables.json
index 4fc2049..f15b75b 100644
--- a/lessons/de/30-html-tables.json
+++ b/lessons/de/30-html-tables.json
@@ -14,7 +14,7 @@
"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": "",
- "initialCode": "",
+ "initialCode": "",
"solution": "\n Obstpreise \n \n Obst \n Preis \n \n \n Apfel \n 1,50 € \n \n \n Banane \n 0,75 € \n \n
",
"previewContainer": "preview-area",
"validations": [
@@ -48,7 +48,7 @@
"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": "",
- "initialCode": "",
+ "initialCode": "",
"solution": "\n Monatliche Verkäufe \n \n \n Monat \n Umsatz \n \n \n \n \n Januar \n 12.500 € \n \n \n Februar \n 14.200 € \n \n \n
",
"previewContainer": "preview-area",
"validations": [
@@ -87,7 +87,7 @@
"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": "",
- "initialCode": "",
+ "initialCode": "",
"solution": "\n Bestellübersicht \n \n \n Artikel \n Preis \n \n \n \n \n Widget \n 25,00 € \n \n \n Gadget \n 35,00 € \n \n \n \n \n Gesamt \n 60,00 € \n \n \n
",
"previewContainer": "preview-area",
"validations": [
diff --git a/lessons/de/31-html-marquee.json b/lessons/de/31-html-marquee.json
index 1736ffb..52e4cdc 100644
--- a/lessons/de/31-html-marquee.json
+++ b/lessons/de/31-html-marquee.json
@@ -14,7 +14,7 @@
"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": "",
- "initialCode": "",
+ "initialCode": "",
"solution": "Willkommen auf meiner Website! ",
"previewContainer": "preview-area",
"validations": [
@@ -33,7 +33,7 @@
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%); min-height: 150px; display: flex; align-items: center; } marquee { font-size: 2.5rem; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); font-weight: bold; }",
"sandboxCSS": "",
- "initialCode": "",
+ "initialCode": "",
"solution": "Hüpf! Hüpf! Hüpf! ",
"previewContainer": "preview-area",
"validations": [
@@ -57,7 +57,7 @@
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; padding: 0; margin: 0; background: #1a1a2e; } marquee { background: linear-gradient(90deg, #c0392b 0%, #e74c3c 50%, #c0392b 100%); padding: 15px 0; font-size: 1.3rem; color: white; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; border-top: 3px solid #f1c40f; border-bottom: 3px solid #f1c40f; }",
"sandboxCSS": "",
- "initialCode": "",
+ "initialCode": "",
"solution": "EILMELDUNG: Das Marquee-Element funktioniert noch in Browsern! ",
"previewContainer": "preview-area",
"validations": [
diff --git a/lessons/de/32-html-svg.json b/lessons/de/32-html-svg.json
index 68caf20..cd291ba 100644
--- a/lessons/de/32-html-svg.json
+++ b/lessons/de/32-html-svg.json
@@ -14,7 +14,7 @@
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f5f5f5; display: flex; justify-content: center; } svg { background: white; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }",
"sandboxCSS": "",
- "initialCode": "",
+ "initialCode": "",
"solution": "\n ",
"previewContainer": "preview-area",
"validations": [
@@ -48,7 +48,7 @@
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 200px; display: flex; justify-content: center; align-items: center; } svg { background: white; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }",
"sandboxCSS": "",
- "initialCode": "",
+ "initialCode": "",
"solution": "\n ",
"previewContainer": "preview-area",
"validations": [
@@ -77,7 +77,7 @@
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); min-height: 250px; display: flex; justify-content: center; align-items: center; } svg { background: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); }",
"sandboxCSS": "",
- "initialCode": "",
+ "initialCode": "",
"solution": "\n ",
"previewContainer": "preview-area",
"validations": [