From 11f86c71f35b6790e05a927d1ac3545a6cdc15f1 Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Tue, 6 Jan 2026 15:58:12 +0100 Subject: [PATCH] fix(lessons): style Hello World, add syntax examples, add goodbye module - Hello World lesson now styles plain text (no h1 required) - Added syntax examples to CSS Variables, calc(), Media Queries, Flexbox, Grid - Added goodbye/offboarding module with contribution encouragement --- lessons/00-welcome.json | 4 +- lessons/05-units-variables.json | 4 +- lessons/08-responsive.json | 2 +- lessons/99-goodbye.json | 67 +++++++++++++++++++++++++++++++++ lessons/ar/00-welcome.json | 4 +- lessons/de/00-welcome.json | 4 +- lessons/es/00-welcome.json | 4 +- lessons/flexbox.json | 2 +- lessons/grid.json | 2 +- lessons/pl/00-welcome.json | 4 +- lessons/uk/00-welcome.json | 4 +- 11 files changed, 84 insertions(+), 17 deletions(-) create mode 100644 lessons/99-goodbye.json diff --git a/lessons/00-welcome.json b/lessons/00-welcome.json index 76a48f5..451ac80 100644 --- a/lessons/00-welcome.json +++ b/lessons/00-welcome.json @@ -12,10 +12,10 @@ "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", "previewHTML": "", - "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; } h1 { color: #6366f1; }", + "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; font-size: 2rem; color: #6366f1; font-weight: bold; }", "sandboxCSS": "", "initialCode": "", - "solution": "

Hello World

", + "solution": "Hello World", "previewContainer": "preview-area", "validations": [ { diff --git a/lessons/05-units-variables.json b/lessons/05-units-variables.json index d4e89e0..caf64a5 100644 --- a/lessons/05-units-variables.json +++ b/lessons/05-units-variables.json @@ -32,7 +32,7 @@ { "id": "units-2", "title": "CSS Custom Properties", - "description": "Define and reuse variables (--custom properties) to centralize your theme values.", + "description": "Define and reuse variables (--custom properties) to centralize your theme values.

