diff --git a/lessons/00-welcome.json b/lessons/00-welcome.json
index fe5aa92..8af27be 100644
--- a/lessons/00-welcome.json
+++ b/lessons/00-welcome.json
@@ -1,16 +1,16 @@
{
"$schema": "../schemas/code-crispies-module-schema.json",
"id": "welcome",
- "title": "Welcome",
- "description": "Learn how to use Code Crispies and get started with interactive web development lessons",
+ "title": "Code Crispies",
+ "description": "Welcome to Code Crispies - your interactive web development learning platform",
"mode": "html",
"difficulty": "beginner",
"lessons": [
{
- "id": "what-is-code-crispies",
- "title": "What is Code Crispies?",
- "description": "Code Crispies is a free, open-source platform for learning web development through hands-on exercises.
You'll learn: - HTML - Semantic markup and native elements - CSS - Styling and layout techniques - Tailwind - Utility-first CSS framework
No account required - just start coding!",
- "task": "Try it out! Type <h1>Hello World</h1> in the editor below and watch the preview update.",
+ "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+Enter to run, Ctrl+Z to undo
More resources: • HTML over JS - Native HTML vs JavaScript solutions • Web Engineering Mandala - JavaScript technology roadmap",
+ "task": "Create a heading with <h1>Hello World</h1>",
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; } h1 { color: #6366f1; }",
"sandboxCSS": "",
@@ -31,39 +31,15 @@
]
},
{
- "id": "how-lessons-work",
- "title": "How Lessons Work",
- "description": "Each lesson has:
1. Instructions - Read the task on the left 2. Editor - Write your code below the instructions 3. Preview - See results instantly on the right 4. Hints - Get feedback when you run your code
When all validations pass, you'll see a success message!",
- "task": "Create a paragraph with the text 'I am learning!' using <p> tags.",
+ "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
",
- "previewContainer": "preview-area",
- "validations": [
- {
- "type": "element_exists",
- "value": "p",
- "message": "Add a <p> paragraph element"
- },
- {
- "type": "contains",
- "value": "learning",
- "message": "Include the word 'learning' in your paragraph"
- }
- ]
- },
- {
- "id": "navigation-tips",
- "title": "Navigation Tips",
- "description": "Use these controls to navigate:
Menu button (top left) - Browse all lesson modules Previous / Next buttons - Move between lessons Show Expected - See the target result Reset button - Start the lesson over
Keyboard shortcuts: Ctrl+Enter - Run your code Ctrl+Z - Undo Ctrl+Shift+Z - Redo",
- "task": "Create a button element with the text 'Click me!' using <button> tags.",
- "previewHTML": "",
- "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; display: flex; justify-content: center; align-items: center; min-height: 80px; } button { background: #6366f1; color: white; border: none; padding: 12px 24px; border-radius: 6px; font-size: 1em; cursor: pointer; transition: transform 0.2s; } button:hover { transform: scale(1.05); }",
- "sandboxCSS": "",
- "initialCode": "",
- "solution": "",
+ "solution": "",
"previewContainer": "preview-area",
"validations": [
{
@@ -73,37 +49,8 @@
},
{
"type": "contains",
- "value": "Click",
- "message": "Add the text 'Click me!' inside the button"
- }
- ]
- },
- {
- "id": "ready-to-learn",
- "title": "Ready to Learn!",
- "description": "You're all set! Here's what to explore next:
Open the menu to browse all available modules. Your progress is saved automatically!",
- "task": "Create a simple card with a heading and paragraph: 1. Add <h2> with 'Ready!' 2. Add <p> with 'Let's start learning.'",
- "previewHTML": "",
- "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; } h2, p { background: white; margin: 0; } h2 { color: #6366f1; padding: 20px 20px 10px; border-radius: 8px 8px 0 0; border: 2px solid #e5e7eb; border-bottom: none; } p { padding: 10px 20px 20px; border-radius: 0 0 8px 8px; border: 2px solid #e5e7eb; border-top: none; color: #4b5563; }",
- "sandboxCSS": "",
- "initialCode": "",
- "solution": "
Ready!
\n
Let's start learning.
",
- "previewContainer": "preview-area",
- "validations": [
- {
- "type": "element_exists",
- "value": "h2",
- "message": "Add an <h2> heading"
- },
- {
- "type": "element_exists",
- "value": "p",
- "message": "Add a <p> paragraph"
- },
- {
- "type": "contains",
- "value": "Ready",
- "message": "Include 'Ready!' in your heading"
+ "value": "go",
+ "message": "Add the text 'Let's go!' inside the button"
}
]
}
diff --git a/lessons/de/00-welcome.json b/lessons/de/00-welcome.json
index a1a7329..c146c66 100644
--- a/lessons/de/00-welcome.json
+++ b/lessons/de/00-welcome.json
@@ -1,16 +1,16 @@
{
"$schema": "../../schemas/code-crispies-module-schema.json",
"id": "welcome",
- "title": "Willkommen",
- "description": "Lerne, wie du Code Crispies nutzt und starte mit interaktiven Webentwicklungs-Lektionen",
+ "title": "Code Crispies",
+ "description": "Willkommen bei Code Crispies - deine interaktive Lernplattform für Webentwicklung",
"mode": "html",
"difficulty": "beginner",
"lessons": [
{
- "id": "what-is-code-crispies",
- "title": "Was ist Code Crispies?",
- "description": "Code Crispies ist eine kostenlose Open-Source-Plattform zum Erlernen von Webentwicklung durch praktische Übungen.
Du lernst: - HTML - Semantisches Markup und native Elemente - CSS - Styling und Layout-Techniken - Tailwind - Utility-First CSS Framework
Kein Konto erforderlich - einfach loslegen!",
- "task": "Probiere es aus! Tippe <h1>Hallo Welt</h1> in den Editor und beobachte die Vorschau.",
+ "id": "welcome",
+ "title": "Willkommen!",
+ "description": "Code Crispies ist eine kostenlose Open-Source-Plattform zum Erlernen von Webentwicklung durch praktische Übungen. Kein Konto erforderlich!
Was du lernst: • HTML - Semantische Elemente, Formulare, Tabellen, SVG (HTML Block & Inline, HTML Formulare, HTML Tabellen) • CSS - Selektoren, Box-Model, Flexbox, Animationen (CSS Selektoren, CSS Box-Model, CSS Flexbox) • Responsive Design - Media Queries und Mobile-First Layouts
So funktioniert's: 1. Lies die Aufgabe im linken Bereich 2. Schreibe Code im Editor 3. Sieh Live-Ergebnisse in der Vorschau 4. Bekomme sofortiges Feedback mit Hinweisen
Weitere Ressourcen: • HTML over JS - Native HTML vs JavaScript-Lösungen • Web Engineering Mandala - JavaScript Technologie-Roadmap",
+ "task": "Erstelle eine Überschrift mit <h1>Hallo Welt</h1>",
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; } h1 { color: #6366f1; }",
"sandboxCSS": "",
@@ -31,39 +31,15 @@
]
},
{
- "id": "how-lessons-work",
- "title": "Wie Lektionen funktionieren",
- "description": "Jede Lektion hat:
1. Anweisungen - Lies die Aufgabe links 2. Editor - Schreibe deinen Code unter den Anweisungen 3. Vorschau - Sieh Ergebnisse sofort rechts 4. Hinweise - Bekomme Feedback beim Ausführen
Wenn alle Validierungen bestanden sind, siehst du eine Erfolgsmeldung!",
- "task": "Erstelle einen Absatz mit dem Text 'Ich lerne!' mit <p> Tags.",
+ "id": "get-started",
+ "title": "Los geht's!",
+ "description": "Du bist bereit! Öffne das Menü (☰) um alle Module zu erkunden.
Empfohlener Lernpfad: 1. HTML Block & Inline - Container vs Inline-Elemente verstehen 2. HTML Formulare - Interaktive Formulare mit Validierung erstellen 3. CSS Selektoren - Elemente präzise ansprechen 4. CSS Box-Model - Padding, Margin, Borders meistern 5. CSS Flexbox - Flexible Layouts erstellen 6. CSS Animationen - Bewegung und Übergänge hinzufügen
Tipps: • Nutze Lösung zeigen um das Zielergebnis zu sehen • Dein Fortschritt wird automatisch gespeichert • Probiere Emmet im HTML-Modus: ul>li*3 + Tab
Menü-Button (oben links) - Alle Lektionsmodule durchsuchen Zurück / Weiter Buttons - Zwischen Lektionen wechseln Lösung zeigen - Das Zielergebnis anzeigen Zurücksetzen - Lektion neu starten
Tastenkürzel: Strg+Enter - Code ausführen Strg+Z - Rückgängig Strg+Umschalt+Z - Wiederholen",
- "task": "Erstelle ein Button-Element mit dem Text 'Klick mich!' mit <button> Tags.",
- "previewHTML": "",
- "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; display: flex; justify-content: center; align-items: center; min-height: 80px; } button { background: #6366f1; color: white; border: none; padding: 12px 24px; border-radius: 6px; font-size: 1em; cursor: pointer; transition: transform 0.2s; } button:hover { transform: scale(1.05); }",
- "sandboxCSS": "",
- "initialCode": "",
- "solution": "",
+ "solution": "",
"previewContainer": "preview-area",
"validations": [
{
@@ -73,37 +49,8 @@
},
{
"type": "contains",
- "value": "Klick",
- "message": "Füge den Text 'Klick mich!' in den Button ein"
- }
- ]
- },
- {
- "id": "ready-to-learn",
- "title": "Bereit zum Lernen!",
- "description": "Du bist startklar! Hier ist, was du als nächstes erkunden kannst: