From b5487b7a1e022c3a9f692f94fbe876011090f9e2 Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Thu, 25 Dec 2025 15:16:31 +0100 Subject: [PATCH] fix: remove placeholder comments and improve German translations - Remove placeholder comments from initialCode fields - Fix typo: "wichtig Wort" -> "wichtigen Wort" in de/20-html-elements.json - Improve German validation messages for readability - Use consistent terminology (Eingabefeld instead of Input) --- lessons/20-html-elements.json | 2 +- lessons/21-html-forms-basic.json | 2 +- lessons/23-html-details-summary.json | 4 ++-- lessons/24-html-progress-meter.json | 6 +++--- lessons/29-html-figure.json | 6 +++--- lessons/30-html-tables.json | 6 +++--- lessons/31-html-marquee.json | 6 +++--- lessons/32-html-svg.json | 6 +++--- lessons/de/20-html-elements.json | 10 +++++----- lessons/de/21-html-forms-basic.json | 2 +- lessons/de/22-html-forms-validation.json | 8 ++++---- lessons/de/23-html-details-summary.json | 4 ++-- lessons/de/24-html-progress-meter.json | 6 +++--- lessons/de/25-html-datalist.json | 4 ++-- lessons/de/30-html-tables.json | 6 +++--- lessons/de/31-html-marquee.json | 6 +++--- lessons/de/32-html-svg.json | 6 +++--- 17 files changed, 45 insertions(+), 45 deletions(-) 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

My Website

\n
\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": "
\n \n \n
", "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": "\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...

\n", "previewContainer": "preview-area", "validations": [ @@ -72,7 +72,7 @@ "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui; padding: 20px; } label { display: block; margin-bottom: 8px; font-weight: 500; } meter { width: 100%; height: 25px; }", "sandboxCSS": "", - "initialCode": "", + "initialCode": "", "solution": "\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\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}
\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 \"Photo\n \"Photo\n \"Photo\n \"Photo\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 \n \n \n \n \n \n \n \n \n \n \n \n \n
Fruit Prices
FruitPrice
Apple$1.50
Banana$0.75
", "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 \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Monthly Sales
MonthRevenue
January$12,500
February$14,200
", "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 \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Order Summary
ItemPrice
Widget$25.00
Gadget$35.00
Total$60.00
", "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 \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 \n \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 \n \n \n \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

Meine Webseite

\n
\n
\n

Willkommen auf meiner Seite!

\n
\n
\n

Copyright 2025

\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": "
\n \n \n
", "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": "\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...

\n", "previewContainer": "preview-area", "validations": [ @@ -72,7 +72,7 @@ "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui; padding: 20px; } label { display: block; margin-bottom: 8px; font-weight: 500; } meter { width: 100%; height: 25px; }", "sandboxCSS": "", - "initialCode": "", + "initialCode": "", "solution": "\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 \n \n \n \n \n \n \n \n \n \n \n \n \n
Obstpreise
ObstPreis
Apfel1,50 €
Banane0,75 €
", "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 \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Monatliche Verkäufe
MonatUmsatz
Januar12.500 €
Februar14.200 €
", "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 \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Bestellübersicht
ArtikelPreis
Widget25,00 €
Gadget35,00 €
Gesamt60,00 €
", "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 \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 \n \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 \n \n \n \n", "previewContainer": "preview-area", "validations": [