110 lines
10 KiB
JSON
110 lines
10 KiB
JSON
{
|
|
"$schema": "../schemas/code-crispies-module-schema.json",
|
|
"id": "html-elements",
|
|
"title": "HTML Block & Inline",
|
|
"description": "Understanding the fundamental difference between container (block) and inline elements",
|
|
"mode": "html",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "block-vs-inline-intro",
|
|
"title": "Block vs Inline Elements",
|
|
"description": "HTML elements fall into two main categories:<br><br><strong>Block elements</strong> (containers) start on a new line and take full width. Examples: <kbd><div></kbd>, <kbd><p></kbd>, <kbd><h1></kbd>, <kbd><section></kbd><br><br><strong>Inline elements</strong> flow within text and only take needed width. Examples: <kbd><span></kbd>, <kbd><a></kbd>, <kbd><strong></kbd>, <kbd><em></kbd>",
|
|
"task": "Wrap the word <kbd>important</kbd> with <kbd><strong></kbd> tags to make it bold. Notice how the paragraph (block) takes full width while strong (inline) flows with text.",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; } p { background: #e3f2fd; padding: 10px; } strong { background: #ffecb3; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "<p>This is a paragraph with an important word.</p>",
|
|
"solution": "<p>This is a paragraph with an <strong>important</strong> word.</p>",
|
|
"previewContainer": "preview-area",
|
|
"concept": {
|
|
"explanation": "The browser's layout engine treats block and inline elements fundamentally differently. Block elements create a rectangular box that starts on a new line and expands to fill available width, stacking vertically like building blocks. Inline elements flow horizontally within text content, wrapping to new lines only when they run out of space—like words in a paragraph. This distinction controls document flow: use block for structure (sections, paragraphs) and inline for content emphasis (bold, links) without breaking the text flow.",
|
|
"diagram": "Block vs Inline Layout\n\nBlock elements (vertical stacking):\n┌─────────────────────────────┐\n│ <div> Full width block │ ← New line\n└─────────────────────────────┘\n┌─────────────────────────────┐\n│ <p> Another block element │ ← New line\n└─────────────────────────────┘\n\nInline elements (horizontal flow):\n┌─────────────────────────────┐\n│ Text with <a>link</a> and │\n│ <strong>bold</strong> flows │ ← Wraps naturally\n│ like words in a sentence. │\n└─────────────────────────────┘\n\nKey differences:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nBlock: New line, full width\nInline: Same line, auto width\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
|
},
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "p",
|
|
"message": "Add a <kbd><p></kbd> paragraph element"
|
|
},
|
|
{
|
|
"type": "parent_child",
|
|
"value": { "parent": "p", "child": "strong" },
|
|
"message": "Wrap the word <kbd>important</kbd> with <kbd><strong></kbd> tags"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "semantic-containers",
|
|
"title": "Semantic Tags",
|
|
"description": "Modern HTML uses semantic containers that describe their content:<br><br><kbd><header></kbd> - Page or section header<br><kbd><nav></kbd> - Navigation links<br><kbd><main></kbd> - Main content area<br><kbd><section></kbd> - Thematic grouping<br><kbd><article></kbd> - Self-contained content<br><kbd><footer></kbd> - Page or section footer",
|
|
"task": "Create a basic page structure:<br>1. Add a <kbd><header></kbd> with an <kbd><h1></kbd> containing the text <code>My Website</code><br>2. Add a <kbd><main></kbd> element with a paragraph saying <code>Welcome to my site!</code><br>3. Add a <kbd><footer></kbd> with a paragraph saying <code>Copyright 2026</code>",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; margin: 0; } header { background: #1976d2; color: white; padding: 15px; } main { padding: 20px; min-height: 100px; } footer { background: #424242; color: white; padding: 10px; text-align: center; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<header>\n <h1>My Website</h1>\n</header>\n<main>\n <p>Welcome to my site!</p>\n</main>\n<footer>\n <p>Copyright 2026</p>\n</footer>",
|
|
"previewContainer": "preview-area",
|
|
"concept": {
|
|
"explanation": "Semantic HTML elements convey meaning about their content, not just appearance. Screen readers use semantic tags to help blind users navigate (\"skip to main content\" relies on <main>), search engines rank pages higher when structure is clear (<article> signals important content), and developers understand code faster when tags describe purpose. Using <header> instead of <div class=\"header\"> gives the same visual result but adds machine-readable meaning that assistive technology and search crawlers can understand. This is the foundation of accessible, SEO-friendly web development.",
|
|
"diagram": "Semantic Page Structure\n\n┌─────────────────────────────┐\n│ <header> │ ← Page header\n│ <h1>Site Title</h1> │ (branding, logo)\n│ <nav>Menu</nav> │ (navigation)\n└─────────────────────────────┘\n┌─────────────────────────────┐\n│ <main> │ ← Primary content\n│ <article>Blog Post</article> (unique per page)\n│ <section>Comments</section> (landmarks)\n└─────────────────────────────┘\n┌─────────────────────────────┐\n│ <footer> │ ← Page footer\n│ Copyright, links │ (metadata)\n└─────────────────────────────┘\n\nBenefits:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nAccessibility: Screen readers\nSEO: Search ranking\nMaintainability: Self-documenting\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
|
},
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "header",
|
|
"message": "Add a <kbd><header></kbd> element"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "main",
|
|
"message": "Add a <kbd><main></kbd> element"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "footer",
|
|
"message": "Add a <kbd><footer></kbd> element"
|
|
},
|
|
{
|
|
"type": "parent_child",
|
|
"value": { "parent": "header", "child": "h1" },
|
|
"message": "Add an <kbd><h1></kbd> heading inside your header"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "div-vs-span",
|
|
"title": "div & span",
|
|
"description": "When you need a container without semantic meaning:<br><br><kbd><div></kbd> - Generic block container (for layout/grouping)<br><kbd><span></kbd> - Generic inline container (for styling text portions)<br><br>Use semantic elements when possible, div/span when no semantic element fits.",
|
|
"task": "Wrap the word 'highlighted' in a <kbd><span></kbd> to style it differently. Wrap the whole quote in a <kbd><div></kbd>.",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: Georgia, serif; padding: 20px; } div { background: #f5f5f5; padding: 15px; border-left: 4px solid #1976d2; } span { background: #fff59d; padding: 2px 4px; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "The most highlighted moment was unforgettable.",
|
|
"solution": "<div>The most <span>highlighted</span> moment was unforgettable.</div>",
|
|
"previewContainer": "preview-area",
|
|
"concept": {
|
|
"explanation": "While semantic elements describe content meaning, <div> and <span> are semantically neutral containers used purely for styling or JavaScript hooks when no semantic element fits. Use <div> to group block-level content for layout purposes (like creating a grid wrapper) and <span> to target inline text portions for styling (like highlighting a word). However, always ask first: is there a better semantic choice? For example, use <article> instead of <div class=\"post\">, or <strong> instead of <span class=\"bold\">. Generic containers should be your last resort, not your first choice.",
|
|
"diagram": "When to Use Generic Containers\n\nSemantic First (Preferred):\n✓ <header> instead of <div class=\"header\">\n✓ <nav> instead of <div class=\"nav\">\n✓ <strong> instead of <span class=\"bold\">\n✓ <em> instead of <span class=\"italic\">\n\nGeneric When Needed:\n✓ <div> Layout wrapper (grid/flex)\n✓ <span> Style hook (color/bg only)\n\nDecision Tree:\n┌─────────────────────────────┐\n│ Does a semantic tag exist? │\n│ ↓ Yes ↓ No │\n│ Use it Use div/span │\n└─────────────────────────────┘\n\nPrinciple: Meaning > Presentation"
|
|
},
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "div",
|
|
"message": "Wrap everything in a <kbd><div></kbd> element"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "span",
|
|
"message": "Add a <kbd><span></kbd> around the word <kbd>highlighted</kbd>"
|
|
},
|
|
{
|
|
"type": "element_text",
|
|
"value": { "selector": "span", "text": "highlighted" },
|
|
"message": "The <kbd><span></kbd> should contain the word <kbd>highlighted</kbd>"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|