Michael Czechowski
bd3f9ab96a
- Box Model: profile cards, alerts, buttons instead of generic boxes - Flexbox: navigation bars, headers, toolbars, card layouts - Grid: photo gallery with SVG images, product cards, dashboard layout - Colors: notification alerts, buttons, badges with visible changes - Units/Variables: article width, brand variables, sidebar calc, hero vh - Responsive: feature cards grid instead of numbered divs - Added missing solutions to enable "Show Expected" feature - Fixed barely visible border color change in colors lesson 🤖 Generated with [Claude Code](https://claude.com/claude-code)
132 lines
4.7 KiB
JSON
132 lines
4.7 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 decorative effects.",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "typography-1",
|
|
"title": "Font Family & Fallbacks",
|
|
"description": "Specify custom fonts and reliable fallback stacks for consistent typography across devices.",
|
|
"task": "Set the <code>font-family</code> of the '.text' element to 'Georgia, serif' with serif fallback.",
|
|
"previewHTML": "<p class=\"text\">This text shows the chosen font family.</p>",
|
|
"previewBaseCSS": "body { padding: 1rem; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": ".text {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"previewContainer": "preview-area",
|
|
"solution": "font-family: Georgia, serif;",
|
|
"validations": [
|
|
{
|
|
"type": "contains",
|
|
"value": "font-family",
|
|
"message": "Use the <kbd>font-family</kbd> property",
|
|
"options": { "caseSensitive": false }
|
|
},
|
|
{
|
|
"type": "regex",
|
|
"value": "Georgia, serif",
|
|
"message": "Include <kbd>Georgia, serif</kbd> in the font stack",
|
|
"options": { "caseSensitive": false }
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "typography-2",
|
|
"title": "Font Size & Line Height",
|
|
"description": "Control text scale and readability by adjusting size and line heights.",
|
|
"task": "Set the heading '.heading' to 1.5rem font-size and 1.5 line-height.",
|
|
"previewHTML": "<h2 class=\"heading\">Readable Heading</h2>",
|
|
"previewBaseCSS": "body { padding: 1rem; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": ".heading {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"previewContainer": "preview-area",
|
|
"solution": "font-size: 1.5rem;\n line-height: 1.5;",
|
|
"validations": [
|
|
{ "type": "contains", "value": "font-size", "message": "Use <kbd>font-size</kbd> property", "options": { "caseSensitive": false } },
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "font-size", "expected": "1.5rem" },
|
|
"message": "Set font-size to <kbd>1.5rem</kbd>"
|
|
},
|
|
{
|
|
"type": "contains",
|
|
"value": "line-height",
|
|
"message": "Use <kbd>line-height</kbd> property",
|
|
"options": { "caseSensitive": false }
|
|
},
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "line-height", "expected": "1.5" },
|
|
"message": "Set line-height to <kbd>1.5</kbd>"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "typography-3",
|
|
"title": "Font Weight & Style",
|
|
"description": "Apply weight and style variations like bold, light, italic to emphasize text.",
|
|
"task": "Make the paragraph '.emphasis' italic and bold using <code>font-style</code> and <code>font-weight</code>.",
|
|
"previewHTML": "<p class=\"emphasis\">This text should stand out.</p>",
|
|
"previewBaseCSS": "body { padding: 1rem; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": ".emphasis {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"previewContainer": "preview-area",
|
|
"solution": "font-style: italic;\n font-weight: bold;",
|
|
"validations": [
|
|
{ "type": "contains", "value": "font-style", "message": "Use <kbd>font-style</kbd> property", "options": { "caseSensitive": false } },
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "font-style", "expected": "italic" },
|
|
"message": "Set font-style to <kbd>italic</kbd>"
|
|
},
|
|
{
|
|
"type": "contains",
|
|
"value": "font-weight",
|
|
"message": "Use <kbd>font-weight</kbd> property",
|
|
"options": { "caseSensitive": false }
|
|
},
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "font-weight", "expected": "bold" },
|
|
"message": "Set font-weight to <kbd>bold</kbd>"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "typography-4",
|
|
"title": "Text Decoration & Shadow",
|
|
"description": "Add decorative underlines, overlines, line-throughs and subtle shadows to text.",
|
|
"task": "Apply an underline with <code>text-decoration</code> and a light shadow using <code>text-shadow</code> on '.fancy'.",
|
|
"previewHTML": "<p class=\"fancy\">Fancy text effect!</p>",
|
|
"previewBaseCSS": "body { padding: 1rem; } .fancy { font-size: 1.25rem; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": ".fancy {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"previewContainer": "preview-area",
|
|
"solution": "text-decoration: underline;\n text-shadow: 1px 1px 2px gray;",
|
|
"validations": [
|
|
{
|
|
"type": "contains",
|
|
"value": "text-decoration",
|
|
"message": "Use <kbd>text-decoration</kbd> property",
|
|
"options": { "caseSensitive": false }
|
|
},
|
|
{
|
|
"type": "contains",
|
|
"value": "text-shadow",
|
|
"message": "Use <kbd>text-shadow</kbd> property",
|
|
"options": { "caseSensitive": false }
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|