diff --git a/lessons/00-welcome.json b/lessons/00-welcome.json
index 381bf82..41c42be 100644
--- a/lessons/00-welcome.json
+++ b/lessons/00-welcome.json
@@ -9,7 +9,7 @@
{
"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",
+ "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; }",
@@ -18,15 +18,10 @@
"solution": "
Hello World
",
"previewContainer": "preview-area",
"validations": [
- {
- "type": "element_exists",
- "value": "h1",
- "message": "Add an <h1> heading element"
- },
{
"type": "contains",
"value": "Hello",
- "message": "Add the text 'Hello' inside your heading"
+ "message": "Write 'Hello World'"
}
]
},
@@ -42,15 +37,10 @@
"solution": "",
"previewContainer": "preview-area",
"validations": [
- {
- "type": "element_exists",
- "value": "button",
- "message": "Add a <button> element"
- },
{
"type": "contains",
"value": "go",
- "message": "Add the text 'Let's go!' inside the button"
+ "message": "Write 'Let's go!'"
}
]
}
diff --git a/lessons/de/00-welcome.json b/lessons/de/00-welcome.json
index d47d516..2cf88db 100644
--- a/lessons/de/00-welcome.json
+++ b/lessons/de/00-welcome.json
@@ -9,7 +9,7 @@
{
"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",
+ "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