Michael Czechowski
76e7e40256
- Add CSS Colors, Typography, Advanced Selectors, and Grid modules - Remove deprecated HTML Marquee module from all languages - Remove redundant div & span lesson from HTML Block & Inline - Move SVG module from HTML to CSS section - Enhance first lessons with comprehensive explanations: - Flexbox: historical context, axes concept - Colors: named colors, background-color explained - Grid: comparison to Flexbox, key properties - Swap header logo highlight (CRISPIES instead of CODE) - Use English fallbacks for new modules in non-EN languages - Fix test to include 'playground' mode New path: 19 modules (~78 lessons) vs previous 16 modules (62 lessons) 🤖 Generated with [Claude Code](https://claude.com/claude-code)
69 lines
3.8 KiB
JSON
69 lines
3.8 KiB
JSON
{
|
|
"$schema": "../../schemas/code-crispies-module-schema.json",
|
|
"id": "html-elements",
|
|
"title": "HTML Block & Inline",
|
|
"description": "Verstehe den grundlegenden Unterschied zwischen Container- (Block-) und Inline-Elementen",
|
|
"mode": "html",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "block-vs-inline-intro",
|
|
"title": "Block- vs Inline-Elemente",
|
|
"description": "HTML-Elemente fallen in zwei Hauptkategorien:<br><br><strong>Block-Elemente</strong> (Container) beginnen in einer neuen Zeile und nehmen die volle Breite ein. Beispiele: <kbd><div></kbd>, <kbd><p></kbd>, <kbd><h1></kbd>, <kbd><section></kbd><br><br><strong>Inline-Elemente</strong> fließen innerhalb des Textes und nehmen nur die benötigte Breite ein. Beispiele: <kbd><span></kbd>, <kbd><a></kbd>, <kbd><strong></kbd>, <kbd><em></kbd>",
|
|
"task": "Umschließe das Wort <kbd>wichtigen</kbd> mit <kbd><strong></kbd>-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": "<p>Dies ist ein Absatz mit einem wichtigen Wort.</p>",
|
|
"solution": "<p>Dies ist ein Absatz mit einem <strong>wichtigen</strong> Wort.</p>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "p",
|
|
"message": "Füge ein <kbd><p></kbd> Absatz-Element hinzu"
|
|
},
|
|
{
|
|
"type": "parent_child",
|
|
"value": { "parent": "p", "child": "strong" },
|
|
"message": "Umschließe das Wort 'wichtigen' mit <kbd><strong></kbd>-Tags"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"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 <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 2026</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": "",
|
|
"initialCode": "",
|
|
"solution": "<header>\n <h1>Meine Webseite</h1>\n</header>\n<main>\n <p>Willkommen auf meiner Seite!</p>\n</main>\n<footer>\n <p>Copyright 2026</p>\n</footer>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "header",
|
|
"message": "Füge ein <kbd><header></kbd>-Element hinzu"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "main",
|
|
"message": "Füge ein <kbd><main></kbd>-Element hinzu"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "footer",
|
|
"message": "Füge ein <kbd><footer></kbd>-Element hinzu"
|
|
},
|
|
{
|
|
"type": "parent_child",
|
|
"value": { "parent": "header", "child": "h1" },
|
|
"message": "Füge eine <kbd><h1></kbd>-Überschrift in deinem Header hinzu"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|