{ "$schema": "../schemas/code-crispies-module-schema.json", "id": "html-figure", "title": "Figure & Figcaption", "description": "Create self-contained content with captions", "mode": "html", "difficulty": "beginner", "lessons": [ { "id": "figure-basic", "title": "Image with Caption", "description": "The <figure> element wraps self-contained content like images, diagrams, or code. Add <figcaption> to provide a caption.

This semantic structure helps screen readers and search engines understand your content.", "task": "Create a figure with:
1. A <figure> element
2. An <img> inside (use placeholder URL)
3. A <figcaption> describing the image", "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f5f5f5; } figure { margin: 0; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); max-width: 400px; } figure img { width: 100%; height: 200px; object-fit: cover; display: block; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } figcaption { padding: 15px 20px; color: #555; font-size: 0.95rem; border-top: 1px solid #eee; }", "sandboxCSS": "", "initialCode": "", "solution": "
\n \"A\n
A beautiful mountain landscape at sunset.
\n
", "previewContainer": "preview-area", "validations": [ { "type": "element_exists", "value": "figure", "message": "Add a
element" }, { "type": "element_exists", "value": "figure img", "message": "Add an inside the figure" }, { "type": "element_exists", "value": "figcaption", "message": "Add a
for the caption" } ] }, { "id": "figure-code", "title": "Code Figure", "description": "Figures aren't just for images! You can use them for code snippets, quotes, or any self-contained content.

Combine <figure> with <pre> and <code> for code examples.", "task": "Create a code figure:
1. A <figure> element
2. A <pre> containing <code> with some code
3. A <figcaption> describing the code", "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #1e1e1e; } figure { margin: 0; background: #2d2d2d; border-radius: 10px; overflow: hidden; max-width: 500px; } pre { margin: 0; padding: 20px; overflow-x: auto; } code { color: #9cdcfe; font-family: 'Fira Code', 'Consolas', monospace; font-size: 14px; line-height: 1.5; } figcaption { padding: 12px 20px; color: #888; font-size: 0.85rem; background: #252525; border-top: 1px solid #3d3d3d; }", "sandboxCSS": "", "initialCode": "", "solution": "
\n 
function greet(name) {\n  return `Hello, ${name}!`;\n}
\n
A simple greeting function in JavaScript
\n
", "previewContainer": "preview-area", "validations": [ { "type": "element_exists", "value": "figure", "message": "Add a
element" }, { "type": "element_exists", "value": "pre", "message": "Add a 
 element for preformatted text"
				},
				{
					"type": "element_exists",
					"value": "code",
					"message": "Add a  element for the code"
				},
				{
					"type": "element_exists",
					"value": "figcaption",
					"message": "Add a 
 describing the code"
				}
			]
		},
		{
			"id": "figure-gallery",
			"title": "Image Gallery",
			"description": "You can put multiple images inside a single <figure> to create a gallery or comparison.

The figcaption describes the entire group.",
			"task": "Create a gallery figure:
1. A <figure> element
2. At least 2 <img> elements
3. A <figcaption> describing the gallery",
			"previewHTML": "",
			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); min-height: 100vh; margin: 0; box-sizing: border-box; } figure { margin: 0; background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.15); max-width: 500px; padding: 15px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } figure img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; background: linear-gradient(45deg, #ff6b6b, #feca57); } figcaption { grid-column: 1 / -1; padding: 10px 5px 5px; color: #666; font-size: 0.9rem; text-align: center; }",
			"sandboxCSS": "",
			"initialCode": "",
			"solution": "
\n  \"Photo\n  \"Photo\n  \"Photo\n  \"Photo\n  
My vacation photo gallery
\n
",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "element_exists",
					"value": "figure",
					"message": "Add a 
 element"
				},
				{
					"type": "element_count",
					"value": { "selector": "figure img", "min": 2 },
					"message": "Add at least 2 images inside the figure"
				},
				{
					"type": "element_exists",
					"value": "figcaption",
					"message": "Add a 
 for the gallery"
				}
			]
		}
	]
}