refactor: simplify onboarding/offboarding and move playground to end
- Reduce welcome module from 3 lessons to 1 concise intro - Reduce goodbye module from 3 lessons to 1 concise outro - Create standalone playground module at end of module list - Update all translated welcome files (de, pl, es, ar, uk) - Playground now appears after goodbye, less prominent 🤖 Generated with [Claude Code](https://claude.com/claude-code)
This commit is contained in:
@@ -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": "<strong>Code Crispies</strong> is a free, open-source platform for learning web development through hands-on exercises. No account required!<br><br><strong>What you'll learn:</strong><br>• <strong>HTML</strong> - Semantic elements, forms, tables, SVG (<em>HTML Block & Inline</em>, <em>HTML Forms</em>, <em>HTML Tables</em>)<br>• <strong>CSS</strong> - Selectors, box model, flexbox, animations (<em>CSS Selectors</em>, <em>CSS Box Model</em>, <em>CSS Flexbox</em>)<br>• <strong>Responsive Design</strong> - Media queries and mobile-first layouts<br><br><strong>How it works:</strong><br>1. Read the task in the left panel<br>2. Write code in the editor<br>3. See live results in the preview<br>4. Get instant feedback with hints<br><br><strong>Keyboard shortcuts:</strong> <kbd>Ctrl+Z</kbd> to undo, <kbd>Ctrl+Shift+Z</kbd> to redo<br><br><strong>More resources:</strong><br>• <a href=\"https://nextlevelshit.github.io/html-over-js/\" target=\"_blank\">HTML over JS</a> - Native HTML vs JavaScript solutions<br>• <a href=\"https://nextlevelshit.github.io/web-engineering-mandala/\" target=\"_blank\">Web Engineering Mandala</a> - JavaScript technology roadmap",
|
||||
"task": "Write <code>Hello World</code>",
|
||||
"id": "hello",
|
||||
"title": "Hello!",
|
||||
"description": "<strong>Welcome to Code Crispies!</strong> Learn CSS and HTML through hands-on exercises.<br><br><strong>How it works:</strong><br>1. Read the task on the left<br>2. Write code in the editor<br>3. See live results in the preview<br><br><strong>Tips:</strong> Use <kbd>Ctrl+Z</kbd> to undo. Open the menu (☰) to browse all modules.",
|
||||
"task": "Write <code>Hello World</code> 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 <code>Hello World</code>"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "overview",
|
||||
"title": "Overview",
|
||||
"description": "<strong>You're ready!</strong> Open the menu (☰) to explore all modules.<br><br><strong>Recommended learning path:</strong><br>1. <em>HTML Block & Inline</em> - Understand container vs inline elements<br>2. <em>HTML Forms</em> - Build interactive forms with validation<br>3. <em>CSS Selectors</em> - Target elements precisely<br>4. <em>CSS Box Model</em> - Master padding, margin, borders<br>5. <em>CSS Flexbox</em> - Create flexible layouts<br>6. <em>CSS Animations</em> - Add motion and transitions<br><br><strong>Tips:</strong><br>• Use <em>Show Expected</em> to see the target result<br>• Your progress is saved automatically<br>• Try Emmet in HTML mode: <kbd>ul>li*3</kbd> + Tab<br><br><strong>Open Source:</strong><br>• <a href=\"https://git.librete.ch/libretech/code-crispies\" target=\"_blank\">Gitea (Source)</a> · <a href=\"https://github.com/nextlevelshit/code-crispies\" target=\"_blank\">GitHub (Mirror)</a><br>• Made by <a href=\"https://librete.ch\" target=\"_blank\">LibreTECH</a> · <a href=\"https://www.linkedin.com/in/michael-werner-czechowski\" target=\"_blank\">Michael Czechowski</a>",
|
||||
"task": "Click Next to continue",
|
||||
"previewHTML": "<p>Hello World! 🌍</p><p>Hallo Welt!</p><p>Bonjour le monde!</p><p>¡Hola Mundo!</p><p>Ciao Mondo!</p><p>Olá Mundo!</p><p>こんにちは世界!</p><p>你好世界!</p><p>안녕 세상!</p><p>Привет мир!</p><p dir=\"rtl\">שלום עולם!</p><p dir=\"rtl\">مرحبا بالعالم!</p>",
|
||||
"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": "<p>Hello World! 🌍</p>\n<p>Hallo Welt!</p>\n<p>Bonjour le monde!</p>\n<p>¡Hola Mundo!</p>\n<p>Ciao Mondo!</p>\n<p>Olá Mundo!</p>\n<p>こんにちは世界!</p>\n<p>你好世界!</p>\n<p>안녕 세상!</p>\n<p>Привет мир!</p>\n<p dir=\"rtl\">שלום עולם!</p>\n<p dir=\"rtl\">مرحبا بالعالم!</p>",
|
||||
"solution": "<p>Hello World! 🌍</p>\n<p>Hallo Welt!</p>\n<p>Bonjour le monde!</p>\n<p>¡Hola Mundo!</p>\n<p>Ciao Mondo!</p>\n<p>Olá Mundo!</p>\n<p>こんにちは世界!</p>\n<p>你好世界!</p>\n<p>안녕 세상!</p>\n<p>Привет мир!</p>\n<p dir=\"rtl\">שלום עולם!</p>\n<p dir=\"rtl\">مرحبا بالعالم!</p>",
|
||||
"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": "<style>\n body {\n font-family: system-ui, sans-serif;\n padding: 20px;\n }\n</style>\n\n<h1>Hello World</h1>\n<p>Start coding!</p>",
|
||||
"solution": "",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": []
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
25
lessons/98-playground.json
Normal file
25
lessons/98-playground.json
Normal file
@@ -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": "<style>\n body {\n font-family: system-ui, sans-serif;\n padding: 20px;\n }\n \n h1 {\n color: steelblue;\n }\n</style>\n\n<h1>Hello World</h1>\n<p>Write any HTML and CSS here!</p>",
|
||||
"solution": "",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": []
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -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": "<strong>Congratulations!</strong> You've made it through Code Crispies!<br><br>You've learned:<br>• <strong>HTML</strong> - Semantic elements, forms, tables, and more<br>• <strong>CSS</strong> - Selectors, box model, flexbox, grid, animations<br>• <strong>Responsive Design</strong> - Media queries and mobile-first layouts<br><br>These are the building blocks of every website on the internet. Keep practicing and building!",
|
||||
"id": "next-steps",
|
||||
"title": "Keep Going!",
|
||||
"description": "<strong>Great progress!</strong> You're building real web development skills.<br><br><strong>Continue learning:</strong><br>• <a href=\"https://developer.mozilla.org\" target=\"_blank\">MDN Web Docs</a> - The definitive reference<br>• <a href=\"https://css-tricks.com\" target=\"_blank\">CSS-Tricks</a> - Practical techniques<br><br><strong>Practice ideas:</strong><br>• Build your portfolio site<br>• Recreate a website you like<br>• Try the Playground to experiment freely<br><br><strong>Contribute:</strong> Code Crispies is <a href=\"https://git.librete.ch/libretech/code-crispies\" target=\"_blank\">open source</a>. Add lessons, fix bugs, or translate!",
|
||||
"task": "Type <code>Thank you!</code>",
|
||||
"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": "<p>Thank you!</p>",
|
||||
"solution": "Thank you!",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
@@ -25,44 +25,6 @@
|
||||
"message": "Type <code>Thank you!</code>"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "contribute",
|
||||
"title": "Contribute",
|
||||
"description": "<strong>Help others learn!</strong><br><br>Code Crispies is open source and always looking for new lessons. You can contribute by:<br><br>• <strong>Writing new lessons</strong> - Share your knowledge on topics we haven't covered<br>• <strong>Translating lessons</strong> - Help make Code Crispies accessible in more languages<br>• <strong>Fixing bugs</strong> - Found something broken? Help us fix it!<br>• <strong>Improving content</strong> - Make existing lessons clearer and better<br><br><strong>Get started:</strong><br>• <a href=\"https://git.librete.ch/libretech/code-crispies\" target=\"_blank\">Gitea Repository</a> - Main source code<br>• <a href=\"https://github.com/nextlevelshit/code-crispies\" target=\"_blank\">GitHub Mirror</a> - Alternative access<br><br>Lessons are simple JSON files in the <code>lessons/</code> folder. Check existing lessons for the format!",
|
||||
"task": "Click Next to continue",
|
||||
"previewHTML": "<div class=\"card\"><h2>Your First Lesson</h2><p>Create a JSON file in <code>lessons/</code></p><pre>{\n \"id\": \"my-lesson\",\n \"title\": \"My Lesson\",\n \"lessons\": [...]\n}</pre></div>",
|
||||
"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": "<div class=\"card\">\n <h2>Your First Lesson</h2>\n <p>Create a JSON file in <code>lessons/</code></p>\n <pre>{\n \"id\": \"my-lesson\",\n \"title\": \"My Lesson\",\n \"lessons\": [...]\n}</pre>\n</div>",
|
||||
"solution": "<div class=\"card\">\n <h2>Your First Lesson</h2>\n <p>Create a JSON file in <code>lessons/</code></p>\n <pre>{\n \"id\": \"my-lesson\",\n \"title\": \"My Lesson\",\n \"lessons\": [...]\n}</pre>\n</div>",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
"type": "contains",
|
||||
"value": "card",
|
||||
"message": "Click Next to continue"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "keep-learning",
|
||||
"title": "Keep Learning",
|
||||
"description": "<strong>Your journey continues!</strong><br><br><strong>Recommended resources:</strong><br>• <a href=\"https://developer.mozilla.org/en-US/docs/Web\" target=\"_blank\">MDN Web Docs</a> - The definitive web development reference<br>• <a href=\"https://css-tricks.com\" target=\"_blank\">CSS-Tricks</a> - Practical CSS techniques and tutorials<br>• <a href=\"https://web.dev\" target=\"_blank\">web.dev</a> - Modern web development best practices<br><br><strong>Practice projects:</strong><br>• Build your personal portfolio website<br>• Recreate your favorite website's layout<br>• Create a responsive landing page<br>• Build a CSS-only interactive component<br><br><strong>Remember:</strong> The best way to learn is by building. Start small, iterate, and have fun!<br><br><em>Thank you for learning with Code Crispies!</em>",
|
||||
"task": "Explore the Playground",
|
||||
"previewHTML": "<div class=\"message\"><span class=\"emoji\">🎉</span><h1>Happy Coding!</h1><p>See you in the code!</p></div>",
|
||||
"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": "<div class=\"message\">\n <span class=\"emoji\">🎉</span>\n <h1>Happy Coding!</h1>\n <p>See you in the code!</p>\n</div>",
|
||||
"solution": "<div class=\"message\">\n <span class=\"emoji\">🎉</span>\n <h1>Happy Coding!</h1>\n <p>See you in the code!</p>\n</div>",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
"type": "contains",
|
||||
"value": "message",
|
||||
"message": "Explore the Playground"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -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": "<strong>Code Crispies</strong> منصة مجانية ومفتوحة المصدر لتعلم تطوير الويب من خلال التمارين العملية. لا حاجة لحساب!<br><br><strong>ما ستتعلمه:</strong><br>• <strong>HTML</strong> - العناصر الدلالية، النماذج، الجداول، SVG (<em>HTML كتلي وسطري</em>، <em>HTML النماذج</em>، <em>HTML الجداول</em>)<br>• <strong>CSS</strong> - المحددات، نموذج الصندوق، flexbox، الحركات (<em>CSS المحددات</em>، <em>CSS نموذج الصندوق</em>، <em>CSS Flexbox</em>)<br>• <strong>التصميم المتجاوب</strong> - استعلامات الوسائط وتخطيطات mobile-first<br><br><strong>كيف يعمل:</strong><br>1. اقرأ المهمة في اللوحة اليسرى<br>2. اكتب الكود في المحرر<br>3. شاهد النتائج مباشرة في المعاينة<br>4. احصل على ملاحظات فورية مع تلميحات<br><br><strong>اختصارات لوحة المفاتيح:</strong> <kbd>Ctrl+Z</kbd> تراجع، <kbd>Ctrl+Shift+Z</kbd> إعادة<br><br><strong>المزيد من الموارد:</strong><br>• <a href=\"https://nextlevelshit.github.io/html-over-js/\" target=\"_blank\">HTML over JS</a> - HTML الأصلي مقابل حلول JavaScript<br>• <a href=\"https://nextlevelshit.github.io/web-engineering-mandala/\" target=\"_blank\">Web Engineering Mandala</a> - خارطة تقنيات JavaScript",
|
||||
"task": "اكتب <code>Hello World</code>",
|
||||
"id": "hello",
|
||||
"title": "أهلاً!",
|
||||
"description": "<strong>مرحباً بك في Code Crispies!</strong> تعلم CSS و HTML من خلال تمارين عملية.<br><br><strong>كيف يعمل:</strong><br>1. اقرأ المهمة على اليسار<br>2. اكتب الكود في المحرر<br>3. شاهد النتائج مباشرة في المعاينة<br><br><strong>نصائح:</strong> استخدم <kbd>Ctrl+Z</kbd> للتراجع. افتح القائمة (☰) لاستكشاف جميع الوحدات.",
|
||||
"task": "اكتب <code>Hello World</code> للبدء",
|
||||
"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": "اكتب <code>Hello World</code>"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "overview",
|
||||
"title": "نظرة عامة",
|
||||
"description": "<strong>أنت جاهز!</strong> افتح القائمة (☰) لاستكشاف جميع الوحدات.<br><br><strong>مسار التعلم الموصى به:</strong><br>1. <em>HTML كتلي وسطري</em> - افهم عناصر الحاوية مقابل السطرية<br>2. <em>HTML النماذج</em> - أنشئ نماذج تفاعلية مع التحقق<br>3. <em>CSS المحددات</em> - استهدف العناصر بدقة<br>4. <em>CSS نموذج الصندوق</em> - أتقن padding، margin، borders<br>5. <em>CSS Flexbox</em> - أنشئ تخطيطات مرنة<br>6. <em>CSS الحركات</em> - أضف الحركة والانتقالات<br><br><strong>نصائح:</strong><br>• استخدم <em>إظهار المتوقع</em> لرؤية النتيجة المستهدفة<br>• يُحفظ تقدمك تلقائياً<br>• جرب Emmet في وضع HTML: <kbd>ul>li*3</kbd> + Tab<br><br><strong>مفتوح المصدر:</strong><br>• <a href=\"https://git.librete.ch/libretech/code-crispies\" target=\"_blank\">Gitea (Source)</a> · <a href=\"https://github.com/nextlevelshit/code-crispies\" target=\"_blank\">GitHub (Mirror)</a><br>• صُنع بواسطة <a href=\"https://librete.ch\" target=\"_blank\">LibreTECH</a> · <a href=\"https://www.linkedin.com/in/michael-werner-czechowski\" target=\"_blank\">Michael Czechowski</a>",
|
||||
"task": "انقر التالي للمتابعة",
|
||||
"previewHTML": "<p>Hello World! 🌍</p><p>Hallo Welt!</p><p>Bonjour le monde!</p><p>¡Hola Mundo!</p><p>Ciao Mondo!</p><p>Olá Mundo!</p><p>こんにちは世界!</p><p>你好世界!</p><p>안녕 세상!</p><p>Привет мир!</p><p dir=\"rtl\">שלום עולם!</p><p dir=\"rtl\">مرحبا بالعالم!</p>",
|
||||
"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": "<p>Hello World! 🌍</p>\n<p>Hallo Welt!</p>\n<p>Bonjour le monde!</p>\n<p>¡Hola Mundo!</p>\n<p>Ciao Mondo!</p>\n<p>Olá Mundo!</p>\n<p>こんにちは世界!</p>\n<p>你好世界!</p>\n<p>안녕 세상!</p>\n<p>Привет мир!</p>\n<p dir=\"rtl\">שלום עולם!</p>\n<p dir=\"rtl\">مرحبا بالعالم!</p>",
|
||||
"solution": "<p>Hello World! 🌍</p>\n<p>Hallo Welt!</p>\n<p>Bonjour le monde!</p>\n<p>¡Hola Mundo!</p>\n<p>Ciao Mondo!</p>\n<p>Olá Mundo!</p>\n<p>こんにちは世界!</p>\n<p>你好世界!</p>\n<p>안녕 세상!</p>\n<p>Привет мир!</p>\n<p dir=\"rtl\">שלום עולם!</p>\n<p dir=\"rtl\">مرحبا بالعالم!</p>",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
"type": "contains",
|
||||
"value": "Hello",
|
||||
"message": "انقر التالي للمتابعة"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "playground",
|
||||
"title": "Playground",
|
||||
"mode": "playground",
|
||||
"description": "",
|
||||
"task": "",
|
||||
"previewHTML": "",
|
||||
"previewBaseCSS": "",
|
||||
"sandboxCSS": "",
|
||||
"initialCode": "<style>\n body {\n font-family: system-ui, sans-serif;\n padding: 20px;\n }\n</style>\n\n<h1>Hello World</h1>\n<p>Start coding!</p>",
|
||||
"solution": "",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": []
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -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": "<strong>Code Crispies</strong> ist eine kostenlose Open-Source-Plattform zum Erlernen von Webentwicklung durch praktische Übungen. Kein Konto erforderlich!<br><br><strong>Was du lernst:</strong><br>• <strong>HTML</strong> - Semantische Elemente, Formulare, Tabellen, SVG (<em>HTML Block & Inline</em>, <em>HTML Formulare</em>, <em>HTML Tabellen</em>)<br>• <strong>CSS</strong> - Selektoren, Box-Model, Flexbox, Animationen (<em>CSS Selektoren</em>, <em>CSS Box-Model</em>, <em>CSS Flexbox</em>)<br>• <strong>Responsive Design</strong> - Media Queries und Mobile-First Layouts<br><br><strong>So funktioniert's:</strong><br>1. Lies die Aufgabe im linken Bereich<br>2. Schreibe Code im Editor<br>3. Sieh Live-Ergebnisse in der Vorschau<br>4. Bekomme sofortiges Feedback mit Hinweisen<br><br><strong>Tastenkürzel:</strong> <kbd>Strg+Z</kbd> rückgängig, <kbd>Strg+Umschalt+Z</kbd> wiederholen<br><br><strong>Weitere Ressourcen:</strong><br>• <a href=\"https://nextlevelshit.github.io/html-over-js/\" target=\"_blank\">HTML over JS</a> - Native HTML vs JavaScript-Lösungen<br>• <a href=\"https://nextlevelshit.github.io/web-engineering-mandala/\" target=\"_blank\">Web Engineering Mandala</a> - JavaScript Technologie-Roadmap",
|
||||
"task": "Schreibe <code>Hello World</code>",
|
||||
"id": "hello",
|
||||
"title": "Hallo!",
|
||||
"description": "<strong>Willkommen bei Code Crispies!</strong> Lerne CSS und HTML durch praktische Übungen.<br><br><strong>So funktioniert's:</strong><br>1. Lies die Aufgabe links<br>2. Schreibe Code im Editor<br>3. Sieh Live-Ergebnisse in der Vorschau<br><br><strong>Tipps:</strong> Nutze <kbd>Strg+Z</kbd> zum Rückgängigmachen. Öffne das Menü (☰) um alle Module zu erkunden.",
|
||||
"task": "Schreibe <code>Hello World</code> 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 <code>Hello World</code>"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "overview",
|
||||
"title": "Übersicht",
|
||||
"description": "<strong>Du bist bereit!</strong> Öffne das Menü (☰) um alle Module zu erkunden.<br><br><strong>Empfohlener Lernpfad:</strong><br>1. <em>HTML Block & Inline</em> - Container vs Inline-Elemente verstehen<br>2. <em>HTML Formulare</em> - Interaktive Formulare mit Validierung erstellen<br>3. <em>CSS Selektoren</em> - Elemente präzise ansprechen<br>4. <em>CSS Box-Model</em> - Padding, Margin, Borders meistern<br>5. <em>CSS Flexbox</em> - Flexible Layouts erstellen<br>6. <em>CSS Animationen</em> - Bewegung und Übergänge hinzufügen<br><br><strong>Tipps:</strong><br>• Nutze <em>Lösung einblenden</em> um das Zielergebnis zu sehen<br>• Dein Fortschritt wird automatisch gespeichert<br>• Probiere Emmet im HTML-Modus: <kbd>ul>li*3</kbd> + Tab<br><br><strong>Open Source:</strong><br>• <a href=\"https://git.librete.ch/libretech/code-crispies\" target=\"_blank\">Gitea (Source)</a> · <a href=\"https://github.com/nextlevelshit/code-crispies\" target=\"_blank\">GitHub (Mirror)</a><br>• Entwickelt von <a href=\"https://librete.ch\" target=\"_blank\">LibreTECH</a> · <a href=\"https://www.linkedin.com/in/michael-werner-czechowski\" target=\"_blank\">Michael Czechowski</a>",
|
||||
"task": "Klicke auf Weiter",
|
||||
"previewHTML": "<p>Hello World! 🌍</p><p>Hallo Welt!</p><p>Bonjour le monde!</p><p>¡Hola Mundo!</p><p>Ciao Mondo!</p><p>Olá Mundo!</p><p>こんにちは世界!</p><p>你好世界!</p><p>안녕 세상!</p><p>Привет мир!</p><p dir=\"rtl\">שלום עולם!</p><p dir=\"rtl\">مرحبا بالعالم!</p>",
|
||||
"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": "<p>Hello World! 🌍</p>\n<p>Hallo Welt!</p>\n<p>Bonjour le monde!</p>\n<p>¡Hola Mundo!</p>\n<p>Ciao Mondo!</p>\n<p>Olá Mundo!</p>\n<p>こんにちは世界!</p>\n<p>你好世界!</p>\n<p>안녕 세상!</p>\n<p>Привет мир!</p>\n<p dir=\"rtl\">שלום עולם!</p>\n<p dir=\"rtl\">مرحبا بالعالم!</p>",
|
||||
"solution": "<p>Hello World! 🌍</p>\n<p>Hallo Welt!</p>\n<p>Bonjour le monde!</p>\n<p>¡Hola Mundo!</p>\n<p>Ciao Mondo!</p>\n<p>Olá Mundo!</p>\n<p>こんにちは世界!</p>\n<p>你好世界!</p>\n<p>안녕 세상!</p>\n<p>Привет мир!</p>\n<p dir=\"rtl\">שלום עולם!</p>\n<p dir=\"rtl\">مرحبا بالعالم!</p>",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
"type": "contains",
|
||||
"value": "Hello",
|
||||
"message": "Klicke auf Weiter"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "playground",
|
||||
"title": "Playground",
|
||||
"mode": "playground",
|
||||
"description": "",
|
||||
"task": "",
|
||||
"previewHTML": "",
|
||||
"previewBaseCSS": "",
|
||||
"sandboxCSS": "",
|
||||
"initialCode": "<style>\n body {\n font-family: system-ui, sans-serif;\n padding: 20px;\n }\n</style>\n\n<h1>Hello World</h1>\n<p>Start coding!</p>",
|
||||
"solution": "",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": []
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -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": "<strong>Code Crispies</strong> es una plataforma gratuita y de código abierto para aprender desarrollo web mediante ejercicios prácticos. ¡No se requiere cuenta!<br><br><strong>Lo que aprenderás:</strong><br>• <strong>HTML</strong> - Elementos semánticos, formularios, tablas, SVG (<em>HTML Bloque e Inline</em>, <em>HTML Formularios</em>, <em>HTML Tablas</em>)<br>• <strong>CSS</strong> - Selectores, modelo de caja, flexbox, animaciones (<em>CSS Selectores</em>, <em>CSS Modelo de Caja</em>, <em>CSS Flexbox</em>)<br>• <strong>Diseño Responsivo</strong> - Media queries y layouts mobile-first<br><br><strong>Cómo funciona:</strong><br>1. Lee la tarea en el panel izquierdo<br>2. Escribe código en el editor<br>3. Ve los resultados en vivo en la vista previa<br>4. Recibe retroalimentación instantánea con pistas<br><br><strong>Atajos de teclado:</strong> <kbd>Ctrl+Z</kbd> deshacer, <kbd>Ctrl+Shift+Z</kbd> rehacer<br><br><strong>Más recursos:</strong><br>• <a href=\"https://nextlevelshit.github.io/html-over-js/\" target=\"_blank\">HTML over JS</a> - HTML nativo vs soluciones JavaScript<br>• <a href=\"https://nextlevelshit.github.io/web-engineering-mandala/\" target=\"_blank\">Web Engineering Mandala</a> - Mapa de tecnologías JavaScript",
|
||||
"task": "Escribe <code>Hello World</code>",
|
||||
"id": "hello",
|
||||
"title": "¡Hola!",
|
||||
"description": "<strong>¡Bienvenido a Code Crispies!</strong> Aprende CSS y HTML con ejercicios prácticos.<br><br><strong>Cómo funciona:</strong><br>1. Lee la tarea a la izquierda<br>2. Escribe código en el editor<br>3. Ve los resultados en vivo en la vista previa<br><br><strong>Consejos:</strong> Usa <kbd>Ctrl+Z</kbd> para deshacer. Abre el menú (☰) para explorar todos los módulos.",
|
||||
"task": "Escribe <code>Hello World</code> 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 <code>Hello World</code>"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "overview",
|
||||
"title": "Vista General",
|
||||
"description": "<strong>¡Estás listo!</strong> Abre el menú (☰) para explorar todos los módulos.<br><br><strong>Ruta de aprendizaje recomendada:</strong><br>1. <em>HTML Bloque e Inline</em> - Entiende elementos contenedores vs inline<br>2. <em>HTML Formularios</em> - Crea formularios interactivos con validación<br>3. <em>CSS Selectores</em> - Selecciona elementos con precisión<br>4. <em>CSS Modelo de Caja</em> - Domina padding, margin, borders<br>5. <em>CSS Flexbox</em> - Crea layouts flexibles<br>6. <em>CSS Animaciones</em> - Añade movimiento y transiciones<br><br><strong>Consejos:</strong><br>• Usa <em>Mostrar Esperado</em> para ver el resultado objetivo<br>• Tu progreso se guarda automáticamente<br>• Prueba Emmet en modo HTML: <kbd>ul>li*3</kbd> + Tab<br><br><strong>Open Source:</strong><br>• <a href=\"https://git.librete.ch/libretech/code-crispies\" target=\"_blank\">Gitea (Source)</a> · <a href=\"https://github.com/nextlevelshit/code-crispies\" target=\"_blank\">GitHub (Mirror)</a><br>• Hecho por <a href=\"https://librete.ch\" target=\"_blank\">LibreTECH</a> · <a href=\"https://www.linkedin.com/in/michael-werner-czechowski\" target=\"_blank\">Michael Czechowski</a>",
|
||||
"task": "Haz clic en Siguiente para continuar",
|
||||
"previewHTML": "<p>Hello World! 🌍</p><p>Hallo Welt!</p><p>Bonjour le monde!</p><p>¡Hola Mundo!</p><p>Ciao Mondo!</p><p>Olá Mundo!</p><p>こんにちは世界!</p><p>你好世界!</p><p>안녕 세상!</p><p>Привет мир!</p><p dir=\"rtl\">שלום עולם!</p><p dir=\"rtl\">مرحبا بالعالم!</p>",
|
||||
"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": "<p>Hello World! 🌍</p>\n<p>Hallo Welt!</p>\n<p>Bonjour le monde!</p>\n<p>¡Hola Mundo!</p>\n<p>Ciao Mondo!</p>\n<p>Olá Mundo!</p>\n<p>こんにちは世界!</p>\n<p>你好世界!</p>\n<p>안녕 세상!</p>\n<p>Привет мир!</p>\n<p dir=\"rtl\">שלום עולם!</p>\n<p dir=\"rtl\">مرحبا بالعالم!</p>",
|
||||
"solution": "<p>Hello World! 🌍</p>\n<p>Hallo Welt!</p>\n<p>Bonjour le monde!</p>\n<p>¡Hola Mundo!</p>\n<p>Ciao Mondo!</p>\n<p>Olá Mundo!</p>\n<p>こんにちは世界!</p>\n<p>你好世界!</p>\n<p>안녕 세상!</p>\n<p>Привет мир!</p>\n<p dir=\"rtl\">שלום עולם!</p>\n<p dir=\"rtl\">مرحبا بالعالم!</p>",
|
||||
"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": "<style>\n body {\n font-family: system-ui, sans-serif;\n padding: 20px;\n }\n</style>\n\n<h1>Hello World</h1>\n<p>Start coding!</p>",
|
||||
"solution": "",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": []
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -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": "<strong>Code Crispies</strong> to darmowa platforma open-source do nauki tworzenia stron przez praktyczne ćwiczenia. Konto nie jest wymagane!<br><br><strong>Czego się nauczysz:</strong><br>• <strong>HTML</strong> - Elementy semantyczne, formularze, tabele, SVG (<em>HTML Blokowe i Liniowe</em>, <em>HTML Formularze</em>, <em>HTML Tabele</em>)<br>• <strong>CSS</strong> - Selektory, model pudełkowy, flexbox, animacje (<em>CSS Selektory</em>, <em>CSS Model pudełkowy</em>, <em>CSS Flexbox</em>)<br>• <strong>Responsive Design</strong> - Media queries i układy mobile-first<br><br><strong>Jak to działa:</strong><br>1. Przeczytaj zadanie w lewym panelu<br>2. Napisz kod w edytorze<br>3. Zobacz wyniki na żywo w podglądzie<br>4. Otrzymaj natychmiastową informację zwrotną ze wskazówkami<br><br><strong>Skróty klawiszowe:</strong> <kbd>Ctrl+Z</kbd> cofnij, <kbd>Ctrl+Shift+Z</kbd> ponów<br><br><strong>Więcej zasobów:</strong><br>• <a href=\"https://nextlevelshit.github.io/html-over-js/\" target=\"_blank\">HTML over JS</a> - Natywny HTML vs rozwiązania JavaScript<br>• <a href=\"https://nextlevelshit.github.io/web-engineering-mandala/\" target=\"_blank\">Web Engineering Mandala</a> - Mapa technologii JavaScript",
|
||||
"task": "Napisz <code>Hello World</code>",
|
||||
"id": "hello",
|
||||
"title": "Cześć!",
|
||||
"description": "<strong>Witaj w Code Crispies!</strong> Naucz się CSS i HTML poprzez praktyczne ćwiczenia.<br><br><strong>Jak to działa:</strong><br>1. Przeczytaj zadanie po lewej<br>2. Napisz kod w edytorze<br>3. Zobacz wyniki na żywo w podglądzie<br><br><strong>Wskazówki:</strong> Użyj <kbd>Ctrl+Z</kbd> aby cofnąć. Otwórz menu (☰) aby przeglądać wszystkie moduły.",
|
||||
"task": "Napisz <code>Hello World</code> 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 <code>Hello World</code>"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "overview",
|
||||
"title": "Przegląd",
|
||||
"description": "<strong>Jesteś gotowy!</strong> Otwórz menu (☰) aby odkryć wszystkie moduły.<br><br><strong>Zalecana ścieżka nauki:</strong><br>1. <em>HTML Blokowe i Liniowe</em> - Zrozum elementy kontenerowe vs liniowe<br>2. <em>HTML Formularze</em> - Twórz interaktywne formularze z walidacją<br>3. <em>CSS Selektory</em> - Celuj w elementy precyzyjnie<br>4. <em>CSS Model pudełkowy</em> - Opanuj padding, margin, borders<br>5. <em>CSS Flexbox</em> - Twórz elastyczne układy<br>6. <em>CSS Animacje</em> - Dodaj ruch i przejścia<br><br><strong>Wskazówki:</strong><br>• Użyj <em>Pokaż oczekiwane</em> aby zobaczyć docelowy wynik<br>• Twój postęp jest zapisywany automatycznie<br>• Wypróbuj Emmet w trybie HTML: <kbd>ul>li*3</kbd> + Tab<br><br><strong>Open Source:</strong><br>• <a href=\"https://git.librete.ch/libretech/code-crispies\" target=\"_blank\">Gitea (Source)</a> · <a href=\"https://github.com/nextlevelshit/code-crispies\" target=\"_blank\">GitHub (Mirror)</a><br>• Stworzone przez <a href=\"https://librete.ch\" target=\"_blank\">LibreTECH</a> · <a href=\"https://www.linkedin.com/in/michael-werner-czechowski\" target=\"_blank\">Michael Czechowski</a>",
|
||||
"task": "Kliknij Dalej aby kontynuować",
|
||||
"previewHTML": "<p>Hello World! 🌍</p><p>Hallo Welt!</p><p>Bonjour le monde!</p><p>¡Hola Mundo!</p><p>Ciao Mondo!</p><p>Olá Mundo!</p><p>こんにちは世界!</p><p>你好世界!</p><p>안녕 세상!</p><p>Привет мир!</p><p dir=\"rtl\">שלום עולם!</p><p dir=\"rtl\">مرحبا بالعالم!</p>",
|
||||
"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": "<p>Hello World! 🌍</p>\n<p>Hallo Welt!</p>\n<p>Bonjour le monde!</p>\n<p>¡Hola Mundo!</p>\n<p>Ciao Mondo!</p>\n<p>Olá Mundo!</p>\n<p>こんにちは世界!</p>\n<p>你好世界!</p>\n<p>안녕 세상!</p>\n<p>Привет мир!</p>\n<p dir=\"rtl\">שלום עולם!</p>\n<p dir=\"rtl\">مرحبا بالعالم!</p>",
|
||||
"solution": "<p>Hello World! 🌍</p>\n<p>Hallo Welt!</p>\n<p>Bonjour le monde!</p>\n<p>¡Hola Mundo!</p>\n<p>Ciao Mondo!</p>\n<p>Olá Mundo!</p>\n<p>こんにちは世界!</p>\n<p>你好世界!</p>\n<p>안녕 세상!</p>\n<p>Привет мир!</p>\n<p dir=\"rtl\">שלום עולם!</p>\n<p dir=\"rtl\">مرحبا بالعالم!</p>",
|
||||
"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": "<style>\n body {\n font-family: system-ui, sans-serif;\n padding: 20px;\n }\n</style>\n\n<h1>Hello World</h1>\n<p>Start coding!</p>",
|
||||
"solution": "",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": []
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -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": "<strong>Code Crispies</strong> - це безкоштовна платформа з відкритим кодом для вивчення веб-розробки через практичні вправи. Обліковий запис не потрібен!<br><br><strong>Що ви вивчите:</strong><br>• <strong>HTML</strong> - Семантичні елементи, форми, таблиці, SVG (<em>HTML Блокові та рядкові</em>, <em>HTML Форми</em>, <em>HTML Таблиці</em>)<br>• <strong>CSS</strong> - Селектори, блокова модель, flexbox, анімації (<em>CSS Селектори</em>, <em>CSS Блокова модель</em>, <em>CSS Flexbox</em>)<br>• <strong>Адаптивний дизайн</strong> - Media queries та mobile-first макети<br><br><strong>Як це працює:</strong><br>1. Прочитайте завдання в лівій панелі<br>2. Напишіть код в редакторі<br>3. Побачте результати в попередньому перегляді<br>4. Отримайте миттєвий зворотний зв'язок з підказками<br><br><strong>Гарячі клавіші:</strong> <kbd>Ctrl+Z</kbd> скасувати, <kbd>Ctrl+Shift+Z</kbd> повторити<br><br><strong>Більше ресурсів:</strong><br>• <a href=\"https://nextlevelshit.github.io/html-over-js/\" target=\"_blank\">HTML over JS</a> - Нативний HTML проти JavaScript рішень<br>• <a href=\"https://nextlevelshit.github.io/web-engineering-mandala/\" target=\"_blank\">Web Engineering Mandala</a> - Карта JavaScript технологій",
|
||||
"task": "Напишіть <code>Hello World</code>",
|
||||
"id": "hello",
|
||||
"title": "Привіт!",
|
||||
"description": "<strong>Ласкаво просимо до Code Crispies!</strong> Вивчайте CSS та HTML через практичні вправи.<br><br><strong>Як це працює:</strong><br>1. Прочитайте завдання зліва<br>2. Напишіть код в редакторі<br>3. Побачте результати в попередньому перегляді<br><br><strong>Поради:</strong> Використовуйте <kbd>Ctrl+Z</kbd> для скасування. Відкрийте меню (☰) щоб переглянути всі модулі.",
|
||||
"task": "Напишіть <code>Hello World</code> щоб почати",
|
||||
"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": "Напишіть <code>Hello World</code>"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "overview",
|
||||
"title": "Огляд",
|
||||
"description": "<strong>Ви готові!</strong> Відкрийте меню (☰) щоб дослідити всі модулі.<br><br><strong>Рекомендований шлях навчання:</strong><br>1. <em>HTML Блокові та рядкові</em> - Зрозумійте контейнерні vs рядкові елементи<br>2. <em>HTML Форми</em> - Створюйте інтерактивні форми з валідацією<br>3. <em>CSS Селектори</em> - Точно вибирайте елементи<br>4. <em>CSS Блокова модель</em> - Опануйте padding, margin, borders<br>5. <em>CSS Flexbox</em> - Створюйте гнучкі макети<br>6. <em>CSS Анімації</em> - Додавайте рух та переходи<br><br><strong>Поради:</strong><br>• Використовуйте <em>Показати очікуване</em> щоб побачити цільовий результат<br>• Ваш прогрес зберігається автоматично<br>• Спробуйте Emmet в режимі HTML: <kbd>ul>li*3</kbd> + Tab<br><br><strong>Open Source:</strong><br>• <a href=\"https://git.librete.ch/libretech/code-crispies\" target=\"_blank\">Gitea (Source)</a> · <a href=\"https://github.com/nextlevelshit/code-crispies\" target=\"_blank\">GitHub (Mirror)</a><br>• Створено <a href=\"https://librete.ch\" target=\"_blank\">LibreTECH</a> · <a href=\"https://www.linkedin.com/in/michael-werner-czechowski\" target=\"_blank\">Michael Czechowski</a>",
|
||||
"task": "Натисніть Далі щоб продовжити",
|
||||
"previewHTML": "<p>Hello World! 🌍</p><p>Hallo Welt!</p><p>Bonjour le monde!</p><p>¡Hola Mundo!</p><p>Ciao Mondo!</p><p>Olá Mundo!</p><p>こんにちは世界!</p><p>你好世界!</p><p>안녕 세상!</p><p>Привет мир!</p><p dir=\"rtl\">שלום עולם!</p><p dir=\"rtl\">مرحبا بالعالم!</p>",
|
||||
"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": "<p>Hello World! 🌍</p>\n<p>Hallo Welt!</p>\n<p>Bonjour le monde!</p>\n<p>¡Hola Mundo!</p>\n<p>Ciao Mondo!</p>\n<p>Olá Mundo!</p>\n<p>こんにちは世界!</p>\n<p>你好世界!</p>\n<p>안녕 세상!</p>\n<p>Привет мир!</p>\n<p dir=\"rtl\">שלום עולם!</p>\n<p dir=\"rtl\">مرحبا بالعالم!</p>",
|
||||
"solution": "<p>Hello World! 🌍</p>\n<p>Hallo Welt!</p>\n<p>Bonjour le monde!</p>\n<p>¡Hola Mundo!</p>\n<p>Ciao Mondo!</p>\n<p>Olá Mundo!</p>\n<p>こんにちは世界!</p>\n<p>你好世界!</p>\n<p>안녕 세상!</p>\n<p>Привет мир!</p>\n<p dir=\"rtl\">שלום עולם!</p>\n<p dir=\"rtl\">مرحبا بالعالم!</p>",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
"type": "contains",
|
||||
"value": "Hello",
|
||||
"message": "Натисніть Далі щоб продовжити"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "playground",
|
||||
"title": "Playground",
|
||||
"mode": "playground",
|
||||
"description": "",
|
||||
"task": "",
|
||||
"previewHTML": "",
|
||||
"previewBaseCSS": "",
|
||||
"sandboxCSS": "",
|
||||
"initialCode": "<style>\n body {\n font-family: system-ui, sans-serif;\n padding: 20px;\n }\n</style>\n\n<h1>Hello World</h1>\n<p>Start coding!</p>",
|
||||
"solution": "",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": []
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user