diff --git a/lessons/de/00-basic-selectors.json b/lessons/de/00-basic-selectors.json index 1138238..592852c 100644 --- a/lessons/de/00-basic-selectors.json +++ b/lessons/de/00-basic-selectors.json @@ -1,7 +1,7 @@ { "$schema": "../../schemas/code-crispies-module-schema.json", "id": "css-basic-selectors", - "title": "CSS: Grundlegende Selektoren", + "title": "CSS Selektoren", "description": "CSS-Selektoren sind die Grundlage für das Stylen von Webseiten und ermöglichen es dir, bestimmte HTML-Elemente für die Gestaltung auszuwählen. Dieses Modul stellt grundlegende Selektortypen vor, einschließlich Element-Typ-Selektoren, Klassen-Selektoren, ID-Selektoren und des universellen Selektors.", "difficulty": "beginner", "lessons": [ diff --git a/lessons/de/01-box-model.json b/lessons/de/01-box-model.json index 56212b7..b012a2a 100644 --- a/lessons/de/01-box-model.json +++ b/lessons/de/01-box-model.json @@ -1,7 +1,7 @@ { "$schema": "../../schemas/code-crispies-module-schema.json", "id": "box-model", - "title": "Padding, Borders und Margins", + "title": "CSS Box Model", "description": "Beherrsche die Grundprinzipien der Raumverwaltung im Webdesign durch das CSS Box-Modell.", "difficulty": "beginner", "lessons": [ diff --git a/lessons/de/05-units-variables.json b/lessons/de/05-units-variables.json index 03fe298..d90fee4 100644 --- a/lessons/de/05-units-variables.json +++ b/lessons/de/05-units-variables.json @@ -1,7 +1,7 @@ { "$schema": "../../schemas/code-crispies-module-schema.json", "id": "units-variables", - "title": "Einheiten, var() und calc()", + "title": "CSS Einheiten & Variablen", "description": "Verstehe die Vielfalt der CSS-Maßeinheiten und wie du Custom Properties für wartbare Stile definierst und verwendest.", "difficulty": "beginner", "lessons": [ diff --git a/lessons/de/06-transitions-animations.json b/lessons/de/06-transitions-animations.json index 3e6e2b6..80c7976 100644 --- a/lessons/de/06-transitions-animations.json +++ b/lessons/de/06-transitions-animations.json @@ -1,7 +1,7 @@ { "$schema": "../../schemas/code-crispies-module-schema.json", "id": "transitions-animations", - "title": "Transitions & Animationen", + "title": "CSS Animationen", "description": "Bringe Interaktivität in dein UI durch sanfte Eigenschaftsübergänge und Keyframe-gesteuerte Animationen.", "difficulty": "beginner", "lessons": [ diff --git a/lessons/de/08-responsive.json b/lessons/de/08-responsive.json index a7bd8c9..964e3d3 100644 --- a/lessons/de/08-responsive.json +++ b/lessons/de/08-responsive.json @@ -1,7 +1,7 @@ { "$schema": "../../schemas/code-crispies-module-schema.json", "id": "responsive-design", - "title": "Responsive Design & Media Queries", + "title": "CSS Responsive Design", "description": "Passe deine Layouts an verschiedene Bildschirmgrößen an mit Media Queries und flüssigen Design-Techniken.", "difficulty": "intermediate", "lessons": [ diff --git a/lessons/de/20-html-elements.json b/lessons/de/20-html-elements.json index dc9ad7e..7a53d02 100644 --- a/lessons/de/20-html-elements.json +++ b/lessons/de/20-html-elements.json @@ -1,7 +1,7 @@ { "$schema": "../../schemas/code-crispies-module-schema.json", "id": "html-elements", - "title": "HTML-Elemente: Block vs Inline", + "title": "HTML Block & Inline", "description": "Verstehe den grundlegenden Unterschied zwischen Container- (Block-) und Inline-Elementen", "mode": "html", "difficulty": "beginner", diff --git a/lessons/de/21-html-forms-basic.json b/lessons/de/21-html-forms-basic.json index 226d40b..df53167 100644 --- a/lessons/de/21-html-forms-basic.json +++ b/lessons/de/21-html-forms-basic.json @@ -1,7 +1,7 @@ { "$schema": "../../schemas/code-crispies-module-schema.json", "id": "html-forms-basic", - "title": "HTML-Formulare: Grundlegende Eingaben", + "title": "HTML Formulare", "description": "Lerne, Formulare mit verschiedenen Eingabetypen zu erstellen", "mode": "html", "difficulty": "beginner", diff --git a/lessons/de/22-html-forms-validation.json b/lessons/de/22-html-forms-validation.json index 4d49b12..a9a4031 100644 --- a/lessons/de/22-html-forms-validation.json +++ b/lessons/de/22-html-forms-validation.json @@ -1,7 +1,7 @@ { "$schema": "../../schemas/code-crispies-module-schema.json", "id": "html-forms-validation", - "title": "HTML-Formulare: Validierung", + "title": "HTML Validierung", "description": "Lerne die eingebauten HTML5-Formular-Validierungsattribute kennen", "mode": "html", "difficulty": "intermediate", diff --git a/lessons/de/23-html-details-summary.json b/lessons/de/23-html-details-summary.json index e09fb49..e8aaed6 100644 --- a/lessons/de/23-html-details-summary.json +++ b/lessons/de/23-html-details-summary.json @@ -1,7 +1,7 @@ { "$schema": "../../schemas/code-crispies-module-schema.json", "id": "html-details-summary", - "title": "Details & Summary: Aufklapp-Elemente", + "title": "HTML Details & Summary", "description": "Erstelle aufklappbare Inhaltsbereiche ohne JavaScript", "mode": "html", "difficulty": "beginner", diff --git a/lessons/de/24-html-progress-meter.json b/lessons/de/24-html-progress-meter.json index 940097b..a5f781e 100644 --- a/lessons/de/24-html-progress-meter.json +++ b/lessons/de/24-html-progress-meter.json @@ -1,7 +1,7 @@ { "$schema": "../../schemas/code-crispies-module-schema.json", "id": "html-progress-meter", - "title": "Progress & Meter Elemente", + "title": "HTML Progress & Meter", "description": "Zeige Fortschritt und Messwerte nativ an", "mode": "html", "difficulty": "beginner", diff --git a/lessons/de/30-html-tables.json b/lessons/de/30-html-tables.json index 4c9b33d..5134298 100644 --- a/lessons/de/30-html-tables.json +++ b/lessons/de/30-html-tables.json @@ -1,7 +1,7 @@ { "$schema": "../../schemas/code-crispies-module-schema.json", "id": "html-tables", - "title": "HTML-Tabellen", + "title": "HTML Tabellen", "description": "Erstelle strukturierte Datentabellen mit Überschriften und Beschriftungen", "mode": "html", "difficulty": "beginner", diff --git a/lessons/de/31-html-marquee.json b/lessons/de/31-html-marquee.json index 18fa5f6..62985f7 100644 --- a/lessons/de/31-html-marquee.json +++ b/lessons/de/31-html-marquee.json @@ -1,7 +1,7 @@ { "$schema": "../../schemas/code-crispies-module-schema.json", "id": "html-marquee", - "title": "Das Marquee-Element", + "title": "HTML Marquee", "description": "Erstelle Lauftext mit dem klassischen (veralteten aber lustigen!) Marquee-Element", "mode": "html", "difficulty": "beginner", diff --git a/lessons/de/32-html-svg.json b/lessons/de/32-html-svg.json index 16ce8b2..0beecf1 100644 --- a/lessons/de/32-html-svg.json +++ b/lessons/de/32-html-svg.json @@ -1,7 +1,7 @@ { "$schema": "../../schemas/code-crispies-module-schema.json", "id": "html-svg", - "title": "SVG Grundlagen", + "title": "HTML SVG", "description": "Zeichne skalierbare Vektorgrafiken direkt in HTML", "mode": "html", "difficulty": "beginner", diff --git a/lessons/de/flexbox.json b/lessons/de/flexbox.json index f594d60..b52775e 100644 --- a/lessons/de/flexbox.json +++ b/lessons/de/flexbox.json @@ -7,10 +7,10 @@ "lessons": [ { "id": "flexbox-1", - "title": "Flexbox Container Grundlagen", - "description": "Lerne, wie du einen Flex-Container erstellst und die Haupt- und Querachse verstehst.", - "task": "Füge display: flex zu .wrap hinzu, um ein Flexbox-Layout zu erstellen.", - "previewHTML": "
1
2
3
", + "title": "Flex Container", + "description": "Flexbox ist ein eindimensionales Layout-System. Mit display: flex wird ein Element zum Flex-Container. Alle direkten Kinder werden automatisch zu Flex-Items und richten sich horizontal (Hauptachse) aus. Die Querachse verläuft senkrecht dazu.", + "task": "Füge display: flex zu .wrap hinzu.", + "previewHTML": "
1
2
3
", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; }", "sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; }", "codePrefix": ".wrap {\n ", @@ -27,10 +27,10 @@ }, { "id": "flexbox-2", - "title": "Flex-Richtung und Umbruch", - "description": "Steuere die Richtung und den Umbruch von Flex-Elementen innerhalb eines Containers.", - "task": "Füge flex-direction: column und flex-wrap: wrap zu .wrap hinzu.", - "previewHTML": "
1
2
3
4
5
", + "title": "Direction & Wrap", + "description": "flex-direction bestimmt die Hauptachse: row (horizontal, Standard) oder column (vertikal). Mit flex-wrap: wrap brechen Items in die nächste Zeile/Spalte um, wenn der Platz nicht reicht.", + "task": "Füge flex-direction: column und flex-wrap: wrap zu .wrap hinzu.", + "previewHTML": "
1
2
3
4
5
", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; }", "sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; height: 16rem; display: flex; }", "codePrefix": ".wrap {\n ", @@ -53,9 +53,9 @@ { "id": "flexbox-3", "title": "Justify Content", - "description": "Lerne, wie du Flex-Elemente entlang der Hauptachse des Containers ausrichtest.", - "task": "Füge justify-content: space-between zu .wrap hinzu, um die Boxen gleichmäßig zu verteilen.", - "previewHTML": "
1
2
3
", + "description": "justify-content verteilt Items entlang der Hauptachse. Werte: flex-start (Anfang), flex-end (Ende), center (Mitte), space-between (gleichmäßig mit Abstand), space-around (gleichmäßig mit Rand).", + "task": "Füge justify-content: space-between zu .wrap hinzu.", + "previewHTML": "
1
2
3
", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; }", "sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; }", "codePrefix": ".wrap {\n ", @@ -73,9 +73,9 @@ { "id": "flexbox-4", "title": "Align Items", - "description": "Steuere, wie Flex-Elemente entlang der Querachse des Containers ausgerichtet werden.", - "task": "Füge align-items: center zu .wrap hinzu, um die Boxen vertikal zu zentrieren.", - "previewHTML": "
1
2
3
", + "description": "align-items richtet Items entlang der Querachse aus (bei row: vertikal). Werte: stretch (Standard, füllt Höhe), flex-start (oben), flex-end (unten), center (Mitte), baseline (Textlinie).", + "task": "Füge align-items: center zu .wrap hinzu.", + "previewHTML": "
1
2
3
", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; width: 3rem; display: flex; justify-content: center; } .tall { height: 6rem; } .short { height: 3rem; }", "sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 10rem; }", "codePrefix": ".wrap {\n ", @@ -93,12 +93,12 @@ { "id": "flexbox-5", "title": "Flex Grow", - "description": "Die flex Eigenschaft steuert, wie stark ein Element im Verhältnis zu anderen wächst.", - "task": "Füge flex: 2 zu .box2 hinzu, um sie doppelt so breit wachsen zu lassen.", - "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; }", + "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; }", "sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; }", - "codePrefix": ".box2 {\n ", + "codePrefix": ".green {\n ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", @@ -113,9 +113,9 @@ { "id": "flexbox-6", "title": "Align Self", - "description": "Verwende align-self, um die Ausrichtung für ein einzelnes Flex-Element zu überschreiben.", - "task": "Füge align-self: flex-start zu .middle hinzu, um es nach oben zu verschieben.", - "previewHTML": "
1
2
3
", + "description": "align-self überschreibt align-items für ein einzelnes Element. So kannst du ein Item individuell auf der Querachse positionieren, während alle anderen Items ihrer Standard-Ausrichtung folgen.", + "task": "Füge align-self: flex-start zu .middle hinzu.", + "previewHTML": "
1
2
3
", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; } .middle { background: mediumseagreen; }", "sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 12rem; align-items: center; }", "codePrefix": ".middle {\n ", diff --git a/src/main.css b/src/main.css index b53b672..24366a7 100644 --- a/src/main.css +++ b/src/main.css @@ -259,6 +259,20 @@ code, kbd { margin-bottom: var(--spacing-sm); } +.completion-badge { + display: inline-block; + margin-left: 0.5rem; + padding: 0.15rem 0.5rem; + background: var(--success-color); + color: white; + font-size: 0.7rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; + border-radius: var(--border-radius-sm); + vertical-align: middle; +} + .lesson-description { font-size: 0.95rem; line-height: 1.6; @@ -645,6 +659,13 @@ code, kbd { border-bottom: none; } +/* Make the lessons nav section fill available space */ +nav.sidebar-section { + flex: 1; + overflow-y: auto; + min-height: 0; +} + .sidebar-section h4 { font-size: 0.75rem; text-transform: uppercase;