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

refactor: shorten compound class names to single words
Some checks failed
Deploy static content to Pages / deploy (push) Has been cancelled
Details

Browse Source 
- box-model: .margin-box→.outer, .border-box→.sized, .shorthand-box→.spaced,
  .padding-box→.padded, .border-demo→.line
- units-variables: .unit-box→.box, .var-box→.themed, .calc-box→.sized,
  .viewport-box→.view
- responsive: .responsive-box→.panel, .fluid-text→.text, .grid-responsive→.cards
- Move expected toggle below preview area
- Update German translations with same changes
This commit is contained in:
Michael Czechowski
2025-12-30 18:23:54 +01:00
parent 5adff0861d
commit 496ff11252
7 changed files with 102 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
lessons/08-responsive.json
View File

@@ -9,14 +9,14 @@
"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.",
"task": "Write a media query with <kbd>@media (max-width: 600px)</kbd> that changes <kbd>.responsive-box</kbd> background to <kbd>lightcoral</kbd>.",
"previewHTML": "<div class=\"responsive-box\">Resize the window</div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .responsive-box { padding: 1rem; background: lightblue; }",
"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; }",
"sandboxCSS": "",
"codePrefix": "/* Add your media query below */\n",
"initialCode": "",
"codeSuffix": "",
"solution": "@media (max-width: 600px) {\n .responsive-box {\n background: lightcoral;\n }\n}",
"solution": "@media (max-width: 600px) {\n .panel {\n background: lightcoral;\n }\n}",
"previewContainer": "preview-area",
"validations": [
{
@@ -27,8 +27,8 @@
},
{
"type": "contains",
"value": ".responsive-box",
"message": "Target <kbd>.responsive-box</kbd> inside the media query",
"value": ".panel",
"message": "Target <kbd>.panel</kbd> inside the media query",
"options": { "caseSensitive": false }
},
{
@@ -43,11 +43,11 @@
"id": "responsive-2",
"title": "Fluid Type",
"description": "Use relative units like <kbd>vw</kbd> to make font sizes scale with the viewport width.",
"task": "Set <kbd>font-size: 5vw</kbd> on <kbd>.fluid-text</kbd> so it scales as the viewport changes.",
"previewHTML": "<p class=\"fluid-text\">Fluid Typography</p>",
"task": "Set <kbd>font-size: 5vw</kbd> on <kbd>.text</kbd> so it scales as the viewport changes.",
"previewHTML": "<p class=\"text\">Fluid Typography</p>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; }",
"sandboxCSS": "",
"codePrefix": "/* Apply fluid font sizing */\n.fluid-text {",
"codePrefix": "/* Apply fluid font sizing */\n.text {",
"initialCode": "",
"codeSuffix": "}",
"solution": " font-size: 5vw;",
@@ -60,11 +60,11 @@
"id": "responsive-3",
"title": "Flex Grids",
"description": "Combine CSS Grid with <kbd>auto-fit</kbd> or <kbd>auto-fill</kbd> for responsive column layouts.",
"task": "Add <kbd>display: grid</kbd>, <kbd>grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))</kbd>, and <kbd>gap: 1rem</kbd> to <kbd>.grid-responsive</kbd>.",
"previewHTML": "<div class=\"grid-responsive\"><div>1</div><div>2</div><div>3</div><div>4</div></div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .grid-responsive > div { background: #d1c4e9; padding: 1rem; }",
"task": "Add <kbd>display: grid</kbd>, <kbd>grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))</kbd>, and <kbd>gap: 1rem</kbd> to <kbd>.cards</kbd>.",
"previewHTML": "<div class=\"cards\"><div>1</div><div>2</div><div>3</div><div>4</div></div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .cards > div { background: #d1c4e9; padding: 1rem; }",
"sandboxCSS": "",
"codePrefix": "/* Create a responsive grid */\n.grid-responsive {",
"codePrefix": "/* Create a responsive grid */\n.cards {",
"initialCode": "",
"codeSuffix": "}",
"solution": " display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1rem;",