diff --git a/lessons/00-welcome.json b/lessons/00-welcome.json index 4dc9143..d71acdd 100644 --- a/lessons/00-welcome.json +++ b/lessons/00-welcome.json @@ -1,17 +1,17 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "welcome", - "title": "Code Crispies", - "description": "Welcome to Code Crispies - your interactive web development learning platform", + "title": "Welcome", + "description": "Get started with Code Crispies", "mode": "html", "difficulty": "beginner", "excludeFromProgress": true, "lessons": [ { - "id": "get-started", - "title": "Get Started", - "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": "Write Hello World", + "id": "hello", + "title": "Hello!", + "description": "Welcome to Code Crispies! Learn CSS and HTML through hands-on exercises.

How it works:
1. Read the task on the left
2. Write code in the editor
3. See live results in the preview

Tips: Use Ctrl+Z to undo. Open the menu (☰) to browse all modules.", + "task": "Write Hello World to get started", "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; font-size: 2rem; color: #6366f1; font-weight: bold; }", "sandboxCSS": "", @@ -25,39 +25,6 @@ "message": "Write Hello World" } ] - }, - { - "id": "overview", - "title": "Overview", - "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:
• Gitea (Source) · GitHub (Mirror)
• Made by LibreTECH · Michael Czechowski", - "task": "Click Next to continue", - "previewHTML": "

Hello World! 🌍

Hallo Welt!

Bonjour le monde!

¡Hola Mundo!

Ciao Mondo!

Olá Mundo!

こんにちは世界!

你好世界!

안녕 세상!

Привет мир!

שלום עולם!

مرحبا بالعالم!

", - "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 12px; } p { margin: 6px 0; padding: 6px 12px; border-radius: 6px; font-weight: 600; font-size: 0.95em; } p:nth-child(1) { background: #fef3c7; color: #92400e; font-size: 1.2em; } p:nth-child(2) { background: #dcfce7; color: #166534; } p:nth-child(3) { background: #dbeafe; color: #1e40af; } p:nth-child(4) { background: #fce7f3; color: #9d174d; } p:nth-child(5) { background: #e0e7ff; color: #4338ca; } p:nth-child(6) { background: #fef9c3; color: #854d0e; } p:nth-child(7) { background: #fee2e2; color: #991b1b; } p:nth-child(8) { background: #f3e8ff; color: #7c3aed; } p:nth-child(9) { background: #ccfbf1; color: #0f766e; } p:nth-child(10) { background: #fae8ff; color: #86198f; } p:nth-child(11) { background: #fef3c7; color: #b45309; } p:nth-child(12) { background: #d1fae5; color: #047857; }", - "sandboxCSS": "", - "initialCode": "

Hello World! 🌍

\n

Hallo Welt!

\n

Bonjour le monde!

\n

¡Hola Mundo!

\n

Ciao Mondo!

\n

Olá Mundo!

\n

こんにちは世界!

\n

你好世界!

\n

안녕 세상!

\n

Привет мир!

\n

שלום עולם!

\n

مرحبا بالعالم!

", - "solution": "

Hello World! 🌍

\n

Hallo Welt!

\n

Bonjour le monde!

\n

¡Hola Mundo!

\n

Ciao Mondo!

\n

Olá Mundo!

\n

こんにちは世界!

\n

你好世界!

\n

안녕 세상!

\n

Привет мир!

\n

שלום עולם!

\n

مرحبا بالعالم!

", - "previewContainer": "preview-area", - "validations": [ - { - "type": "contains", - "value": "Hello", - "message": "Click Next to continue" - } - ] - }, - { - "id": "playground", - "title": "Playground", - "mode": "playground", - "description": "", - "task": "", - "previewHTML": "", - "previewBaseCSS": "", - "sandboxCSS": "", - "initialCode": "\n\n

Hello World

\n

Start coding!

", - "solution": "", - "previewContainer": "preview-area", - "validations": [] } ] } diff --git a/lessons/98-playground.json b/lessons/98-playground.json new file mode 100644 index 0000000..91f4829 --- /dev/null +++ b/lessons/98-playground.json @@ -0,0 +1,25 @@ +{ + "$schema": "../schemas/code-crispies-module-schema.json", + "id": "playground", + "title": "Playground", + "description": "Experiment freely with HTML and CSS", + "mode": "playground", + "difficulty": "beginner", + "excludeFromProgress": true, + "lessons": [ + { + "id": "sandbox", + "title": "Free Coding", + "mode": "playground", + "description": "", + "task": "", + "previewHTML": "", + "previewBaseCSS": "", + "sandboxCSS": "", + "initialCode": "\n\n

Hello World

\n

Write any HTML and CSS here!

", + "solution": "", + "previewContainer": "preview-area", + "validations": [] + } + ] +} diff --git a/lessons/99-goodbye.json b/lessons/99-goodbye.json index d76e3f3..8e0cf46 100644 --- a/lessons/99-goodbye.json +++ b/lessons/99-goodbye.json @@ -2,21 +2,21 @@ "$schema": "../schemas/code-crispies-module-schema.json", "id": "goodbye", "title": "What's Next?", - "description": "Congratulations on completing your learning journey!", + "description": "Continue your learning journey", "mode": "html", "difficulty": "beginner", "excludeFromProgress": true, "lessons": [ { - "id": "congratulations", - "title": "Well Done!", - "description": "Congratulations! You've made it through Code Crispies!

You've learned:
• HTML - Semantic elements, forms, tables, and more
• CSS - Selectors, box model, flexbox, grid, animations
• Responsive Design - Media queries and mobile-first layouts

These are the building blocks of every website on the internet. Keep practicing and building!", + "id": "next-steps", + "title": "Keep Going!", + "description": "Great progress! You're building real web development skills.

Continue learning:
• MDN Web Docs - The definitive reference
• CSS-Tricks - Practical techniques

Practice ideas:
• Build your portfolio site
• Recreate a website you like
• Try the Playground to experiment freely

Contribute: Code Crispies is open source. Add lessons, fix bugs, or translate!", "task": "Type Thank you!", "previewHTML": "", - "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; } p { font-size: 1.5rem; color: #6366f1; }", + "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; font-size: 1.5rem; color: #6366f1; }", "sandboxCSS": "", "initialCode": "", - "solution": "

Thank you!

", + "solution": "Thank you!", "previewContainer": "preview-area", "validations": [ { @@ -25,44 +25,6 @@ "message": "Type Thank you!" } ] - }, - { - "id": "contribute", - "title": "Contribute", - "description": "Help others learn!

Code Crispies is open source and always looking for new lessons. You can contribute by:

• Writing new lessons - Share your knowledge on topics we haven't covered
• Translating lessons - Help make Code Crispies accessible in more languages
• Fixing bugs - Found something broken? Help us fix it!
• Improving content - Make existing lessons clearer and better

Get started:
• Gitea Repository - Main source code
• GitHub Mirror - Alternative access

Lessons are simple JSON files in the lessons/ folder. Check existing lessons for the format!", - "task": "Click Next to continue", - "previewHTML": "

Your First Lesson

Create a JSON file in lessons/

{\n  \"id\": \"my-lesson\",\n  \"title\": \"My Lesson\",\n  \"lessons\": [...]\n}
", - "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; } .card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px; } h2 { color: #6366f1; margin-top: 0; } pre { background: #1e293b; color: #e2e8f0; padding: 12px; border-radius: 4px; overflow-x: auto; }", - "sandboxCSS": "", - "initialCode": "
\n

Your First Lesson

\n

Create a JSON file in lessons/

\n 
{\n  \"id\": \"my-lesson\",\n  \"title\": \"My Lesson\",\n  \"lessons\": [...]\n}
\n
", - "solution": "
\n

Your First Lesson

\n

Create a JSON file in lessons/

\n 
{\n  \"id\": \"my-lesson\",\n  \"title\": \"My Lesson\",\n  \"lessons\": [...]\n}
\n
", - "previewContainer": "preview-area", - "validations": [ - { - "type": "contains", - "value": "card", - "message": "Click Next to continue" - } - ] - }, - { - "id": "keep-learning", - "title": "Keep Learning", - "description": "Your journey continues!

Recommended resources:
• MDN Web Docs - The definitive web development reference
• CSS-Tricks - Practical CSS techniques and tutorials
• web.dev - Modern web development best practices

Practice projects:
• Build your personal portfolio website
• Recreate your favorite website's layout
• Create a responsive landing page
• Build a CSS-only interactive component

Remember: The best way to learn is by building. Start small, iterate, and have fun!

Thank you for learning with Code Crispies!", - "task": "Explore the Playground", - "previewHTML": "
🎉

Happy Coding!

See you in the code!

", - "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; display: flex; align-items: center; justify-content: center; min-height: 200px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .message { text-align: center; color: white; } .emoji { font-size: 4rem; display: block; margin-bottom: 1rem; } h1 { margin: 0 0 0.5rem; } p { margin: 0; opacity: 0.9; }", - "sandboxCSS": "", - "initialCode": "
\n 🎉\n

Happy Coding!

\n

See you in the code!

\n
", - "solution": "
\n 🎉\n

Happy Coding!

\n

See you in the code!

\n
", - "previewContainer": "preview-area", - "validations": [ - { - "type": "contains", - "value": "message", - "message": "Explore the Playground" - } - ] } ] } diff --git a/lessons/ar/00-welcome.json b/lessons/ar/00-welcome.json index 71274c3..637cb8f 100644 --- a/lessons/ar/00-welcome.json +++ b/lessons/ar/00-welcome.json @@ -1,17 +1,17 @@ { "$schema": "../../schemas/code-crispies-module-schema.json", "id": "welcome", - "title": "Code Crispies", - "description": "مرحباً بك في Code Crispies - منصتك التفاعلية لتعلم تطوير الويب", + "title": "مرحباً", + "description": "ابدأ مع Code Crispies", "mode": "html", "difficulty": "beginner", "excludeFromProgress": true, "lessons": [ { - "id": "get-started", - "title": "ابدأ", - "description": "Code Crispies منصة مجانية ومفتوحة المصدر لتعلم تطوير الويب من خلال التمارين العملية. لا حاجة لحساب!

ما ستتعلمه:
• HTML - العناصر الدلالية، النماذج، الجداول، SVG (HTML كتلي وسطري، HTML النماذج، HTML الجداول)
• CSS - المحددات، نموذج الصندوق، flexbox، الحركات (CSS المحددات، CSS نموذج الصندوق، CSS Flexbox)
• التصميم المتجاوب - استعلامات الوسائط وتخطيطات mobile-first

كيف يعمل:
1. اقرأ المهمة في اللوحة اليسرى
2. اكتب الكود في المحرر
3. شاهد النتائج مباشرة في المعاينة
4. احصل على ملاحظات فورية مع تلميحات

اختصارات لوحة المفاتيح: Ctrl+Z تراجع، Ctrl+Shift+Z إعادة

المزيد من الموارد:
• HTML over JS - HTML الأصلي مقابل حلول JavaScript
• Web Engineering Mandala - خارطة تقنيات JavaScript", - "task": "اكتب Hello World", + "id": "hello", + "title": "أهلاً!", + "description": "مرحباً بك في Code Crispies! تعلم CSS و HTML من خلال تمارين عملية.

كيف يعمل:
1. اقرأ المهمة على اليسار
2. اكتب الكود في المحرر
3. شاهد النتائج مباشرة في المعاينة

نصائح: استخدم Ctrl+Z للتراجع. افتح القائمة (☰) لاستكشاف جميع الوحدات.", + "task": "اكتب Hello World للبدء", "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; font-size: 2rem; color: #6366f1; font-weight: bold; }", "sandboxCSS": "", @@ -25,39 +25,6 @@ "message": "اكتب Hello World" } ] - }, - { - "id": "overview", - "title": "نظرة عامة", - "description": "أنت جاهز! افتح القائمة (☰) لاستكشاف جميع الوحدات.

مسار التعلم الموصى به:
1. HTML كتلي وسطري - افهم عناصر الحاوية مقابل السطرية
2. HTML النماذج - أنشئ نماذج تفاعلية مع التحقق
3. CSS المحددات - استهدف العناصر بدقة
4. CSS نموذج الصندوق - أتقن padding، margin، borders
5. CSS Flexbox - أنشئ تخطيطات مرنة
6. CSS الحركات - أضف الحركة والانتقالات

نصائح:
• استخدم إظهار المتوقع لرؤية النتيجة المستهدفة
• يُحفظ تقدمك تلقائياً
• جرب Emmet في وضع HTML: ul>li*3 + Tab

مفتوح المصدر:
• Gitea (Source) · GitHub (Mirror)
• صُنع بواسطة LibreTECH · Michael Czechowski", - "task": "انقر التالي للمتابعة", - "previewHTML": "

Hello World! 🌍

Hallo Welt!

Bonjour le monde!

¡Hola Mundo!

Ciao Mondo!

Olá Mundo!

こんにちは世界!

你好世界!

안녕 세상!

Привет мир!

שלום עולם!

مرحبا بالعالم!

", - "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 12px; } p { margin: 6px 0; padding: 6px 12px; border-radius: 6px; font-weight: 600; font-size: 0.95em; } p:nth-child(1) { background: #fef3c7; color: #92400e; font-size: 1.2em; } p:nth-child(2) { background: #dcfce7; color: #166534; } p:nth-child(3) { background: #dbeafe; color: #1e40af; } p:nth-child(4) { background: #fce7f3; color: #9d174d; } p:nth-child(5) { background: #e0e7ff; color: #4338ca; } p:nth-child(6) { background: #fef9c3; color: #854d0e; } p:nth-child(7) { background: #fee2e2; color: #991b1b; } p:nth-child(8) { background: #f3e8ff; color: #7c3aed; } p:nth-child(9) { background: #ccfbf1; color: #0f766e; } p:nth-child(10) { background: #fae8ff; color: #86198f; } p:nth-child(11) { background: #fef3c7; color: #b45309; } p:nth-child(12) { background: #d1fae5; color: #047857; }", - "sandboxCSS": "", - "initialCode": "

Hello World! 🌍

\n

Hallo Welt!

\n

Bonjour le monde!

\n

¡Hola Mundo!

\n

Ciao Mondo!

\n

Olá Mundo!

\n

こんにちは世界!

\n

你好世界!

\n

안녕 세상!

\n

Привет мир!

\n

שלום עולם!

\n

مرحبا بالعالم!

", - "solution": "

Hello World! 🌍

\n

Hallo Welt!

\n

Bonjour le monde!

\n

¡Hola Mundo!

\n

Ciao Mondo!

\n

Olá Mundo!

\n

こんにちは世界!

\n

你好世界!

\n

안녕 세상!

\n

Привет мир!

\n

שלום עולם!

\n

مرحبا بالعالم!

", - "previewContainer": "preview-area", - "validations": [ - { - "type": "contains", - "value": "Hello", - "message": "انقر التالي للمتابعة" - } - ] - }, - { - "id": "playground", - "title": "Playground", - "mode": "playground", - "description": "", - "task": "", - "previewHTML": "", - "previewBaseCSS": "", - "sandboxCSS": "", - "initialCode": "\n\n

Hello World

\n

Start coding!

", - "solution": "", - "previewContainer": "preview-area", - "validations": [] } ] } diff --git a/lessons/de/00-welcome.json b/lessons/de/00-welcome.json index 0e53997..282c8ba 100644 --- a/lessons/de/00-welcome.json +++ b/lessons/de/00-welcome.json @@ -1,17 +1,17 @@ { "$schema": "../../schemas/code-crispies-module-schema.json", "id": "welcome", - "title": "Code Crispies", - "description": "Willkommen bei Code Crispies - deine interaktive Lernplattform für Webentwicklung", + "title": "Willkommen", + "description": "Erste Schritte mit Code Crispies", "mode": "html", "difficulty": "beginner", "excludeFromProgress": true, "lessons": [ { - "id": "get-started", - "title": "Los geht's", - "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+Z rückgängig, Strg+Umschalt+Z wiederholen

Weitere Ressourcen:
• HTML over JS - Native HTML vs JavaScript-Lösungen
• Web Engineering Mandala - JavaScript Technologie-Roadmap", - "task": "Schreibe Hello World", + "id": "hello", + "title": "Hallo!", + "description": "Willkommen bei Code Crispies! Lerne CSS und HTML durch praktische Übungen.

So funktioniert's:
1. Lies die Aufgabe links
2. Schreibe Code im Editor
3. Sieh Live-Ergebnisse in der Vorschau

Tipps: Nutze Strg+Z zum Rückgängigmachen. Öffne das Menü (☰) um alle Module zu erkunden.", + "task": "Schreibe Hello World zum Starten", "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; font-size: 2rem; color: #6366f1; font-weight: bold; }", "sandboxCSS": "", @@ -25,39 +25,6 @@ "message": "Schreibe Hello World" } ] - }, - { - "id": "overview", - "title": "Übersicht", - "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:
• Gitea (Source) · GitHub (Mirror)
• Entwickelt von LibreTECH · Michael Czechowski", - "task": "Klicke auf Weiter", - "previewHTML": "

Hello World! 🌍

Hallo Welt!

Bonjour le monde!

¡Hola Mundo!

Ciao Mondo!

Olá Mundo!

こんにちは世界!

你好世界!

안녕 세상!

Привет мир!

שלום עולם!

مرحبا بالعالم!

", - "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 12px; } p { margin: 6px 0; padding: 6px 12px; border-radius: 6px; font-weight: 600; font-size: 0.95em; } p:nth-child(1) { background: #fef3c7; color: #92400e; font-size: 1.2em; } p:nth-child(2) { background: #dcfce7; color: #166534; } p:nth-child(3) { background: #dbeafe; color: #1e40af; } p:nth-child(4) { background: #fce7f3; color: #9d174d; } p:nth-child(5) { background: #e0e7ff; color: #4338ca; } p:nth-child(6) { background: #fef9c3; color: #854d0e; } p:nth-child(7) { background: #fee2e2; color: #991b1b; } p:nth-child(8) { background: #f3e8ff; color: #7c3aed; } p:nth-child(9) { background: #ccfbf1; color: #0f766e; } p:nth-child(10) { background: #fae8ff; color: #86198f; } p:nth-child(11) { background: #fef3c7; color: #b45309; } p:nth-child(12) { background: #d1fae5; color: #047857; }", - "sandboxCSS": "", - "initialCode": "

Hello World! 🌍

\n

Hallo Welt!

\n

Bonjour le monde!

\n

¡Hola Mundo!

\n

Ciao Mondo!

\n

Olá Mundo!

\n

こんにちは世界!

\n

你好世界!

\n

안녕 세상!

\n

Привет мир!

\n

שלום עולם!

\n

مرحبا بالعالم!

", - "solution": "

Hello World! 🌍

\n

Hallo Welt!

\n

Bonjour le monde!

\n

¡Hola Mundo!

\n

Ciao Mondo!

\n

Olá Mundo!

\n

こんにちは世界!

\n

你好世界!

\n

안녕 세상!

\n

Привет мир!

\n

שלום עולם!

\n

مرحبا بالعالم!

", - "previewContainer": "preview-area", - "validations": [ - { - "type": "contains", - "value": "Hello", - "message": "Klicke auf Weiter" - } - ] - }, - { - "id": "playground", - "title": "Playground", - "mode": "playground", - "description": "", - "task": "", - "previewHTML": "", - "previewBaseCSS": "", - "sandboxCSS": "", - "initialCode": "\n\n

Hello World

\n

Start coding!

", - "solution": "", - "previewContainer": "preview-area", - "validations": [] } ] } diff --git a/lessons/es/00-welcome.json b/lessons/es/00-welcome.json index 438e6b2..5684142 100644 --- a/lessons/es/00-welcome.json +++ b/lessons/es/00-welcome.json @@ -1,17 +1,17 @@ { "$schema": "../../schemas/code-crispies-module-schema.json", "id": "welcome", - "title": "Code Crispies", - "description": "Bienvenido a Code Crispies - tu plataforma interactiva de aprendizaje de desarrollo web", + "title": "Bienvenido", + "description": "Comienza con Code Crispies", "mode": "html", "difficulty": "beginner", "excludeFromProgress": true, "lessons": [ { - "id": "get-started", - "title": "Comenzar", - "description": "Code Crispies es una plataforma gratuita y de código abierto para aprender desarrollo web mediante ejercicios prácticos. ¡No se requiere cuenta!

Lo que aprenderás:
• HTML - Elementos semánticos, formularios, tablas, SVG (HTML Bloque e Inline, HTML Formularios, HTML Tablas)
• CSS - Selectores, modelo de caja, flexbox, animaciones (CSS Selectores, CSS Modelo de Caja, CSS Flexbox)
• Diseño Responsivo - Media queries y layouts mobile-first

Cómo funciona:
1. Lee la tarea en el panel izquierdo
2. Escribe código en el editor
3. Ve los resultados en vivo en la vista previa
4. Recibe retroalimentación instantánea con pistas

Atajos de teclado: Ctrl+Z deshacer, Ctrl+Shift+Z rehacer

Más recursos:
• HTML over JS - HTML nativo vs soluciones JavaScript
• Web Engineering Mandala - Mapa de tecnologías JavaScript", - "task": "Escribe Hello World", + "id": "hello", + "title": "¡Hola!", + "description": "¡Bienvenido a Code Crispies! Aprende CSS y HTML con ejercicios prácticos.

Cómo funciona:
1. Lee la tarea a la izquierda
2. Escribe código en el editor
3. Ve los resultados en vivo en la vista previa

Consejos: Usa Ctrl+Z para deshacer. Abre el menú (☰) para explorar todos los módulos.", + "task": "Escribe Hello World para comenzar", "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; font-size: 2rem; color: #6366f1; font-weight: bold; }", "sandboxCSS": "", @@ -25,39 +25,6 @@ "message": "Escribe Hello World" } ] - }, - { - "id": "overview", - "title": "Vista General", - "description": "¡Estás listo! Abre el menú (☰) para explorar todos los módulos.

Ruta de aprendizaje recomendada:
1. HTML Bloque e Inline - Entiende elementos contenedores vs inline
2. HTML Formularios - Crea formularios interactivos con validación
3. CSS Selectores - Selecciona elementos con precisión
4. CSS Modelo de Caja - Domina padding, margin, borders
5. CSS Flexbox - Crea layouts flexibles
6. CSS Animaciones - Añade movimiento y transiciones

Consejos:
• Usa Mostrar Esperado para ver el resultado objetivo
• Tu progreso se guarda automáticamente
• Prueba Emmet en modo HTML: ul>li*3 + Tab

Open Source:
• Gitea (Source) · GitHub (Mirror)
• Hecho por LibreTECH · Michael Czechowski", - "task": "Haz clic en Siguiente para continuar", - "previewHTML": "

Hello World! 🌍

Hallo Welt!

Bonjour le monde!

¡Hola Mundo!

Ciao Mondo!

Olá Mundo!

こんにちは世界!

你好世界!

안녕 세상!

Привет мир!

שלום עולם!

مرحبا بالعالم!

", - "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 12px; } p { margin: 6px 0; padding: 6px 12px; border-radius: 6px; font-weight: 600; font-size: 0.95em; } p:nth-child(1) { background: #fef3c7; color: #92400e; font-size: 1.2em; } p:nth-child(2) { background: #dcfce7; color: #166534; } p:nth-child(3) { background: #dbeafe; color: #1e40af; } p:nth-child(4) { background: #fce7f3; color: #9d174d; } p:nth-child(5) { background: #e0e7ff; color: #4338ca; } p:nth-child(6) { background: #fef9c3; color: #854d0e; } p:nth-child(7) { background: #fee2e2; color: #991b1b; } p:nth-child(8) { background: #f3e8ff; color: #7c3aed; } p:nth-child(9) { background: #ccfbf1; color: #0f766e; } p:nth-child(10) { background: #fae8ff; color: #86198f; } p:nth-child(11) { background: #fef3c7; color: #b45309; } p:nth-child(12) { background: #d1fae5; color: #047857; }", - "sandboxCSS": "", - "initialCode": "

Hello World! 🌍

\n

Hallo Welt!

\n

Bonjour le monde!

\n

¡Hola Mundo!

\n

Ciao Mondo!

\n

Olá Mundo!

\n

こんにちは世界!

\n

你好世界!

\n

안녕 세상!

\n

Привет мир!

\n

שלום עולם!

\n

مرحبا بالعالم!

", - "solution": "

Hello World! 🌍

\n

Hallo Welt!

\n

Bonjour le monde!

\n

¡Hola Mundo!

\n

Ciao Mondo!

\n

Olá Mundo!

\n

こんにちは世界!

\n

你好世界!

\n

안녕 세상!

\n

Привет мир!

\n

שלום עולם!

\n

مرحبا بالعالم!

", - "previewContainer": "preview-area", - "validations": [ - { - "type": "contains", - "value": "Hello", - "message": "Haz clic en Siguiente para continuar" - } - ] - }, - { - "id": "playground", - "title": "Playground", - "mode": "playground", - "description": "", - "task": "", - "previewHTML": "", - "previewBaseCSS": "", - "sandboxCSS": "", - "initialCode": "\n\n

Hello World

\n

Start coding!

", - "solution": "", - "previewContainer": "preview-area", - "validations": [] } ] } diff --git a/lessons/pl/00-welcome.json b/lessons/pl/00-welcome.json index 25bf799..590738a 100644 --- a/lessons/pl/00-welcome.json +++ b/lessons/pl/00-welcome.json @@ -1,17 +1,17 @@ { "$schema": "../../schemas/code-crispies-module-schema.json", "id": "welcome", - "title": "Code Crispies", - "description": "Witaj w Code Crispies - twojej interaktywnej platformie do nauki tworzenia stron", + "title": "Witaj", + "description": "Rozpocznij przygodę z Code Crispies", "mode": "html", "difficulty": "beginner", "excludeFromProgress": true, "lessons": [ { - "id": "get-started", - "title": "Rozpocznij", - "description": "Code Crispies to darmowa platforma open-source do nauki tworzenia stron przez praktyczne ćwiczenia. Konto nie jest wymagane!

Czego się nauczysz:
• HTML - Elementy semantyczne, formularze, tabele, SVG (HTML Blokowe i Liniowe, HTML Formularze, HTML Tabele)
• CSS - Selektory, model pudełkowy, flexbox, animacje (CSS Selektory, CSS Model pudełkowy, CSS Flexbox)
• Responsive Design - Media queries i układy mobile-first

Jak to działa:
1. Przeczytaj zadanie w lewym panelu
2. Napisz kod w edytorze
3. Zobacz wyniki na żywo w podglądzie
4. Otrzymaj natychmiastową informację zwrotną ze wskazówkami

Skróty klawiszowe: Ctrl+Z cofnij, Ctrl+Shift+Z ponów

Więcej zasobów:
• HTML over JS - Natywny HTML vs rozwiązania JavaScript
• Web Engineering Mandala - Mapa technologii JavaScript", - "task": "Napisz Hello World", + "id": "hello", + "title": "Cześć!", + "description": "Witaj w Code Crispies! Naucz się CSS i HTML poprzez praktyczne ćwiczenia.

Jak to działa:
1. Przeczytaj zadanie po lewej
2. Napisz kod w edytorze
3. Zobacz wyniki na żywo w podglądzie

Wskazówki: Użyj Ctrl+Z aby cofnąć. Otwórz menu (☰) aby przeglądać wszystkie moduły.", + "task": "Napisz Hello World aby rozpocząć", "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; font-size: 2rem; color: #6366f1; font-weight: bold; }", "sandboxCSS": "", @@ -25,39 +25,6 @@ "message": "Napisz Hello World" } ] - }, - { - "id": "overview", - "title": "Przegląd", - "description": "Jesteś gotowy! Otwórz menu (☰) aby odkryć wszystkie moduły.

Zalecana ścieżka nauki:
1. HTML Blokowe i Liniowe - Zrozum elementy kontenerowe vs liniowe
2. HTML Formularze - Twórz interaktywne formularze z walidacją
3. CSS Selektory - Celuj w elementy precyzyjnie
4. CSS Model pudełkowy - Opanuj padding, margin, borders
5. CSS Flexbox - Twórz elastyczne układy
6. CSS Animacje - Dodaj ruch i przejścia

Wskazówki:
• Użyj Pokaż oczekiwane aby zobaczyć docelowy wynik
• Twój postęp jest zapisywany automatycznie
• Wypróbuj Emmet w trybie HTML: ul>li*3 + Tab

Open Source:
• Gitea (Source) · GitHub (Mirror)
• Stworzone przez LibreTECH · Michael Czechowski", - "task": "Kliknij Dalej aby kontynuować", - "previewHTML": "

Hello World! 🌍

Hallo Welt!

Bonjour le monde!

¡Hola Mundo!

Ciao Mondo!

Olá Mundo!

こんにちは世界!

你好世界!

안녕 세상!

Привет мир!

שלום עולם!

مرحبا بالعالم!

", - "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 12px; } p { margin: 6px 0; padding: 6px 12px; border-radius: 6px; font-weight: 600; font-size: 0.95em; } p:nth-child(1) { background: #fef3c7; color: #92400e; font-size: 1.2em; } p:nth-child(2) { background: #dcfce7; color: #166534; } p:nth-child(3) { background: #dbeafe; color: #1e40af; } p:nth-child(4) { background: #fce7f3; color: #9d174d; } p:nth-child(5) { background: #e0e7ff; color: #4338ca; } p:nth-child(6) { background: #fef9c3; color: #854d0e; } p:nth-child(7) { background: #fee2e2; color: #991b1b; } p:nth-child(8) { background: #f3e8ff; color: #7c3aed; } p:nth-child(9) { background: #ccfbf1; color: #0f766e; } p:nth-child(10) { background: #fae8ff; color: #86198f; } p:nth-child(11) { background: #fef3c7; color: #b45309; } p:nth-child(12) { background: #d1fae5; color: #047857; }", - "sandboxCSS": "", - "initialCode": "

Hello World! 🌍

\n

Hallo Welt!

\n

Bonjour le monde!

\n

¡Hola Mundo!

\n

Ciao Mondo!

\n

Olá Mundo!

\n

こんにちは世界!

\n

你好世界!

\n

안녕 세상!

\n

Привет мир!

\n

שלום עולם!

\n

مرحبا بالعالم!

", - "solution": "

Hello World! 🌍

\n

Hallo Welt!

\n

Bonjour le monde!

\n

¡Hola Mundo!

\n

Ciao Mondo!

\n

Olá Mundo!

\n

こんにちは世界!

\n

你好世界!

\n

안녕 세상!

\n

Привет мир!

\n

שלום עולם!

\n

مرحبا بالعالم!

", - "previewContainer": "preview-area", - "validations": [ - { - "type": "contains", - "value": "Hello", - "message": "Kliknij Dalej aby kontynuować" - } - ] - }, - { - "id": "playground", - "title": "Playground", - "mode": "playground", - "description": "", - "task": "", - "previewHTML": "", - "previewBaseCSS": "", - "sandboxCSS": "", - "initialCode": "\n\n

Hello World

\n

Start coding!

", - "solution": "", - "previewContainer": "preview-area", - "validations": [] } ] } diff --git a/lessons/uk/00-welcome.json b/lessons/uk/00-welcome.json index 908b05f..f2d9fe9 100644 --- a/lessons/uk/00-welcome.json +++ b/lessons/uk/00-welcome.json @@ -1,17 +1,17 @@ { "$schema": "../../schemas/code-crispies-module-schema.json", "id": "welcome", - "title": "Code Crispies", - "description": "Ласкаво просимо до Code Crispies - вашої інтерактивної платформи для вивчення веб-розробки", + "title": "Ласкаво просимо", + "description": "Почніть з Code Crispies", "mode": "html", "difficulty": "beginner", "excludeFromProgress": true, "lessons": [ { - "id": "get-started", - "title": "Почати", - "description": "Code Crispies - це безкоштовна платформа з відкритим кодом для вивчення веб-розробки через практичні вправи. Обліковий запис не потрібен!

Що ви вивчите:
• HTML - Семантичні елементи, форми, таблиці, SVG (HTML Блокові та рядкові, HTML Форми, HTML Таблиці)
• CSS - Селектори, блокова модель, flexbox, анімації (CSS Селектори, CSS Блокова модель, CSS Flexbox)
• Адаптивний дизайн - Media queries та mobile-first макети

Як це працює:
1. Прочитайте завдання в лівій панелі
2. Напишіть код в редакторі
3. Побачте результати в попередньому перегляді
4. Отримайте миттєвий зворотний зв'язок з підказками

Гарячі клавіші: Ctrl+Z скасувати, Ctrl+Shift+Z повторити

Більше ресурсів:
• HTML over JS - Нативний HTML проти JavaScript рішень
• Web Engineering Mandala - Карта JavaScript технологій", - "task": "Напишіть Hello World", + "id": "hello", + "title": "Привіт!", + "description": "Ласкаво просимо до Code Crispies! Вивчайте CSS та HTML через практичні вправи.

Як це працює:
1. Прочитайте завдання зліва
2. Напишіть код в редакторі
3. Побачте результати в попередньому перегляді

Поради: Використовуйте Ctrl+Z для скасування. Відкрийте меню (☰) щоб переглянути всі модулі.", + "task": "Напишіть Hello World щоб почати", "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; font-size: 2rem; color: #6366f1; font-weight: bold; }", "sandboxCSS": "", @@ -25,39 +25,6 @@ "message": "Напишіть Hello World" } ] - }, - { - "id": "overview", - "title": "Огляд", - "description": "Ви готові! Відкрийте меню (☰) щоб дослідити всі модулі.

Рекомендований шлях навчання:
1. HTML Блокові та рядкові - Зрозумійте контейнерні vs рядкові елементи
2. HTML Форми - Створюйте інтерактивні форми з валідацією
3. CSS Селектори - Точно вибирайте елементи
4. CSS Блокова модель - Опануйте padding, margin, borders
5. CSS Flexbox - Створюйте гнучкі макети
6. CSS Анімації - Додавайте рух та переходи

Поради:
• Використовуйте Показати очікуване щоб побачити цільовий результат
• Ваш прогрес зберігається автоматично
• Спробуйте Emmet в режимі HTML: ul>li*3 + Tab

Open Source:
• Gitea (Source) · GitHub (Mirror)
• Створено LibreTECH · Michael Czechowski", - "task": "Натисніть Далі щоб продовжити", - "previewHTML": "

Hello World! 🌍

Hallo Welt!

Bonjour le monde!

¡Hola Mundo!

Ciao Mondo!

Olá Mundo!

こんにちは世界!

你好世界!

안녕 세상!

Привет мир!

שלום עולם!

مرحبا بالعالم!

", - "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 12px; } p { margin: 6px 0; padding: 6px 12px; border-radius: 6px; font-weight: 600; font-size: 0.95em; } p:nth-child(1) { background: #fef3c7; color: #92400e; font-size: 1.2em; } p:nth-child(2) { background: #dcfce7; color: #166534; } p:nth-child(3) { background: #dbeafe; color: #1e40af; } p:nth-child(4) { background: #fce7f3; color: #9d174d; } p:nth-child(5) { background: #e0e7ff; color: #4338ca; } p:nth-child(6) { background: #fef9c3; color: #854d0e; } p:nth-child(7) { background: #fee2e2; color: #991b1b; } p:nth-child(8) { background: #f3e8ff; color: #7c3aed; } p:nth-child(9) { background: #ccfbf1; color: #0f766e; } p:nth-child(10) { background: #fae8ff; color: #86198f; } p:nth-child(11) { background: #fef3c7; color: #b45309; } p:nth-child(12) { background: #d1fae5; color: #047857; }", - "sandboxCSS": "", - "initialCode": "

Hello World! 🌍

\n

Hallo Welt!

\n

Bonjour le monde!

\n

¡Hola Mundo!

\n

Ciao Mondo!

\n

Olá Mundo!

\n

こんにちは世界!

\n

你好世界!

\n

안녕 세상!

\n

Привет мир!

\n

שלום עולם!

\n

مرحبا بالعالم!

", - "solution": "

Hello World! 🌍

\n

Hallo Welt!

\n

Bonjour le monde!

\n

¡Hola Mundo!

\n

Ciao Mondo!

\n

Olá Mundo!

\n

こんにちは世界!

\n

你好世界!

\n

안녕 세상!

\n

Привет мир!

\n

שלום עולם!

\n

مرحبا بالعالم!

", - "previewContainer": "preview-area", - "validations": [ - { - "type": "contains", - "value": "Hello", - "message": "Натисніть Далі щоб продовжити" - } - ] - }, - { - "id": "playground", - "title": "Playground", - "mode": "playground", - "description": "", - "task": "", - "previewHTML": "", - "previewBaseCSS": "", - "sandboxCSS": "", - "initialCode": "\n\n

Hello World

\n

Start coding!

", - "solution": "", - "previewContainer": "preview-area", - "validations": [] } ] } diff --git a/src/config/lessons.js b/src/config/lessons.js index 118949d..8eb7144 100644 --- a/src/config/lessons.js +++ b/src/config/lessons.js @@ -21,6 +21,7 @@ import htmlTablesEN from "../../lessons/30-html-tables.json"; import htmlSvgEN from "../../lessons/32-html-svg.json"; import flexboxEN from "../../lessons/flexbox.json"; import gridEN from "../../lessons/grid.json"; +import playgroundEN from "../../lessons/98-playground.json"; import goodbyeEN from "../../lessons/99-goodbye.json"; // German lesson imports @@ -123,8 +124,9 @@ const moduleStoreEN = [ htmlFormsBasicEN, htmlFormsValidationEN, htmlTablesEN, - // Goodbye - goodbyeEN + // Outro + goodbyeEN, + playgroundEN ]; // German module store - ordered for design students @@ -152,8 +154,9 @@ const moduleStoreDE = [ htmlFormsBasicDE, htmlFormsValidationDE, htmlTablesDE, - // Goodbye - goodbyeEN + // Outro + goodbyeEN, + playgroundEN ]; // Polish module store - ordered for design students @@ -181,8 +184,9 @@ const moduleStorePL = [ htmlFormsBasicPL, htmlFormsValidationPL, htmlTablesPL, - // Goodbye - goodbyeEN + // Outro + goodbyeEN, + playgroundEN ]; // Spanish module store - ordered for design students @@ -210,8 +214,9 @@ const moduleStoreES = [ htmlFormsBasicES, htmlFormsValidationES, htmlTablesES, - // Goodbye - goodbyeEN + // Outro + goodbyeEN, + playgroundEN ]; // Arabic module store - ordered for design students @@ -239,8 +244,9 @@ const moduleStoreAR = [ htmlFormsBasicAR, htmlFormsValidationAR, htmlTablesAR, - // Goodbye - goodbyeEN + // Outro + goodbyeEN, + playgroundEN ]; // Ukrainian module store - ordered for design students @@ -268,8 +274,9 @@ const moduleStoreUK = [ htmlFormsBasicUK, htmlFormsValidationUK, htmlTablesUK, - // Goodbye - goodbyeEN + // Outro + goodbyeEN, + playgroundEN ]; // Map of language codes to module stores