diff --git a/lessons/de/00-welcome.json b/lessons/de/00-welcome.json index 9784a36..a9d4376 100644 --- a/lessons/de/00-welcome.json +++ b/lessons/de/00-welcome.json @@ -10,18 +10,18 @@ "id": "get-started", "title": "Los geht's", "description": "Code Crispies ist eine kostenlose Open-Source-Plattform zum Erlernen von Webentwicklung durch praktische Übungen. Kein Konto erforderlich!

Was du lernst:
• HTML - Semantische Elemente, Formulare, Tabellen, SVG (HTML Block & Inline, HTML Formulare, HTML Tabellen)
• CSS - Selektoren, Box-Model, Flexbox, Animationen (CSS Selektoren, CSS Box-Model, CSS Flexbox)
• Responsive Design - Media Queries und Mobile-First Layouts

So funktioniert's:
1. Lies die Aufgabe im linken Bereich
2. Schreibe Code im Editor
3. Sieh Live-Ergebnisse in der Vorschau
4. Bekomme sofortiges Feedback mit Hinweisen

Tastenkürzel: Strg+Z rückgängig, Strg+Umschalt+Z wiederholen

Weitere Ressourcen:
• HTML over JS - Native HTML vs JavaScript-Lösungen
• Web Engineering Mandala - JavaScript Technologie-Roadmap", - "task": "Hallo Welt", + "task": "Hello World", "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; } h1 { color: #6366f1; }", "sandboxCSS": "", "initialCode": "", - "solution": "

Hallo Welt

", + "solution": "

Hello World

", "previewContainer": "preview-area", "validations": [ { "type": "contains", - "value": "Hallo", - "message": "Schreibe 'Hallo Welt'" + "value": "Hello", + "message": "Schreibe 'Hello World'" } ] }, @@ -53,7 +53,7 @@ "previewHTML": "", "previewBaseCSS": "", "sandboxCSS": "", - "initialCode": "\n\n

Hallo Welt

\n

Los geht's!

", + "initialCode": "\n\n

Hello World

\n

Start coding!

", "solution": "", "previewContainer": "preview-area", "validations": [] diff --git a/lessons/de/01-box-model.json b/lessons/de/01-box-model.json index b012a2a..f51f01b 100644 --- a/lessons/de/01-box-model.json +++ b/lessons/de/01-box-model.json @@ -16,6 +16,7 @@ "codePrefix": ".box {\n ", "initialCode": "", "codeSuffix": "\n}", + "solution": "padding: 1rem;", "previewContainer": "preview-area", "validations": [ { @@ -36,6 +37,7 @@ "codePrefix": ".box {\n ", "initialCode": "", "codeSuffix": "\n}", + "solution": "border: 2px solid darkslategray;", "previewContainer": "preview-area", "validations": [ { @@ -57,6 +59,7 @@ "codePrefix": ".outer {\n ", "initialCode": "", "codeSuffix": "\n}", + "solution": "margin: 1rem;", "previewContainer": "preview-area", "validations": [ { @@ -77,6 +80,7 @@ "codePrefix": ".sized {\n ", "initialCode": "", "codeSuffix": "\n}", + "solution": "box-sizing: border-box;", "previewContainer": "preview-area", "validations": [ { @@ -97,6 +101,7 @@ "codePrefix": ".first {\n ", "initialCode": "", "codeSuffix": "\n}", + "solution": "margin-bottom: 2rem;", "previewContainer": "preview-area", "validations": [ { @@ -117,6 +122,7 @@ "codePrefix": ".spaced {\n ", "initialCode": "", "codeSuffix": "\n}", + "solution": "margin: 1rem 2rem;", "previewContainer": "preview-area", "validations": [ { @@ -138,6 +144,7 @@ "codePrefix": ".padded {\n ", "initialCode": "", "codeSuffix": "\n}", + "solution": "padding: 1.5rem;", "previewContainer": "preview-area", "validations": [ { @@ -158,6 +165,7 @@ "codePrefix": ".line {\n ", "initialCode": "", "codeSuffix": "\n}", + "solution": "border-bottom: 4px solid dodgerblue;", "previewContainer": "preview-area", "validations": [ { diff --git a/lessons/de/05-units-variables.json b/lessons/de/05-units-variables.json index d90fee4..66d64df 100644 --- a/lessons/de/05-units-variables.json +++ b/lessons/de/05-units-variables.json @@ -16,6 +16,7 @@ "codePrefix": "/* Setze flexible Größen */\n.box {", "initialCode": "", "codeSuffix": "}", + "solution": " width: 80%;\n max-width: 37.5rem;", "previewContainer": "preview-area", "validations": [ { @@ -49,6 +50,7 @@ "codePrefix": "/* Definiere und verwende eine CSS-Variable */\n:root {", "initialCode": "", "codeSuffix": "}\n.themed { }", + "solution": " --main-color: #6200ee;\n}\n.themed {\n border-color: var(--main-color);", "previewContainer": "preview-area", "validations": [ { @@ -82,6 +84,7 @@ "codePrefix": "/* Verwende calc für dynamische Größen */\n.sized {", "initialCode": "", "codeSuffix": "}", + "solution": " width: calc(100% - 2rem);\n min-height: calc(10vh + 1rem);", "previewContainer": "preview-area", "validations": [ { "type": "contains", "value": "calc", "message": "Verwende die calc() Funktion", "options": { "caseSensitive": false } }, @@ -110,6 +113,7 @@ "codePrefix": "/* Verwende Viewport-Einheiten */\n.view {", "initialCode": "", "codeSuffix": "}", + "solution": " width: 50vw;\n height: 20vh;", "previewContainer": "preview-area", "validations": [ { "type": "contains", "value": "vw", "message": "Verwende vw Einheit", "options": { "caseSensitive": false } }, diff --git a/lessons/de/06-transitions-animations.json b/lessons/de/06-transitions-animations.json index dd7c3a4..8f4b78b 100644 --- a/lessons/de/06-transitions-animations.json +++ b/lessons/de/06-transitions-animations.json @@ -16,6 +16,7 @@ "codePrefix": "/* Füge Transition hinzu */\n.btn {", "initialCode": "", "codeSuffix": "}", + "solution": " transition: background-color 0.3s;", "previewContainer": "preview-area", "validations": [ { @@ -43,6 +44,7 @@ "codePrefix": "/* Setze Timing-Funktion */\n.btn {", "initialCode": "", "codeSuffix": "}", + "solution": " transition-timing-function: ease-in-out;", "previewContainer": "preview-area", "validations": [ { @@ -69,6 +71,7 @@ "codePrefix": "/* Definiere Keyframes und wende Animation an */\n@keyframes bounce {", "initialCode": "", "codeSuffix": "}\n.ball { }", + "solution": " 50% { transform: translateY(-20px); }\n}\n.ball {\n animation: bounce 1s infinite;", "previewContainer": "preview-area", "validations": [ { @@ -108,6 +111,7 @@ "codePrefix": "/* Definiere fade und setze Eigenschaften */\n@keyframes fade { from { opacity: 0; } to { opacity: 1; } }\n.box {", "initialCode": "", "codeSuffix": "}", + "solution": " animation-name: fade;\n animation-duration: 2s;\n animation-delay: 1s;\n animation-iteration-count: 2;\n animation-fill-mode: forwards;", "previewContainer": "preview-area", "validations": [ { diff --git a/lessons/de/08-responsive.json b/lessons/de/08-responsive.json index 964e3d3..dbbc060 100644 --- a/lessons/de/08-responsive.json +++ b/lessons/de/08-responsive.json @@ -16,6 +16,7 @@ "codePrefix": "/* Füge deine Media Query unten ein */\n", "initialCode": "", "codeSuffix": "", + "solution": "@media (max-width: 600px) {\n .panel {\n background: lightcoral;\n }\n}", "previewContainer": "preview-area", "validations": [ { @@ -55,6 +56,7 @@ "codePrefix": "/* Wende flüssige Schriftgröße an */\n.text {", "initialCode": "", "codeSuffix": "}", + "solution": " font-size: 5vw;", "previewContainer": "preview-area", "validations": [ { @@ -83,6 +85,7 @@ "codePrefix": "/* Erstelle ein responsives Raster */\n.cards {", "initialCode": "", "codeSuffix": "}", + "solution": " display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1rem;", "previewContainer": "preview-area", "validations": [ { @@ -111,6 +114,7 @@ "codePrefix": "/* Füge Mobile-First-Erweiterung hinzu */\n", "initialCode": "", "codeSuffix": "", + "solution": "@media (min-width: 768px) {\n .sidebar {\n width: 250px;\n }\n}", "previewContainer": "preview-area", "validations": [ { diff --git a/lessons/de/flexbox.json b/lessons/de/flexbox.json index b52775e..54b3a07 100644 --- a/lessons/de/flexbox.json +++ b/lessons/de/flexbox.json @@ -16,12 +16,13 @@ "codePrefix": ".wrap {\n ", "initialCode": "", "codeSuffix": "\n}", + "solution": "display: flex;", "previewContainer": "preview-area", "validations": [ { "type": "property_value", "value": { "property": "display", "expected": "flex" }, - "message": "Setze display auf flex" + "message": "Setze display: flex" } ] }, @@ -36,17 +37,20 @@ "codePrefix": ".wrap {\n ", "initialCode": "", "codeSuffix": "\n}", + "solution": "flex-direction: column;\n flex-wrap: wrap;", "previewContainer": "preview-area", "validations": [ { "type": "property_value", "value": { "property": "flex-direction", "expected": "column" }, - "message": "Setze flex-direction auf column" + "message": "Setze flex-direction: column", + "options": { "exact": true } }, { "type": "property_value", "value": { "property": "flex-wrap", "expected": "wrap" }, - "message": "Setze flex-wrap auf wrap" + "message": "Setze flex-wrap: wrap", + "options": { "exact": true } } ] }, @@ -61,12 +65,14 @@ "codePrefix": ".wrap {\n ", "initialCode": "", "codeSuffix": "\n}", + "solution": "justify-content: space-between;", "previewContainer": "preview-area", "validations": [ { "type": "property_value", "value": { "property": "justify-content", "expected": "space-between" }, - "message": "Setze justify-content auf space-between" + "message": "Setze justify-content: space-between", + "options": { "exact": true } } ] }, @@ -81,12 +87,14 @@ "codePrefix": ".wrap {\n ", "initialCode": "", "codeSuffix": "\n}", + "solution": "align-items: center;", "previewContainer": "preview-area", "validations": [ { "type": "property_value", "value": { "property": "align-items", "expected": "center" }, - "message": "Setze align-items auf center" + "message": "Setze align-items: center", + "options": { "exact": true } } ] }, @@ -94,19 +102,20 @@ "id": "flexbox-5", "title": "Flex Grow", "description": "Die flex-Eigenschaft ist eine Kurzform für flex-grow, flex-shrink und flex-basis. Ein höherer Wert bedeutet, dass das Element mehr vom verfügbaren Platz einnimmt. flex: 2 wächst doppelt so schnell wie flex: 1.", - "task": "Füge flex: 2 zu .green hinzu.", - "previewHTML": "
1
2
3
", - "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; display: flex; align-items: center; justify-content: center; } .red { background: coral; flex: 1; } .green { background: mediumseagreen; } .yellow { background: gold; flex: 1; }", + "task": "Füge flex: 2 zu .box2 hinzu.", + "previewHTML": "
1
2
3
", + "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; display: flex; align-items: center; justify-content: center; } .box1 { background: coral; flex: 1; } .box2 { background: mediumseagreen; } .box3 { background: gold; flex: 1; }", "sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; }", - "codePrefix": ".green {\n ", + "codePrefix": ".box2 {\n ", "initialCode": "", "codeSuffix": "\n}", + "solution": "flex: 2;", "previewContainer": "preview-area", "validations": [ { "type": "property_value", "value": { "property": "flex", "expected": "2" }, - "message": "Setze flex auf 2" + "message": "Setze flex: 2" } ] }, @@ -121,12 +130,13 @@ "codePrefix": ".middle {\n ", "initialCode": "", "codeSuffix": "\n}", + "solution": "align-self: flex-start;", "previewContainer": "preview-area", "validations": [ { "type": "property_value", "value": { "property": "align-self", "expected": "flex-start" }, - "message": "Setze align-self auf flex-start" + "message": "Setze align-self: flex-start" } ] }