{ "$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:

Block elements (containers) start on a new line and take full width. Examples: <div>, <p>, <h1>, <section>

Inline elements flow within text and only take needed width. Examples: <span>, <a>, <strong>, <em>", "task": "Wrap the word important with <strong> 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": "

This is a paragraph with an important word.

", "solution": "

This is a paragraph with an important word.

", "previewContainer": "preview-area", "validations": [ { "type": "element_exists", "value": "p", "message": "Add a <p> paragraph element" }, { "type": "parent_child", "value": { "parent": "p", "child": "strong" }, "message": "Wrap the word important with <strong> tags" } ] }, { "id": "semantic-containers", "title": "Semantic Tags", "description": "Modern HTML uses semantic containers that describe their content:

<header> - Page or section header
<nav> - Navigation links
<main> - Main content area
<section> - Thematic grouping
<article> - Self-contained content
<footer> - Page or section footer", "task": "Create a basic page structure:
1. Add a <header> with an <h1> containing the text My Website
2. Add a <main> element with a paragraph saying Welcome to my site!
3. Add a <footer> with a paragraph saying Copyright 2025", "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": "
\n

My Website

\n
\n
\n

Welcome to my site!

\n
\n", "previewContainer": "preview-area", "validations": [ { "type": "element_exists", "value": "header", "message": "Add a <header> element" }, { "type": "element_exists", "value": "main", "message": "Add a <main> element" }, { "type": "element_exists", "value": "footer", "message": "Add a <footer> element" }, { "type": "parent_child", "value": { "parent": "header", "child": "h1" }, "message": "Add an <h1> heading inside your header" } ] }, { "id": "div-vs-span", "title": "div & span", "description": "When you need a container without semantic meaning:

<div> - Generic block container (for layout/grouping)
<span> - Generic inline container (for styling text portions)

Use semantic elements when possible, div/span when no semantic element fits.", "task": "Wrap the word 'highlighted' in a <span> to style it differently. Wrap the whole quote in a <div>.", "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": "
The most highlighted moment was unforgettable.
", "previewContainer": "preview-area", "validations": [ { "type": "element_exists", "value": "div", "message": "Wrap everything in a <div> element" }, { "type": "element_exists", "value": "span", "message": "Add a <span> around the word highlighted" }, { "type": "element_text", "value": { "selector": "span", "text": "highlighted" }, "message": "The <span> should contain the word highlighted" } ] } ] }