public/code-crispies
2
1
Fork 0
Code Issues 7 Pull Requests Actions Activity

fix: simplify welcome validations, remove deprecated shortcuts, fix rerun text
Some checks failed
Deploy static content to Pages / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Michael Czechowski
2025-12-30 21:58:21 +01:00
parent 2f40552c38
commit 4767f91f40
3 changed files with 7 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
lessons/00-welcome.json
View File

@@ -9,7 +9,7 @@
{
"id": "welcome",
"title": "Welcome!",
"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+Enter</kbd> to run, <kbd>Ctrl+Z</kbd> to undo<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",
"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": "Hello World",
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; } h1 { color: #6366f1; }",
@@ -18,15 +18,10 @@
"solution": "<h1>Hello World</h1>",
"previewContainer": "preview-area",
"validations": [
{
"type": "element_exists",
"value": "h1",
"message": "Add an <kbd>&lt;h1&gt;</kbd> heading element"
},
{
"type": "contains",
"value": "Hello",
"message": "Add the text 'Hello' inside your heading"
"message": "Write 'Hello World'"
}
]
},
@@ -42,15 +37,10 @@
"solution": "<button>Let's go!</button>",
"previewContainer": "preview-area",
"validations": [
{
"type": "element_exists",
"value": "button",
"message": "Add a <kbd>&lt;button&gt;</kbd> element"
},
{
"type": "contains",
"value": "go",
"message": "Add the text 'Let's go!' inside the button"
"message": "Write 'Let's go!'"
}
]
}

16
lessons/de/00-welcome.json
View File

@@ -9,7 +9,7 @@
{
"id": "welcome",
"title": "Willkommen!",
"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+Enter</kbd> ausführen, <kbd>Strg+Z</kbd> rückgängig<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",
"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": "Hallo Welt",
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; } h1 { color: #6366f1; }",
@@ -18,15 +18,10 @@
"solution": "<h1>Hallo Welt</h1>",
"previewContainer": "preview-area",
"validations": [
{
"type": "element_exists",
"value": "h1",
"message": "Füge ein <kbd>&lt;h1&gt;</kbd> Überschrift-Element hinzu"
},
{
"type": "contains",
"value": "Hallo",
"message": "Füge den Text 'Hallo' in deine Überschrift ein"
"message": "Schreibe 'Hallo Welt'"
}
]
},
@@ -42,15 +37,10 @@
"solution": "<button>Los geht's!</button>",
"previewContainer": "preview-area",
"validations": [
{
"type": "element_exists",
"value": "button",
"message": "Füge ein <kbd>&lt;button&gt;</kbd> Element hinzu"
},
{
"type": "contains",
"value": "geht",
"message": "Füge den Text 'Los geht's!' in den Button ein"
"message": "Schreibe 'Los geht's!'"
}
]
}

2
src/i18n.js
View File

@@ -121,7 +121,7 @@ const translations = {
redoTitle: "Wiederholen (Strg+Umschalt+Z)",
resetCodeTitle: "Auf Anfangscode zurücksetzen",
run: "Ausführen",
rerun: "Erneut anwenden",
rerun: "Erneut ausführen",
// Preview
yourOutput: "Dein Ergebnis",