Michael Czechowski
9cf313001b
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
151 lines
8.8 KiB
JSON
151 lines
8.8 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": "Set offset to <kbd>2px 2px</kbd>"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|