From b4d2f52d50df7084ed6b9e8dffe206a4fd79fd96 Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Tue, 30 Dec 2025 16:47:31 +0100 Subject: [PATCH] refactor: shorten class names in layout lessons for easier typing MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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) --- CLAUDE.md | 10 ++++-- lessons/05-units-variables.json | 20 +++++++++-- lessons/06-transitions-animations.json | 21 +++++++++-- lessons/07-layouts.json | 32 ++++++++--------- lessons/08-responsive.json | 7 +++- lessons/flexbox.json | 40 ++++++++++----------- lessons/grid.json | 48 +++++++++++++------------- 7 files changed, 109 insertions(+), 69 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 038786a..33c434c 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -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:** diff --git a/lessons/05-units-variables.json b/lessons/05-units-variables.json index 682c4b2..e98a16d 100644 --- a/lessons/05-units-variables.json +++ b/lessons/05-units-variables.json @@ -22,7 +22,11 @@ { "type": "contains", "value": "width", "message": "Use width property", "options": { "caseSensitive": false } }, { "type": "property_value", "value": { "property": "width", "expected": "80%" }, "message": "Set width to 80%" }, { "type": "contains", "value": "max-width", "message": "Use max-width property", "options": { "caseSensitive": false } }, - { "type": "property_value", "value": { "property": "max-width", "expected": "37.5rem" }, "message": "Set max-width to 37.5rem" } + { + "type": "property_value", + "value": { "property": "max-width", "expected": "37.5rem" }, + "message": "Set max-width to 37.5rem" + } ] }, { @@ -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 --main-color in :root", "options": { "caseSensitive": false } }, - { "type": "contains", "value": "var(--main-color)", "message": "Use var(--main-color)", "options": { "caseSensitive": false } }, + { + "type": "contains", + "value": "--main-color", + "message": "Define --main-color in :root", + "options": { "caseSensitive": false } + }, + { + "type": "contains", + "value": "var(--main-color)", + "message": "Use var(--main-color)", + "options": { "caseSensitive": false } + }, { "type": "property_value", "value": { "property": "border", "expected": "var(--main-color)" }, diff --git a/lessons/06-transitions-animations.json b/lessons/06-transitions-animations.json index 1d5b942..744e309 100644 --- a/lessons/06-transitions-animations.json +++ b/lessons/06-transitions-animations.json @@ -19,7 +19,12 @@ "solution": " transition: background-color 0.3s;", "previewContainer": "preview-area", "validations": [ - { "type": "contains", "value": "transition", "message": "Use the transition property", "options": { "caseSensitive": false } }, + { + "type": "contains", + "value": "transition", + "message": "Use the transition 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 @keyframes bounce", "options": { "caseSensitive": false } }, + { + "type": "contains", + "value": "@keyframes bounce", + "message": "Define @keyframes bounce", + "options": { "caseSensitive": false } + }, { "type": "regex", "value": "50%.*transform: translateY\\(-20px\\)", "message": "At 50%, use transform: translateY(-20px)", "options": { "caseSensitive": false } }, - { "type": "contains", "value": "animation", "message": "Use animation property on .ball", "options": { "caseSensitive": false } }, + { + "type": "contains", + "value": "animation", + "message": "Use animation property on .ball", + "options": { "caseSensitive": false } + }, { "type": "regex", "value": "animation:.*bounce.*1s.*infinite", diff --git a/lessons/07-layouts.json b/lessons/07-layouts.json index 8c93fd7..0c0f8af 100644 --- a/lessons/07-layouts.json +++ b/lessons/07-layouts.json @@ -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": "
1
2
3
", - "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": "
1
2
3
", + "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": "
A
B
C
", - "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": "
A
B
C
", + "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": "
1
2
3
4
", - "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": "
1
2
3
4
", + "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": "
Featured
2
3
4
", - "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .grid-container > div { background: #c8e6c9; padding: 1rem; }", + "previewHTML": "
Featured
2
3
4
", + "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .grid > div { background: #c8e6c9; padding: 1rem; }", "sandboxCSS": "", "codePrefix": "/* Span item */\n.item1 {", "initialCode": "", diff --git a/lessons/08-responsive.json b/lessons/08-responsive.json index 718fbb1..2e4bb6a 100644 --- a/lessons/08-responsive.json +++ b/lessons/08-responsive.json @@ -108,7 +108,12 @@ "message": "Use @media (min-width: 768px)", "options": { "caseSensitive": false } }, - { "type": "contains", "value": ".sidebar", "message": "Target .sidebar inside media query", "options": { "caseSensitive": false } }, + { + "type": "contains", + "value": ".sidebar", + "message": "Target .sidebar inside media query", + "options": { "caseSensitive": false } + }, { "type": "property_value", "value": { "property": "width", "expected": "250px" }, diff --git a/lessons/flexbox.json b/lessons/flexbox.json index f98606a..bd7cc1c 100644 --- a/lessons/flexbox.json +++ b/lessons/flexbox.json @@ -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 display: flex to .flex-container to create a flexbox layout.", - "previewHTML": "
1
2
3
", + "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; }", - "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 flex-direction: column and flex-wrap: wrap to .flex-container.", - "previewHTML": "
1
2
3
4
5
", + "task": "Add flex-direction: column and flex-wrap: wrap to .wrap.", + "previewHTML": "
1
2
3
4
5
", "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 justify-content: space-between to .flex-container to distribute the boxes evenly.", - "previewHTML": "
1
2
3
", + "task": "Add justify-content: space-between to .wrap to distribute the boxes evenly.", + "previewHTML": "
1
2
3
", "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 align-items: center to .flex-container to vertically center the boxes.", - "previewHTML": "
1
2
3
", + "task": "Add align-items: center to .wrap to vertically center the boxes.", + "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; 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 flex property controls how much an item grows relative to others.", "task": "Add flex: 2 to .box2 to make it grow twice as wide.", - "previewHTML": "
1
2
3
", + "previewHTML": "
1
2
3
", "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 align-self to override alignment for a single flex item.", "task": "Add align-self: flex-start to .middle to move it to the top.", - "previewHTML": "
1
2
3
", + "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; 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}", diff --git a/lessons/grid.json b/lessons/grid.json index f00a3c1..33967fe 100644 --- a/lessons/grid.json +++ b/lessons/grid.json @@ -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 .grid-container with display: grid, grid-template-columns: repeat(3, 1fr), and gap: 1rem.", - "previewHTML": "
1
2
3
4
5
6
", + "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; }", - "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 .grid-container class selector", + "value": ".grid", + "message": "Use the .grid 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 grid-template-areas to create a layout with header spanning full width, sidebar and content in middle, and footer spanning full width.", - "previewHTML": "
Header
Sidebar
Main Content
Footer
", - "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": "
Header
Sidebar
Main Content
Footer
", + "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 grid-column: span 2 and grid-row: span 2 to .featured to span 2x2 cells.", - "previewHTML": "
1
2
Featured
4
5
6
7
8
9
", + "previewHTML": "
1
2
Featured
4
5
6
7
8
9
", "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 auto-fit/auto-fill for responsive grid layouts.", - "task": "Add display: grid and grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)) to .responsive-grid.", - "previewHTML": "
Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
", + "task": "Add display: grid and grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)) to .cards.", + "previewHTML": "
Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
", "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 .responsive-grid class selector", + "value": ".cards", + "message": "Use the .cards 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 justify-items: center and align-items: center to center items within their cells.", - "previewHTML": "
1
2
3
4
5
6
", + "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; 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 z-index.", "task": "Add grid-column: 1, grid-row: 1, and z-index: 1 to .overlay to position it above the base.", - "previewHTML": "
Base Content
Overlay
", - "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": "
Base Content
Overlay
", + "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}",