Michael Czechowski
2198a8ccc6
- Replace single quotes with <kbd> tags in validation messages - German and English lessons updated for consistent formatting - Move task instruction before description in UI (index.html)
114 lines
4.2 KiB
JSON
114 lines
4.2 KiB
JSON
{
|
|
"$schema": "../schemas/code-crispies-module-schema.json",
|
|
"id": "selectors",
|
|
"title": "Specificity",
|
|
"description": "Master the art of targeting HTML elements using various CSS selectors, from basics to specificity rules.",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "selectors-1",
|
|
"title": "Element Selectors",
|
|
"description": "Learn to target HTML elements by their tag name and apply styling.",
|
|
"task": "Use the element selector to make all <code><p></code> tags have a dark gray color.",
|
|
"previewHTML": "<p>This paragraph should be dark gray.</p><p>This one too!</p>",
|
|
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": "/* Style all paragraphs */\n",
|
|
"initialCode": "",
|
|
"codeSuffix": "",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{ "type": "contains", "value": "p {", "message": "Use the element selector <kbd>p</kbd>", "options": { "caseSensitive": false } },
|
|
{ "type": "contains", "value": "color", "message": "Include the <kbd>color</kbd> property", "options": { "caseSensitive": false } },
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "color", "expected": "darkgray" },
|
|
"message": "Set color to <kbd>darkgray</kbd>",
|
|
"options": { "exact": false }
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "selectors-2",
|
|
"title": "Class Selectors",
|
|
"description": "Use class selectors to style elements sharing the same class name.",
|
|
"task": "Apply a blueviolet text color to any element with the class 'title'.",
|
|
"previewHTML": "<h2 class=\"title\">Hello World</h2><h2>Another Heading</h2>",
|
|
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": "/* Style elements with class 'title' */\n",
|
|
"initialCode": "",
|
|
"codeSuffix": "",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "contains",
|
|
"value": ".title",
|
|
"message": "Use the <kbd>.title</kbd> class selector",
|
|
"options": { "caseSensitive": false }
|
|
},
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "color", "expected": "blueviolet" },
|
|
"message": "Set color to <kbd>blueviolet</kbd>",
|
|
"options": { "exact": false }
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "selectors-3",
|
|
"title": "ID Selectors",
|
|
"description": "Target a unique element by its ID to apply specific styling.",
|
|
"task": "Make the element with <code>id=\"description\"</code> have orangered text.",
|
|
"previewHTML": "<div id=\"description\">This is the description text.</div><div>This is another div.</div>",
|
|
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": "/* Style the element with ID 'description' */\n",
|
|
"initialCode": "",
|
|
"codeSuffix": "",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "contains",
|
|
"value": "#description",
|
|
"message": "Use the <kbd>#description</kbd> ID selector",
|
|
"options": { "caseSensitive": false }
|
|
},
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "color", "expected": "orangered" },
|
|
"message": "Set color to <kbd>orangered</kbd>",
|
|
"options": { "exact": false }
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "selectors-4",
|
|
"title": "Combined Selectors & Specificity",
|
|
"description": "Discover how combining selectors controls which rules take precedence.",
|
|
"task": "Use a class and element selector together (e.g., <code>div.note</code>) to give a yellow background to the note box.",
|
|
"previewHTML": "<div class=\"note\">Important note!</div><div>Regular div</div>",
|
|
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": "/* Style div with class 'note' */\n",
|
|
"initialCode": "",
|
|
"codeSuffix": "",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "contains",
|
|
"value": "div.note",
|
|
"message": "Use the <kbd>div.note</kbd> combined selector",
|
|
"options": { "caseSensitive": false }
|
|
},
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "background-color", "expected": "yellow" },
|
|
"message": "Set background-color to <kbd>yellow</kbd>",
|
|
"options": { "exact": false }
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|