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.
151 lines
8.9 KiB
JSON
151 lines
8.9 KiB
JSON
{
|
|
"$schema": "../schemas/code-crispies-module-schema.json",
|
|
"id": "typography-fonts",
|
|
"title": "Typography",
|
|
"description": "Learn how to control text appearance through font selection, sizing, spacing, and styling.",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "monospace-font",
|
|
"title": "Monospace Fonts",
|
|
"description": "Different font families create different visual impressions. <kbd>monospace</kbd> fonts have equal-width characters, making them perfect for displaying code, data, or keyboard shortcuts.<br><br>Every computer has a monospace font built in, so <kbd>font-family: monospace</kbd> always works. This makes it a safe choice for inline code in any web project.",
|
|
"task": "Style the inline code with a monospace font. Add <kbd>font-family: monospace</kbd>.",
|
|
"previewHTML": "<article>\n <h3>Quick Tip</h3>\n <p>Press <span class=\"code\">Ctrl + S</span> to save your work, or <span class=\"code\">Ctrl + Z</span> to undo.</p>\n</article>",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } h3 { margin: 0 0 0.5rem; } p { margin: 0; color: #555; line-height: 1.6; } .code { background: #f0f0f0; padding: 0.2rem 0.4rem; border-radius: 4px; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": ".code {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"previewContainer": "preview-area",
|
|
"solution": "font-family: monospace;",
|
|
"validations": [
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "font-family", "expected": "monospace" },
|
|
"message": "Set font-family to <kbd>monospace</kbd>"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "font-size-line-height",
|
|
"title": "Readable Body Text",
|
|
"description": "Good typography is invisible—readers focus on content, not struggling to read it. Two properties work together for readability:<br><br><kbd>font-size</kbd> controls how big the text appears. For body text, <kbd>1rem</kbd> (16px by default) is a comfortable starting point.<br><br><kbd>line-height</kbd> sets the space between lines. A value of <kbd>1.6</kbd> means the line height is 1.6 times the font size—giving text room to breathe.",
|
|
"task": "Make the text comfortable to read. Add <kbd>font-size: 1rem</kbd> and <kbd>line-height: 1.6</kbd>.",
|
|
"previewHTML": "<article>\n <h2>The Art of Coffee</h2>\n <p>Great coffee starts with quality beans. The roast level affects flavor—light roasts are fruity and acidic, while dark roasts are bold and smoky.</p>\n <p>Water temperature matters too. Brew between 90-96°C for optimal extraction. Too hot burns the coffee; too cold leaves it weak.</p>\n</article>",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } h2 { margin: 0 0 1rem; color: #333; } p { margin: 0 0 1rem; color: #444; } p:last-child { margin-bottom: 0; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": "article {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"previewContainer": "preview-area",
|
|
"solution": "font-size: 1rem;\n line-height: 1.6;",
|
|
"validations": [
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "font-size", "expected": "1rem" },
|
|
"message": "Set font-size to <kbd>1rem</kbd>"
|
|
},
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "line-height", "expected": "1.6" },
|
|
"message": "Set line-height to <kbd>1.6</kbd>"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "font-weight",
|
|
"title": "Bold Headings",
|
|
"description": "Font weight controls how thick or thin text appears. Common values include:<br><br>• <kbd>normal</kbd> (400) — default body text<br>• <kbd>bold</kbd> (700) — strong emphasis<br>• <kbd>lighter</kbd> / <kbd>bolder</kbd> — relative to parent<br><br>Card titles and headings often use bold text to create visual hierarchy and draw attention to key information.",
|
|
"task": "Make the card title stand out. Add <kbd>font-weight: bold</kbd>.",
|
|
"previewHTML": "<article class=\"card\">\n <span class=\"title\">Weekend Special</span>\n <p>Fresh pastries and artisan coffee, 20% off all items this Saturday and Sunday.</p>\n</article>",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } .card { background: #f8f9fa; padding: 1.5rem; border-radius: 8px; max-width: 320px; } .title { display: block; font-size: 1.25rem; color: steelblue; margin-bottom: 0.5rem; font-weight: normal; } p { margin: 0; color: #555; line-height: 1.5; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": ".title {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"previewContainer": "preview-area",
|
|
"solution": "font-weight: bold;",
|
|
"validations": [
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "font-weight", "expected": "bold" },
|
|
"message": "Set font-weight to <kbd>bold</kbd>"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "text-transform",
|
|
"title": "Uppercase Labels",
|
|
"description": "The <kbd>text-transform</kbd> property changes text capitalization without editing the HTML. This keeps content semantic while styling it differently:<br><br>• <kbd>uppercase</kbd> — ALL CAPS (great for labels, buttons)<br>• <kbd>lowercase</kbd> — all lowercase<br>• <kbd>capitalize</kbd> — First Letter Of Each Word<br><br>Combined with <kbd>letter-spacing</kbd>, uppercase text creates a clean, modern label style often used in UI design.",
|
|
"task": "Style the tag labels. Add <kbd>text-transform: uppercase</kbd> and <kbd>letter-spacing: 1px</kbd>.",
|
|
"previewHTML": "<article>\n <div class=\"tags\">\n <span class=\"tag\">Design</span>\n <span class=\"tag\">CSS</span>\n <span class=\"tag\">Tutorial</span>\n </div>\n <h3>Getting Started with Typography</h3>\n <p>Learn the fundamentals of web typography in this beginner-friendly guide.</p>\n</article>",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } .tags { display: flex; gap: 0.5rem; margin-bottom: 1rem; } .tag { background: #e8f4f8; color: steelblue; padding: 0.25rem 0.75rem; border-radius: 4px; font-size: 0.75rem; } h3 { margin: 0 0 0.5rem; } p { margin: 0; color: #555; line-height: 1.5; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": ".tag {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"previewContainer": "preview-area",
|
|
"solution": "text-transform: uppercase;\n letter-spacing: 1px;",
|
|
"validations": [
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "text-transform", "expected": "uppercase" },
|
|
"message": "Set text-transform to <kbd>uppercase</kbd>"
|
|
},
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "letter-spacing", "expected": "1px" },
|
|
"message": "Set letter-spacing to <kbd>1px</kbd>"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "text-decoration",
|
|
"title": "Text Decoration",
|
|
"description": "The <kbd>text-decoration</kbd> property adds lines to text. Common values:<br><br>• <kbd>underline</kbd> — line below text<br>• <kbd>line-through</kbd> — strikethrough<br>• <kbd>none</kbd> — removes decoration (useful for links)<br><br>You can also style decorations with <kbd>text-decoration-color</kbd> and <kbd>text-decoration-style</kbd>.",
|
|
"task": "Show the old price with a strikethrough. Add <kbd>text-decoration: line-through</kbd>.",
|
|
"previewHTML": "<div class=\"price-box\"><span class=\"old-price\">$49.99</span><span class=\"new-price\">$29.99</span></div>",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } .price-box { display: flex; gap: 1rem; align-items: center; } .old-price { color: #999; font-size: 1rem; } .new-price { color: coral; font-size: 1.5rem; font-weight: bold; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": ".old-price {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"previewContainer": "preview-area",
|
|
"solution": "text-decoration: line-through;",
|
|
"validations": [
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "text-decoration", "expected": "line-through" },
|
|
"message": "Set text-decoration to <kbd>line-through</kbd>"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "text-shadow",
|
|
"title": "Text Shadow",
|
|
"description": "The <kbd>text-shadow</kbd> property adds shadow effects to text. The syntax is:<br><br><pre>text-shadow: x-offset y-offset blur color;</pre><br>Example: <kbd>text-shadow: 2px 2px 4px gray</kbd> creates a soft shadow offset down and right.",
|
|
"task": "Add depth to the heading with <kbd>text-shadow: 2px 2px 4px gray</kbd>.",
|
|
"previewHTML": "<h1 class=\"hero-title\">Welcome</h1>",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 2rem; background: linear-gradient(135deg, #667eea, #764ba2); } .hero-title { margin: 0; font-size: 3rem; color: white; text-align: center; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": ".hero-title {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"previewContainer": "preview-area",
|
|
"solution": "text-shadow: 2px 2px 4px gray;",
|
|
"validations": [
|
|
{
|
|
"type": "contains",
|
|
"value": "text-shadow",
|
|
"message": "Use <kbd>text-shadow</kbd> property"
|
|
},
|
|
{
|
|
"type": "contains",
|
|
"value": "2px 2px",
|
|
"message": "How far should the shadow move horizontally and vertically?"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|