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
This commit is contained in:
2026-01-06 15:58:12 +01:00
parent 281ddf7cd6
commit d5f7b5bf77
11 changed files with 84 additions and 17 deletions

View File

@@ -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.<br><br><pre>@media (max-width: 600px) {\n .element {\n background: lightcoral;\n }\n}</pre>",
"task": "Write a media query with <kbd>@media (max-width: 600px)</kbd> that changes <kbd>.panel</kbd> background to <kbd>lightcoral</kbd>.",
"previewHTML": "<div class=\"panel\">Resize the window</div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .panel { padding: 1rem; background: lightblue; }",