libretech/code-crispies
1
0
Fork 0
Code Issues Pull Requests Activity

refactor: shorten class names in layout lessons for easier typing

Browse Source 
- flexbox.json: .flex-container → .wrap
- grid.json: .grid-container → .grid, .grid-layout → .page,
  .responsive-grid → .cards, .align-grid → .cells, .overlap-grid → .stack
- 07-layouts.json: .flex-container → .flex, .flex-item → .item,
  .grid-container → .grid
- CLAUDE.md: add short class names rule (1-2 syllables max)
This commit is contained in:
Michael Czechowski
2025-12-30 16:47:31 +01:00
parent 3bf630adf6
commit 1267ce15ae
7 changed files with 109 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
CLAUDE.md
View File

@@ -69,14 +69,20 @@ When creating or editing lessons:
### Lesson Design Best Practices
**Short Class Names:**
- Class names students type should be short: 1-2 syllables maximum
- Good: `.wrap`, `.flex`, `.grid`, `.box`, `.card`, `.item`, `.btn`
- Bad: `.flex-container`, `.grid-layout`, `.button-primary` (too long, compound names)
- Single-word names are easier to type and remember
**Clear Task Instructions:**
- Always state the selector AND the property explicitly in the task
- Good: "Add `display: flex` to `.flex-container`"
- Good: "Add `display: flex` to `.wrap`"
- Bad: "Use flexbox to align the items" (unclear what selector to use)
**Use `codePrefix` for Context:**
- Include the selector in `codePrefix` so students know where to write
- Example: `"codePrefix": ".flex-container {\n "` with `"codeSuffix": "\n}"`
- Example: `"codePrefix": ".wrap {\n "` with `"codeSuffix": "\n}"`
- This shows students exactly which rule they're editing
**Simple, Human-Friendly Values:**

20
lessons/05-units-variables.json
View File

