Michael Czechowski
be9c753a0e
New CSS Modules: - Gradients (3 lessons): linear-gradient, radial-gradient, direction - Filters (4 lessons): blur, grayscale, brightness, drop-shadow - Positioning (4 lessons): relative, absolute, offset properties - Pseudo-elements (4 lessons): ::before, ::after, content, decorative New HTML Module: - Semantic HTML (3 lessons): article, section, aside Expanded Existing Modules: - Typography: +2 lessons (text-decoration, text-shadow) - Tables: +2 lessons (thead/tbody/tfoot, colspan) Total lessons: 101 (up from ~66) - Enables full milestone system (1, 5, 10, 20, 30, 50, 75, 100) - All modules added to all 6 language stores with EN fallback
114 lines
4.9 KiB
JSON
114 lines
4.9 KiB
JSON
{
|
|
"$schema": "../schemas/code-crispies-module-schema.json",
|
|
"id": "css-pseudo-elements",
|
|
"title": "CSS Pseudo-elements",
|
|
"description": "Create decorative elements and style specific parts of content with pseudo-elements.",
|
|
"difficulty": "intermediate",
|
|
"lessons": [
|
|
{
|
|
"id": "pseudo-1",
|
|
"title": "The ::before Element",
|
|
"description": "Pseudo-elements let you style specific parts of an element. <kbd>::before</kbd> creates a virtual element as the first child.<br><br>It requires the <kbd>content</kbd> property to display anything (even if empty).<br><br><pre>.item::before {\n content: \"→ \";\n}</pre>",
|
|
"task": "Add a bullet before each list item using <kbd>::before</kbd> with <kbd>content: \"• \"</kbd>.",
|
|
"previewHTML": "<ul class=\"list\"><li>First item</li><li>Second item</li><li>Third item</li></ul>",
|
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .list { list-style: none; padding: 0; margin: 0; } .list li { padding: 8px 0; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": ".list li::before {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"solution": "content: \"• \";",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "contains",
|
|
"value": "content",
|
|
"message": "Use the <kbd>content</kbd> property"
|
|
},
|
|
{
|
|
"type": "contains",
|
|
"value": "•",
|
|
"message": "Add a bullet character <kbd>•</kbd>"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "pseudo-2",
|
|
"title": "Styling ::before",
|
|
"description": "Pseudo-elements can be styled like any element. Add color, size, margins, and more.<br><br><pre>.item::before {\n content: \"★\";\n color: gold;\n margin-right: 8px;\n}</pre>",
|
|
"task": "Style the bullet with <kbd>color: coral</kbd>.",
|
|
"previewHTML": "<ul class=\"list\"><li>First item</li><li>Second item</li><li>Third item</li></ul>",
|
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .list { list-style: none; padding: 0; margin: 0; } .list li { padding: 8px 0; } .list li::before { content: \"• \"; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": ".list li::before {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"solution": "color: coral;",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "color", "expected": "coral" },
|
|
"message": "Set <kbd>color: coral</kbd>"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "pseudo-3",
|
|
"title": "The ::after Element",
|
|
"description": "<kbd>::after</kbd> works like <kbd>::before</kbd> but inserts content as the last child. Common uses include badges, icons, or decorative elements.<br><br><pre>.new::after {\n content: \" ✓\";\n color: green;\n}</pre>",
|
|
"task": "Add a checkmark after completed items with <kbd>content: \" ✓\"</kbd>.",
|
|
"previewHTML": "<ul class=\"list\"><li class=\"done\">Buy groceries</li><li class=\"done\">Walk the dog</li><li>Read a book</li></ul>",
|
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .list { list-style: none; padding: 0; margin: 0; } .list li { padding: 8px 0; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": ".done::after {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"solution": "content: \" ✓\";",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "contains",
|
|
"value": "content",
|
|
"message": "Use the <kbd>content</kbd> property"
|
|
},
|
|
{
|
|
"type": "contains",
|
|
"value": "✓",
|
|
"message": "Add a checkmark <kbd>✓</kbd>"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "pseudo-4",
|
|
"title": "Decorative Lines",
|
|
"description": "Pseudo-elements with <kbd>content: \"\"</kbd> can create decorative shapes when combined with width, height, and background.<br><br><pre>.title::after {\n content: \"\";\n display: block;\n width: 50px;\n height: 3px;\n background: coral;\n}</pre>",
|
|
"task": "Create an underline decoration with <kbd>width: 40px</kbd>, <kbd>height: 3px</kbd>, and <kbd>background: steelblue</kbd>.",
|
|
"previewHTML": "<h2 class=\"title\">About Us</h2><p>We build great things.</p>",
|
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .title { margin: 0 0 1rem; } .title::after { content: \"\"; display: block; margin-top: 8px; } p { margin: 0; color: #666; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": ".title::after {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"solution": "width: 40px;\n height: 3px;\n background: steelblue;",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "width", "expected": "40px" },
|
|
"message": "Set <kbd>width: 40px</kbd>"
|
|
},
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "height", "expected": "3px" },
|
|
"message": "Set <kbd>height: 3px</kbd>"
|
|
},
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "background", "expected": "steelblue" },
|
|
"message": "Set <kbd>background: steelblue</kbd>"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|