diff --git a/lessons/00-welcome.json b/lessons/00-welcome.json index 8af27be..69cde78 100644 --- a/lessons/00-welcome.json +++ b/lessons/00-welcome.json @@ -10,7 +10,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", - "task": "Create a heading with <h1>Hello World</h1>", + "task": "Hello World", "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; } h1 { color: #6366f1; }", "sandboxCSS": "", @@ -34,7 +34,7 @@ "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

Open Source:
• GitHub · Gitea
• Made by librete.ch · LinkedIn", - "task": "Create a button with <button>Let's go!</button>", + "task": "Let's go!", "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: 1.1em; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); } button:hover { transform: scale(1.05); box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4); }", "sandboxCSS": "", diff --git a/lessons/de/00-welcome.json b/lessons/de/00-welcome.json index 7705c1f..1809cd7 100644 --- a/lessons/de/00-welcome.json +++ b/lessons/de/00-welcome.json @@ -10,7 +10,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

Tastenkürzel: Strg+Enter ausführen, Strg+Z rückgängig

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>", + "task": "Hallo Welt", "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; } h1 { color: #6366f1; }", "sandboxCSS": "", @@ -34,7 +34,7 @@ "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 einblenden um das Zielergebnis zu sehen
• Dein Fortschritt wird automatisch gespeichert
• Probiere Emmet im HTML-Modus: ul>li*3 + Tab

Open Source:
• GitHub · Gitea
• Entwickelt von librete.ch · LinkedIn", - "task": "Erstelle einen Button mit <button>Los geht's!</button>", + "task": "Los geht's!", "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: 1.1em; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); } button:hover { transform: scale(1.05); box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4); }", "sandboxCSS": "",