{
"$schema": "../schemas/code-crispies-module-schema.json",
"id": "welcome",
"title": "Code Crispies",
"description": "Welcome to Code Crispies - your interactive web development learning platform",
"mode": "html",
"difficulty": "beginner",
"lessons": [
{
"id": "welcome",
"title": "Welcome!",
"description": "Code Crispies is a free, open-source platform for learning web development through hands-on exercises. No account required!
What you'll learn: • HTML - Semantic elements, forms, tables, SVG (HTML Block & Inline, HTML Forms, HTML Tables) • CSS - Selectors, box model, flexbox, animations (CSS Selectors, CSS Box Model, CSS Flexbox) • Responsive Design - Media queries and mobile-first layouts
How it works: 1. Read the task in the left panel 2. Write code in the editor 3. See live results in the preview 4. Get instant feedback with hints
Keyboard shortcuts:Ctrl+Z to undo, Ctrl+Shift+Z to redo
More resources: • HTML over JS - Native HTML vs JavaScript solutions • Web Engineering Mandala - JavaScript technology roadmap",
"task": "Hello World",
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; } h1 { color: #6366f1; }",
"sandboxCSS": "",
"initialCode": "",
"solution": "
Hello World
",
"previewContainer": "preview-area",
"validations": [
{
"type": "contains",
"value": "Hello",
"message": "Write 'Hello World'"
}
]
},
{
"id": "get-started",
"title": "Get Started!",
"description": "You're ready! Open the menu (☰) to explore all modules.
Recommended learning path: 1. HTML Block & Inline - Understand container vs inline elements 2. HTML Forms - Build interactive forms with validation 3. CSS Selectors - Target elements precisely 4. CSS Box Model - Master padding, margin, borders 5. CSS Flexbox - Create flexible layouts 6. CSS Animations - Add motion and transitions
Tips: • Use Show Expected to see the target result • Your progress is saved automatically • Try Emmet in HTML mode: ul>li*3 + Tab