Michael Czechowski
be9c753a0e
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
89 lines
4.3 KiB
JSON
89 lines
4.3 KiB
JSON
{
|
|
"$schema": "../schemas/code-crispies-module-schema.json",
|
|
"id": "html-semantic",
|
|
"title": "Semantic HTML",
|
|
"mode": "html",
|
|
"description": "Use meaningful HTML elements to structure content properly.",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "semantic-1",
|
|
"title": "The <article> Element",
|
|
"description": "The <kbd><article></kbd> element represents self-contained content that could be distributed independently, like a blog post, news article, or comment.<br><br><pre><article>\n <h2>Article Title</h2>\n <p>Article content...</p>\n</article></pre>",
|
|
"task": "Wrap the blog post content in an <kbd><article></kbd> element.",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } article { padding: 1rem; background: #f9f9f9; border-left: 4px solid steelblue; border-radius: 4px; } h2 { margin: 0 0 8px; color: steelblue; } p { margin: 0; color: #555; line-height: 1.5; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": "",
|
|
"initialCode": "<h2>My First Post</h2>\n<p>This is a blog post about learning HTML.</p>",
|
|
"codeSuffix": "",
|
|
"solution": "<article>\n<h2>My First Post</h2>\n<p>This is a blog post about learning HTML.</p>\n</article>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "contains",
|
|
"value": "<article>",
|
|
"message": "Add an opening <kbd><article></kbd> tag"
|
|
},
|
|
{
|
|
"type": "contains",
|
|
"value": "</article>",
|
|
"message": "Add a closing <kbd></article></kbd> tag"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "semantic-2",
|
|
"title": "The <section> Element",
|
|
"description": "The <kbd><section></kbd> element represents a thematic grouping of content, typically with a heading. Use it to divide a page into logical sections.<br><br><pre><section>\n <h2>Features</h2>\n <p>Our product features...</p>\n</section></pre>",
|
|
"task": "Wrap the features content in a <kbd><section></kbd> element.",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } section { padding: 1rem; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); border-radius: 8px; } h2 { margin: 0 0 12px; } ul { margin: 0; padding-left: 1.5rem; } li { margin: 4px 0; color: #444; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": "",
|
|
"initialCode": "<h2>Features</h2>\n<ul>\n <li>Fast performance</li>\n <li>Easy to use</li>\n</ul>",
|
|
"codeSuffix": "",
|
|
"solution": "<section>\n<h2>Features</h2>\n<ul>\n <li>Fast performance</li>\n <li>Easy to use</li>\n</ul>\n</section>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "contains",
|
|
"value": "<section>",
|
|
"message": "Add an opening <kbd><section></kbd> tag"
|
|
},
|
|
{
|
|
"type": "contains",
|
|
"value": "</section>",
|
|
"message": "Add a closing <kbd></section></kbd> tag"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "semantic-3",
|
|
"title": "The <aside> Element",
|
|
"description": "The <kbd><aside></kbd> element represents content tangentially related to the main content, like sidebars, pull quotes, or related links.<br><br><pre><aside>\n <h3>Related</h3>\n <ul>...</ul>\n</aside></pre>",
|
|
"task": "Wrap the related links in an <kbd><aside></kbd> element.",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } aside { padding: 1rem; background: #fff8e7; border: 1px solid #ffe0a6; border-radius: 8px; } h3 { margin: 0 0 8px; color: #b8860b; font-size: 0.9rem; text-transform: uppercase; } ul { margin: 0; padding-left: 1.2rem; } li { margin: 4px 0; } a { color: #b8860b; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": "",
|
|
"initialCode": "<h3>Related Posts</h3>\n<ul>\n <li><a href=\"#\">CSS Basics</a></li>\n <li><a href=\"#\">HTML Tips</a></li>\n</ul>",
|
|
"codeSuffix": "",
|
|
"solution": "<aside>\n<h3>Related Posts</h3>\n<ul>\n <li><a href=\"#\">CSS Basics</a></li>\n <li><a href=\"#\">HTML Tips</a></li>\n</ul>\n</aside>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "contains",
|
|
"value": "<aside>",
|
|
"message": "Add an opening <kbd><aside></kbd> tag"
|
|
},
|
|
{
|
|
"type": "contains",
|
|
"value": "</aside>",
|
|
"message": "Add a closing <kbd></aside></kbd> tag"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|