@@ -22,7 +22,11 @@
{ "type": "contains", "value": "width", "message": "Use <kbd>width</kbd> property", "options": { "caseSensitive": false } },
{ "type": "property_value", "value": { "property": "width", "expected": "80%" }, "message": "Set width to <kbd>80%</kbd>" },
{ "type": "contains", "value": "max-width", "message": "Use <kbd>max-width</kbd> property", "options": { "caseSensitive": false } },
{ "type": "property_value", "value": { "property": "max-width", "expected": "37.5rem" }, "message": "Set max-width to <kbd>37.5rem</kbd>" }
{
"type": "property_value",
"value": { "property": "max-width", "expected": "37.5rem" },
"message": "Set max-width to <kbd>37.5rem</kbd>"
}
]
},
{
@@ -39,8 +43,18 @@
"solution": " --main-color: #6200ee;\n}\n.var-box {\n border-color: var(--main-color);",
"previewContainer": "preview-area",
"validations": [
{ "type": "contains", "value": "--main-color", "message": "Define <kbd>--main-color</kbd> in :root", "options": { "caseSensitive": false } },
{ "type": "contains", "value": "var(--main-color)", "message": "Use <kbd>var(--main-color)</kbd>", "options": { "caseSensitive": false } },
{
"type": "contains",
"value": "--main-color",
"message": "Define <kbd>--main-color</kbd> in :root",
"options": { "caseSensitive": false }
},
{
"type": "contains",
"value": "var(--main-color)",
"message": "Use <kbd>var(--main-color)</kbd>",
"options": { "caseSensitive": false }
},
{
"type": "property_value",
"value": { "property": "border", "expected": "var(--main-color)" },

21
lessons/06-transitions-animations.json
View File

@@ -19,7 +19,12 @@
"solution": " transition: background-color 0.3s;",
"previewContainer": "preview-area",
"validations": [
{ "type": "contains", "value": "transition", "message": "Use the <kbd>transition</kbd> property", "options": { "caseSensitive": false } },
{
"type": "contains",
"value": "transition",
"message": "Use the <kbd>transition</kbd> property",
"options": { "caseSensitive": false }
},
{
"type": "regex",
"value": "transition:\\s*background-color\\s*0\\.3s",
@@ -69,14 +74,24 @@
"solution": " 50% { transform: translateY(-20px); }\n}\n.ball {\n animation: bounce 1s infinite;",
"previewContainer": "preview-area",
"validations": [
{ "type": "contains", "value": "@keyframes bounce", "message": "Define <kbd>@keyframes bounce</kbd>", "options": { "caseSensitive": false } },
{
"type": "contains",
"value": "@keyframes bounce",
"message": "Define <kbd>@keyframes bounce</kbd>",
"options": { "caseSensitive": false }
},
{
"type": "regex",
"value": "50%.*transform: translateY\\(-20px\\)",
"message": "At <kbd>50%</kbd>, use <kbd>transform: translateY(-20px)</kbd>",
"options": { "caseSensitive": false }
},
{ "type": "contains", "value": "animation", "message": "Use <kbd>animation</kbd> property on <kbd>.ball</kbd>", "options": { "caseSensitive": false } },
{
"type": "contains",
"value": "animation",
"message": "Use <kbd>animation</kbd> property on <kbd>.ball</kbd>",
"options": { "caseSensitive": false }
},
{
"type": "regex",
"value": "animation:.*bounce.*1s.*infinite",

32
lessons/07-layouts.json
View File

@@ -9,11 +9,11 @@
"id": "layouts-1",
"title": "Flex Basics",
"description": "Learn the core properties of Flexbox to align, distribute space, and order items in a container.",
"task": "Set .flex-container to display: flex, and center its children both horizontally and vertically.",
"previewHTML": "<div class=\"flex-container\"><div>1</div><div>2</div><div>3</div></div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .flex-container > div { background: #eceff1; margin: 0.5rem; padding: 1rem; }",
"task": "Set .flex to display: flex, and center its children both horizontally and vertically.",
"previewHTML": "<div class=\"flex\"><div>1</div><div>2</div><div>3</div></div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .flex > div { background: #eceff1; margin: 0.5rem; padding: 1rem; }",
"sandboxCSS": "",
"codePrefix": "/* Enable and center Flexbox */\n.flex-container {",
"codePrefix": "/* Enable and center Flexbox */\n.flex {",
"initialCode": "",
"codeSuffix": "}",
"previewContainer": "preview-area",
@@ -27,19 +27,19 @@
"id": "layouts-2",
"title": "Flex Advanced",
"description": "Control wrapping, ordering, and flexible growth/shrink of items in a flex container.",
"task": "Allow items to wrap and set .flex-item to flex: 1 1 100px.",
"previewHTML": "<div class=\"flex-container\"><div class=\"flex-item\">A</div><div class=\"flex-item\">B</div><div class=\"flex-item\">C</div></div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .flex-item { background: #c5cae9; margin: 0.5rem; padding: 1rem; }",
"task": "Allow items to wrap and set .item to flex: 1 1 100px.",
"previewHTML": "<div class=\"flex\"><div class=\"item\">A</div><div class=\"item\">B</div><div class=\"item\">C</div></div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .item { background: #c5cae9; margin: 0.5rem; padding: 1rem; }",
"sandboxCSS": "",
"codePrefix": "/* Enable wrap and flexible items */\n.flex-container {",
"codePrefix": "/* Enable wrap and flexible items */\n.flex {",
"initialCode": "",
"codeSuffix": "}\n.flex-item { }",
"codeSuffix": "}\n.item { }",
"previewContainer": "preview-area",
"validations": [
{ "type": "contains", "value": "flex-wrap: wrap", "message": "Use 'flex-wrap: wrap'", "options": { "caseSensitive": false } },
{
"type": "regex",
"value": ".flex-item.*flex:\\s*1\\s+1\\s+100px",
"value": ".item.*flex:\\s*1\\s+1\\s+100px",
"message": "Set flex: 1 1 100px on items",
"options": { "caseSensitive": false }
}
@@ -49,11 +49,11 @@
"id": "layouts-3",
"title": "Grid Basics",
"description": "Define grid containers, set rows and columns, and place items in a structured grid.",
"task": "Set .grid-container to display: grid with three equal columns and a 1rem gap.",
"previewHTML": "<div class=\"grid-container\"><div>1</div><div>2</div><div>3</div><div>4</div></div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .grid-container > div { background: #ffe082; padding: 1rem; }",
"task": "Set .grid to display: grid with three equal columns and a 1rem gap.",
"previewHTML": "<div class=\"grid\"><div>1</div><div>2</div><div>3</div><div>4</div></div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .grid > div { background: #ffe082; padding: 1rem; }",
"sandboxCSS": "",
"codePrefix": "/* Define Grid */\n.grid-container {",
"codePrefix": "/* Define Grid */\n.grid {",
"initialCode": "",
"codeSuffix": "}",
"previewContainer": "preview-area",
@@ -79,8 +79,8 @@
"title": "Grid Placement",
"description": "Control the span and position of grid items with grid-column and grid-row.",
"task": "Span the first grid item across 2 columns using grid-column: 1 / span 2.",
"previewHTML": "<div class=\"grid-container\"><div class=\"item1\">Featured</div><div>2</div><div>3</div><div>4</div></div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .grid-container > div { background: #c8e6c9; padding: 1rem; }",
"previewHTML": "<div class=\"grid\"><div class=\"item1\">Featured</div><div>2</div><div>3</div><div>4</div></div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .grid > div { background: #c8e6c9; padding: 1rem; }",
"sandboxCSS": "",
"codePrefix": "/* Span item */\n.item1 {",
"initialCode": "",

7
lessons/08-responsive.json
View File

@@ -108,7 +108,12 @@
"message": "Use <kbd>@media (min-width: 768px)</kbd>",
"options": { "caseSensitive": false }
},
{ "type": "contains", "value": ".sidebar", "message": "Target <kbd>.sidebar</kbd> inside media query", "options": { "caseSensitive": false } },
{
"type": "contains",
"value": ".sidebar",
"message": "Target <kbd>.sidebar</kbd> inside media query",
"options": { "caseSensitive": false }
},
{
"type": "property_value",
"value": { "property": "width", "expected": "250px" },

40
lessons/flexbox.json
View File

@@ -9,11 +9,11 @@
"id": "flexbox-1",
"title": "Container",
"description": "Learn how to create a flex container and understand the main and cross axes.",
"task": "Add <kbd>display: flex</kbd> to <kbd>.flex-container</kbd> to create a flexbox layout.",
"previewHTML": "<div class='flex-container'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div></div>",
"task": "Add <kbd>display: flex</kbd> to <kbd>.wrap</kbd> to create a flexbox layout.",
"previewHTML": "<div class='wrap'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div></div>",
"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; }",
"sandboxCSS": ".flex-container { border: 2px dashed #aaa; padding: 1rem; }",
"codePrefix": ".flex-container {\n ",
"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; }",
"codePrefix": ".wrap {\n ",
"initialCode": "",
"codeSuffix": "\n}",
"solution": "display: flex;",
@@ -33,11 +33,11 @@
"id": "flexbox-2",
"title": "Direction & Wrap",
"description": "Control the direction and wrapping of flex items within a container.",
"task": "Add <kbd>flex-direction: column</kbd> and <kbd>flex-wrap: wrap</kbd> to <kbd>.flex-container</kbd>.",
"previewHTML": "<div class='flex-container'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div><div class='box'>4</div><div class='box'>5</div></div>",
"task": "Add <kbd>flex-direction: column</kbd> and <kbd>flex-wrap: wrap</kbd> to <kbd>.wrap</kbd>.",
"previewHTML": "<div class='wrap'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div><div class='box'>4</div><div class='box'>5</div></div>",
"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; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; }",
"sandboxCSS": ".flex-container { border: 2px dashed #aaa; padding: 1rem; height: 16rem; display: flex; }",
"codePrefix": ".flex-container {\n ",
"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; height: 16rem; display: flex; }",
"codePrefix": ".wrap {\n ",
"initialCode": "",
"codeSuffix": "\n}",
"solution": "flex-direction: column;\n flex-wrap: wrap;",
@@ -71,11 +71,11 @@
"id": "flexbox-3",
"title": "Justify Content",
"description": "Learn how to align flex items along the main axis of the flex container.",
"task": "Add <kbd>justify-content: space-between</kbd> to <kbd>.flex-container</kbd> to distribute the boxes evenly.",
"previewHTML": "<div class='flex-container'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div></div>",
"task": "Add <kbd>justify-content: space-between</kbd> to <kbd>.wrap</kbd> to distribute the boxes evenly.",
"previewHTML": "<div class='wrap'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div></div>",
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; }",
"sandboxCSS": ".flex-container { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
"codePrefix": ".flex-container {\n ",
"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
"codePrefix": ".wrap {\n ",
"initialCode": "",
"codeSuffix": "\n}",
"solution": "justify-content: space-between;",
@@ -98,11 +98,11 @@
"id": "flexbox-4",
"title": "Align Items",
"description": "Control how flex items are aligned along the cross axis of the flex container.",
"task": "Add <kbd>align-items: center</kbd> to <kbd>.flex-container</kbd> to vertically center the boxes.",
"previewHTML": "<div class='flex-container'><div class='box tall'>1</div><div class='box'>2</div><div class='box short'>3</div></div>",
"task": "Add <kbd>align-items: center</kbd> to <kbd>.wrap</kbd> to vertically center the boxes.",
"previewHTML": "<div class='wrap'><div class='box tall'>1</div><div class='box'>2</div><div class='box short'>3</div></div>",
"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; width: 3rem; display: flex; justify-content: center; } .tall { height: 6rem; } .short { height: 3rem; }",
"sandboxCSS": ".flex-container { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 10rem; }",
"codePrefix": ".flex-container {\n ",
"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 10rem; }",
"codePrefix": ".wrap {\n ",
"initialCode": "",
"codeSuffix": "\n}",
"solution": "align-items: center;",
@@ -126,9 +126,9 @@
"title": "Flex Grow",
"description": "The <kbd>flex</kbd> property controls how much an item grows relative to others.",
"task": "Add <kbd>flex: 2</kbd> to <kbd>.box2</kbd> to make it grow twice as wide.",
"previewHTML": "<div class='flex-container'><div class='box box1'>1</div><div class='box box2'>2</div><div class='box box3'>3</div></div>",
"previewHTML": "<div class='wrap'><div class='box box1'>1</div><div class='box box2'>2</div><div class='box box3'>3</div></div>",
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; display: flex; align-items: center; justify-content: center; } .box1 { background: coral; flex: 1; } .box2 { background: mediumseagreen; } .box3 { background: gold; flex: 1; }",
"sandboxCSS": ".flex-container { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
"codePrefix": ".box2 {\n ",
"initialCode": "",
"codeSuffix": "\n}",
@@ -150,9 +150,9 @@
"title": "Align Self",
"description": "Use <kbd>align-self</kbd> to override alignment for a single flex item.",
"task": "Add <kbd>align-self: flex-start</kbd> to <kbd>.middle</kbd> to move it to the top.",
"previewHTML": "<div class='flex-container'><div class='box'>1</div><div class='box middle'>2</div><div class='box'>3</div></div>",
"previewHTML": "<div class='wrap'><div class='box'>1</div><div class='box middle'>2</div><div class='box'>3</div></div>",
"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; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; } .middle { background: mediumseagreen; }",
"sandboxCSS": ".flex-container { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 12rem; align-items: center; }",
"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 12rem; align-items: center; }",
"codePrefix": ".middle {\n ",
"initialCode": "",
"codeSuffix": "\n}",

48
lessons/grid.json
View File

@@ -9,20 +9,20 @@
"id": "grid-1",
"title": "Grid Container Basics",
"description": "Learn how to create a grid container and define basic grid structures.",
"task": "Create a <kbd>.grid-container</kbd> with <kbd>display: grid</kbd>, <kbd>grid-template-columns: repeat(3, 1fr)</kbd>, and <kbd>gap: 1rem</kbd>.",
"previewHTML": "<div class='grid-container'><div class='item'>1</div><div class='item'>2</div><div class='item'>3</div><div class='item'>4</div><div class='item'>5</div><div class='item'>6</div></div>",
"task": "Create a <kbd>.grid</kbd> with <kbd>display: grid</kbd>, <kbd>grid-template-columns: repeat(3, 1fr)</kbd>, and <kbd>gap: 1rem</kbd>.",
"previewHTML": "<div class='grid'><div class='item'>1</div><div class='item'>2</div><div class='item'>3</div><div class='item'>4</div><div class='item'>5</div><div class='item'>6</div></div>",
"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; }",
"sandboxCSS": ".grid-container { border: 0.125rem dashed #ccc; padding: 1rem; }",
"sandboxCSS": ".grid { border: 0.125rem dashed #ccc; padding: 1rem; }",
"codePrefix": "/* Create a grid with 3 equal columns and gap */\n",
"initialCode": "",
"codeSuffix": "",
"solution": ".grid-container {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 1rem;\n}",
"solution": ".grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 1rem;\n}",
"previewContainer": "preview-area",
"validations": [
{
"type": "contains",
"value": ".grid-container",
"message": "Use the <kbd>.grid-container</kbd> class selector",
"value": ".grid",
"message": "Use the <kbd>.grid</kbd> class selector",
"options": {
"caseSensitive": false
}
@@ -64,10 +64,10 @@
"title": "Grid Template Areas",
"description": "Use named grid areas to create visual layouts that are easy to understand.",
"task": "Add <kbd>grid-template-areas</kbd> to create a layout with <kbd>header</kbd> spanning full width, <kbd>sidebar</kbd> and <kbd>content</kbd> in middle, and <kbd>footer</kbd> spanning full width.",
"previewHTML": "<div class='grid-layout'><div class='header'>Header</div><div class='sidebar'>Sidebar</div><div class='content'>Main Content</div><div class='footer'>Footer</div></div>",
"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .grid-layout > div { padding: 1.25rem; color: white; text-align: center; font-weight: bold; } .header { background-color: #e74c3c; } .sidebar { background-color: #3498db; } .content { background-color: #2ecc71; } .footer { background-color: #f39c12; }",
"sandboxCSS": ".grid-layout { border: 0.125rem dashed #ccc; padding: 1rem; height: 25rem; }",
"codePrefix": "/* Create a layout using grid-template-areas */\n.grid-layout {\n display: grid;\n grid-template-columns: 12rem 1fr;\n grid-template-rows: auto 1fr auto;\n gap: 1rem;\n \n /* Add your grid-template-areas code below */\n",
"previewHTML": "<div class='page'><div class='header'>Header</div><div class='sidebar'>Sidebar</div><div class='content'>Main Content</div><div class='footer'>Footer</div></div>",
"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .page > div { padding: 1.25rem; color: white; text-align: center; font-weight: bold; } .header { background-color: #e74c3c; } .sidebar { background-color: #3498db; } .content { background-color: #2ecc71; } .footer { background-color: #f39c12; }",
"sandboxCSS": ".page { border: 0.125rem dashed #ccc; padding: 1rem; height: 25rem; }",
"codePrefix": "/* Create a layout using grid-template-areas */\n.page {\n display: grid;\n grid-template-columns: 12rem 1fr;\n grid-template-rows: auto 1fr auto;\n gap: 1rem;\n \n /* Add your grid-template-areas code below */\n",
"initialCode": "",
"codeSuffix": "\n}\n\n/* Define which element goes in which grid area */\n.header {\n grid-area: header;\n}\n\n.sidebar {\n grid-area: sidebar;\n}\n\n.content {\n grid-area: content;\n}\n\n.footer {\n grid-area: footer;\n}",
"solution": "grid-template-areas:\n \"header header\"\n \"sidebar content\"\n \"footer footer\";",
@@ -96,9 +96,9 @@
"title": "Spanning Grid Cells",
"description": "Make grid items span multiple grid cells horizontally or vertically.",
"task": "Add <kbd>grid-column: span 2</kbd> and <kbd>grid-row: span 2</kbd> to <kbd>.featured</kbd> to span 2x2 cells.",
"previewHTML": "<div class='grid-container'><div class='item'>1</div><div class='item'>2</div><div class='item featured'>Featured</div><div class='item'>4</div><div class='item'>5</div><div class='item'>6</div><div class='item'>7</div><div class='item'>8</div><div class='item'>9</div></div>",
"previewHTML": "<div class='grid'><div class='item'>1</div><div class='item'>2</div><div class='item featured'>Featured</div><div class='item'>4</div><div class='item'>5</div><div class='item'>6</div><div class='item'>7</div><div class='item'>8</div><div class='item'>9</div></div>",
"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; } .featured { background-color: #e74c3c; }",
"sandboxCSS": ".grid-container { border: 0.125rem dashed #ccc; padding: 1rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }",
"sandboxCSS": ".grid { border: 0.125rem dashed #ccc; padding: 1rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }",
"codePrefix": "/* Make the featured item span 2x2 cells */\n",
"initialCode": "",
"codeSuffix": "",
@@ -135,20 +135,20 @@
"id": "grid-4",
"title": "Automatic Grid Placement",
"description": "Learn how to use auto-placement and <kbd>auto-fit</kbd>/<kbd>auto-fill</kbd> for responsive grid layouts.",
"task": "Add <kbd>display: grid</kbd> and <kbd>grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr))</kbd> to <kbd>.responsive-grid</kbd>.",
"previewHTML": "<div class='responsive-grid'><div class='card'>Card 1</div><div class='card'>Card 2</div><div class='card'>Card 3</div><div class='card'>Card 4</div><div class='card'>Card 5</div><div class='card'>Card 6</div></div>",
"task": "Add <kbd>display: grid</kbd> and <kbd>grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr))</kbd> to <kbd>.cards</kbd>.",
"previewHTML": "<div class='cards'><div class='card'>Card 1</div><div class='card'>Card 2</div><div class='card'>Card 3</div><div class='card'>Card 4</div><div class='card'>Card 5</div><div class='card'>Card 6</div></div>",
"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .card { background-color: #3498db; color: white; padding: 1.25rem; text-align: center; font-weight: bold; height: 6rem; display: flex; align-items: center; justify-content: center; }",
"sandboxCSS": ".responsive-grid { border: 0.125rem dashed #ccc; padding: 1rem; }",
"sandboxCSS": ".cards { border: 0.125rem dashed #ccc; padding: 1rem; }",
"codePrefix": "/* Create a responsive grid with auto-fit columns */\n",
"initialCode": "",
"codeSuffix": "",
"solution": ".responsive-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));\n}",
"solution": ".cards {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));\n}",
"previewContainer": "preview-area",
"validations": [
{
"type": "contains",
"value": ".responsive-grid",
"message": "Use the <kbd>.responsive-grid</kbd> class selector",
"value": ".cards",
"message": "Use the <kbd>.cards</kbd> class selector",
"options": {
"caseSensitive": false
}
@@ -179,10 +179,10 @@
"title": "Grid Alignment",
"description": "Control the alignment of grid items within their cells on both axes.",
"task": "Add <kbd>justify-items: center</kbd> and <kbd>align-items: center</kbd> to center items within their cells.",
"previewHTML": "<div class='align-grid'><div class='item'>1</div><div class='item tall'>2</div><div class='item'>3</div><div class='item'>4</div><div class='item'>5</div><div class='item wide'>6</div></div>",
"previewHTML": "<div class='cells'><div class='item'>1</div><div class='item tall'>2</div><div class='item'>3</div><div class='item'>4</div><div class='item'>5</div><div class='item wide'>6</div></div>",
"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; width: 3rem; height: 3rem; } .tall { height: 6rem; } .wide { width: 6rem; }",
"sandboxCSS": ".align-grid { border: 0.125rem dashed #ccc; padding: 1rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; height: 25rem; }",
"codePrefix": "/* Center grid items both horizontally and vertically */\n.align-grid {\n /* Add alignment properties below */\n",
"sandboxCSS": ".cells { border: 0.125rem dashed #ccc; padding: 1rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; height: 25rem; }",
"codePrefix": "/* Center grid items both horizontally and vertically */\n.cells {\n /* Add alignment properties below */\n",
"initialCode": "",
"codeSuffix": "\n}",
"solution": "justify-items: center;\n align-items: center;",
@@ -217,9 +217,9 @@
"title": "Overlapping Grid Items",
"description": "Learn how to create overlapping layouts by using grid positioning and <kbd>z-index</kbd>.",
"task": "Add <kbd>grid-column: 1</kbd>, <kbd>grid-row: 1</kbd>, and <kbd>z-index: 1</kbd> to <kbd>.overlay</kbd> to position it above the base.",
"previewHTML": "<div class='overlap-grid'><div class='base'>Base Content</div><div class='overlay'>Overlay</div></div>",
"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .overlap-grid { position: relative; height: 15rem; } .base { background-color: #3498db; color: white; padding: 1.25rem; display: flex; align-items: center; justify-content: center; font-weight: bold; } .overlay { background-color: rgba(231, 76, 60, 0.7); color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.5rem; }",
"sandboxCSS": ".overlap-grid { border: 0.125rem dashed #ccc; padding: 1rem; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; }",
"previewHTML": "<div class='stack'><div class='base'>Base Content</div><div class='overlay'>Overlay</div></div>",
"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .stack { position: relative; height: 15rem; } .base { background-color: #3498db; color: white; padding: 1.25rem; display: flex; align-items: center; justify-content: center; font-weight: bold; } .overlay { background-color: rgba(231, 76, 60, 0.7); color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.5rem; }",
"sandboxCSS": ".stack { border: 0.125rem dashed #ccc; padding: 1rem; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; }",
"codePrefix": "/* Position the overlay to cover the entire grid */\n.base {\n grid-column: 1;\n grid-row: 1;\n}\n\n.overlay {\n /* Add your code below to position the overlay */\n",
"initialCode": "",
"codeSuffix": "\n}",