:root {\n  --main-color: #6200ee;\n}\n.element {\n  color: var(--main-color);\n}
", "task": "Create a --main-color variable in :root with #6200ee and apply it as the border color on .themed.", "previewHTML": "
Variable Box
", "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .themed { padding: 1rem; border: 0.125rem solid #ddd; }", @@ -66,7 +66,7 @@ { "id": "units-3", "title": "Unit Calculations (calc)", - "description": "Use the calc() function to combine different units in one expression.", + "description": "Use the calc() function to combine different units in one expression.

.element {\n  width: calc(100% - 2rem);\n  height: calc(50vh + 1rem);\n}
", "task": "Set the width of .sized to calc(100% - 2rem) and min-height to calc(10vh + 1rem).", "previewHTML": "
Calc Demo
", "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .sized { background: #e8f5e9; padding: 1rem; }", diff --git a/lessons/08-responsive.json b/lessons/08-responsive.json index 0da4143..43de4e5 100644 --- a/lessons/08-responsive.json +++ b/lessons/08-responsive.json @@ -8,7 +8,7 @@ { "id": "responsive-1", "title": "Media Queries", - "description": "Understand the syntax and use cases for CSS media queries to apply styles conditionally based on viewport characteristics.", + "description": "Understand the syntax and use cases for CSS media queries to apply styles conditionally based on viewport characteristics.

@media (max-width: 600px) {\n  .element {\n    background: lightcoral;\n  }\n}
", "task": "Write a media query with @media (max-width: 600px) that changes .panel background to lightcoral.", "previewHTML": "
Resize the window
", "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .panel { padding: 1rem; background: lightblue; }", diff --git a/lessons/99-goodbye.json b/lessons/99-goodbye.json new file mode 100644 index 0000000..a42b435 --- /dev/null +++ b/lessons/99-goodbye.json @@ -0,0 +1,67 @@ +{ + "$schema": "../schemas/code-crispies-module-schema.json", + "id": "goodbye", + "title": "What's Next?", + "description": "Congratulations on completing your learning journey!", + "mode": "html", + "difficulty": "beginner", + "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!", + "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; }", + "sandboxCSS": "", + "initialCode": "", + "solution": "

Thank you!

", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains", + "value": "Thank you", + "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 c3f0db8..459920c 100644 --- a/lessons/ar/00-welcome.json +++ b/lessons/ar/00-welcome.json @@ -12,10 +12,10 @@ "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", "previewHTML": "", - "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; } h1 { color: #6366f1; }", + "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; font-size: 2rem; color: #6366f1; font-weight: bold; }", "sandboxCSS": "", "initialCode": "", - "solution": "

Hello World

", + "solution": "Hello World", "previewContainer": "preview-area", "validations": [ { diff --git a/lessons/de/00-welcome.json b/lessons/de/00-welcome.json index 5c43d29..910256b 100644 --- a/lessons/de/00-welcome.json +++ b/lessons/de/00-welcome.json @@ -12,10 +12,10 @@ "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", "previewHTML": "", - "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; } h1 { color: #6366f1; }", + "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; font-size: 2rem; color: #6366f1; font-weight: bold; }", "sandboxCSS": "", "initialCode": "", - "solution": "

Hello World

", + "solution": "Hello World", "previewContainer": "preview-area", "validations": [ { diff --git a/lessons/es/00-welcome.json b/lessons/es/00-welcome.json index c3f0db8..459920c 100644 --- a/lessons/es/00-welcome.json +++ b/lessons/es/00-welcome.json @@ -12,10 +12,10 @@ "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", "previewHTML": "", - "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; } h1 { color: #6366f1; }", + "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; font-size: 2rem; color: #6366f1; font-weight: bold; }", "sandboxCSS": "", "initialCode": "", - "solution": "

Hello World

", + "solution": "Hello World", "previewContainer": "preview-area", "validations": [ { diff --git a/lessons/flexbox.json b/lessons/flexbox.json index cc75563..e028f1b 100644 --- a/lessons/flexbox.json +++ b/lessons/flexbox.json @@ -8,7 +8,7 @@ { "id": "flexbox-1", "title": "Container", - "description": "Learn how to create a flex container and understand the main and cross axes.", + "description": "Learn how to create a flex container and understand the main and cross axes.

.container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}
", "task": "Add display: flex to .wrap to create a flexbox layout.", "previewHTML": "
1
2
3
", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; }", diff --git a/lessons/grid.json b/lessons/grid.json index 33967fe..d0be2de 100644 --- a/lessons/grid.json +++ b/lessons/grid.json @@ -8,7 +8,7 @@ { "id": "grid-1", "title": "Grid Container Basics", - "description": "Learn how to create a grid container and define basic grid structures.", + "description": "Learn how to create a grid container and define basic grid structures.

.container {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 1rem;\n}
", "task": "Create a .grid with display: grid, grid-template-columns: repeat(3, 1fr), and gap: 1rem.", "previewHTML": "
1
2
3
4
5
6
", "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .item { background-color: #9b59b6; color: white; padding: 1.25rem; text-align: center; font-weight: bold; }", diff --git a/lessons/pl/00-welcome.json b/lessons/pl/00-welcome.json index c3f0db8..459920c 100644 --- a/lessons/pl/00-welcome.json +++ b/lessons/pl/00-welcome.json @@ -12,10 +12,10 @@ "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", "previewHTML": "", - "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; } h1 { color: #6366f1; }", + "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; font-size: 2rem; color: #6366f1; font-weight: bold; }", "sandboxCSS": "", "initialCode": "", - "solution": "

Hello World

", + "solution": "Hello World", "previewContainer": "preview-area", "validations": [ { diff --git a/lessons/uk/00-welcome.json b/lessons/uk/00-welcome.json index c3f0db8..459920c 100644 --- a/lessons/uk/00-welcome.json +++ b/lessons/uk/00-welcome.json @@ -12,10 +12,10 @@ "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", "previewHTML": "", - "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; } h1 { color: #6366f1; }", + "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; font-size: 2rem; color: #6366f1; font-weight: bold; }", "sandboxCSS": "", "initialCode": "", - "solution": "

Hello World

", + "solution": "Hello World", "previewContainer": "preview-area", "validations": [ {