Michael Czechowski
c560676544
Rewrite ~120 validation error messages across 17 English lesson modules and their localized variants (ar, de, es, pl, uk) to use concept questions, property hints, and directional nudges instead of revealing the exact CSS property-value answers. Priority modules (flexbox, box-model, colors, positioning) fully rewritten. All remaining CSS modules updated. Only message strings changed — no validation logic modifications.
94 lines
5.0 KiB
JSON
94 lines
5.0 KiB
JSON
{
|
|
"$schema": "../schemas/code-crispies-module-schema.json",
|
|
"id": "colors-backgrounds",
|
|
"title": "CSS Colors",
|
|
"description": "Learn how to apply colors to text and backgrounds using CSS properties.",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "colors-1",
|
|
"title": "Background Color",
|
|
"description": "Color is one of the most powerful tools in web design. It creates visual hierarchy, conveys meaning, and establishes brand identity. CSS provides multiple ways to specify colors.<br><br><strong>CSS named colors:</strong> CSS includes 147 named colors like <kbd>steelblue</kbd>, <kbd>coral</kbd>, <kbd>gold</kbd>, and <kbd>tomato</kbd>. These are easy to remember and read.<br><br><strong>The background-color property:</strong> Sets the fill color behind an element's content and padding areas.<br><br><pre>.card {\n background-color: lightblue;\n}</pre>",
|
|
"task": "This notification card needs a subtle background. Add <kbd>background-color: seashell</kbd>.",
|
|
"previewHTML": "<div class=\"alert\"><strong>New message</strong><p>You have 3 unread notifications</p></div>",
|
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .alert { padding: 1rem; border-left: 4px solid coral; border-radius: 4px; } .alert strong { display: block; margin-bottom: 4px; } .alert p { margin: 0; color: #666; font-size: 0.9rem; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": ".alert {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"solution": "background-color: seashell;",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "background-color", "expected": "seashell" },
|
|
"message": "Which property sets the fill color behind an element's content area?"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "colors-2",
|
|
"title": "Text Color",
|
|
"description": "The <kbd>color</kbd> property sets the color of text content. Good contrast between text and background is essential for readability and accessibility.",
|
|
"task": "Make the alert title stand out. Add <kbd>color: coral</kbd>.",
|
|
"previewHTML": "<div class=\"alert\"><strong class=\"title\">Warning</strong><p>Your session will expire in 5 minutes</p></div>",
|
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .alert { padding: 1rem; background-color: seashell; border-left: 4px solid coral; border-radius: 4px; } .alert .title { display: block; margin-bottom: 4px; } .alert p { margin: 0; color: #666; font-size: 0.9rem; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": ".title {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"solution": "color: coral;",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "color", "expected": "coral" },
|
|
"message": "Which CSS property changes the color of text content?"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "colors-3",
|
|
"title": "Border Color",
|
|
"description": "Borders can have their own color using <kbd>border-color</kbd>. This is useful when you want to change just the color without redefining the entire border.",
|
|
"task": "This card needs an accent border. Add <kbd>border-color: coral</kbd>.",
|
|
"previewHTML": "<article class=\"card\"><h3>Premium Plan</h3><p>Unlimited access to all features</p></article>",
|
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { padding: 1rem; background: white; border: 4px solid #ddd; border-radius: 8px; } .card h3 { margin: 0 0 8px; } .card p { margin: 0; color: #666; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": ".card {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"solution": "border-color: coral;",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "border-color", "expected": "coral" },
|
|
"message": "Which property changes just the color of an existing border?"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "colors-4",
|
|
"title": "Hex Colors",
|
|
"description": "Beyond named colors, CSS supports hex codes (<kbd>#ff6347</kbd>), RGB (<kbd>rgb(255, 99, 71)</kbd>), and HSL (<kbd>hsl(9, 100%, 64%)</kbd>). Hex codes are the most common format in professional projects.",
|
|
"task": "Set the badge background to gold using its hex code. Add <kbd>background-color: #ffd700</kbd>.",
|
|
"previewHTML": "<span class=\"badge\">NEW</span>",
|
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 0.75rem; font-weight: bold; text-transform: uppercase; color: #333; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": ".badge {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"solution": "background-color: #ffd700;",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "background-color", "expected": "#ffd700" },
|
|
"message": "Set the <kbd>background-color</kbd> using a hex code format"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|