From e96ff203db125af44e3543858b9b63d1d8eb8516 Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Tue, 13 May 2025 19:09:30 +0200 Subject: [PATCH] feat: add CSS Grid and Flexbox lessons with updated styles and tasks --- src/lessons/configs/basics.json | 67 +++--- src/lessons/configs/flexbox.json | 258 +++++++++++++++++++- src/lessons/configs/grid.json | 389 ++++++++++++++++++++++++++++++- 3 files changed, 677 insertions(+), 37 deletions(-) diff --git a/src/lessons/configs/basics.json b/src/lessons/configs/basics.json index 6fce7a4..303bb76 100644 --- a/src/lessons/configs/basics.json +++ b/src/lessons/configs/basics.json @@ -10,8 +10,8 @@ "description": "Selectors are patterns used to select HTML elements you want to style. In this lesson, you'll learn how to target elements with CSS.", "task": "Style the paragraph element by making its text color blue. Use the 'color' property with the value 'blue'.", "previewHTML": "

This paragraph needs to be blue!

This paragraph should remain unchanged.

", - "previewBaseCSS": "body { font-family: sans-serif; padding: 20px; }", - "sandboxCSS": ".target { outline: 2px dashed #ccc; padding: 10px; }", + "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; }", + "sandboxCSS": ".target { outline: 0.125rem dashed #ccc; padding: 0.625rem; }", "codePrefix": "/* Style the paragraph with class 'target' */\n", "initialCode": "", "codeSuffix": "", @@ -50,9 +50,9 @@ "id": "basics-2", "title": "Box Model Basics", "description": "The CSS box model is a fundamental concept that describes how elements are sized and spaced on a page.", - "task": "Add padding of 20px and a 2px solid border with color #333 to the box element.", + "task": "Add padding of 1.25rem and a 0.125rem solid border with color #333 to the box element.", "previewHTML": "
This box needs padding and a border!
", - "previewBaseCSS": "body { font-family: sans-serif; padding: 20px; } .box { background-color: #f0f0f0; }", + "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .box { background-color: #f0f0f0; }", "sandboxCSS": "", "codePrefix": "/* Add padding and border to the box */\n.box {\n /* Add your code below */\n", "initialCode": "", @@ -79,17 +79,17 @@ "type": "property_value", "value": { "property": "padding", - "expected": "20px" + "expected": "1.25rem" }, - "message": "Set the padding to '20px'", + "message": "Set the padding to '1.25rem'", "options": { "exact": false } }, { "type": "regex", - "value": "border:\\s*2px\\s+solid\\s+#333", - "message": "Set the border to '2px solid #333'", + "value": "border:\\s*0.125rem\\s+solid\\s+#333", + "message": "Set the border to '0.125rem solid #333'", "options": { "caseSensitive": false } @@ -102,7 +102,7 @@ "description": "Learn how to apply background colors and control text coloring in different ways.", "task": "Style the element with a background color of #e0f7fa and text color of #01579b.", "previewHTML": "
This element needs colors!
", - "previewBaseCSS": "body { font-family: sans-serif; padding: 20px; } .colorbox { padding: 25px; text-align: center; font-weight: bold; font-size: 18px; }", + "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .colorbox { padding: 1.5rem; text-align: center; font-weight: bold; font-size: 1.125rem; }", "sandboxCSS": "", "codePrefix": "/* Style the colorbox with background and text colors */\n", "initialCode": "", @@ -161,10 +161,10 @@ "id": "basics-4", "title": "Typography Basics", "description": "Learn how to control text appearance with CSS typography properties.", - "task": "Style the heading with font-family 'Georgia, serif', font-size of 24px, and add text-shadow of 1px 1px 2px #aaa.", + "task": "Style the heading with font-family 'Georgia, serif', font-size of 1.5rem, and add text-shadow of 0.0625rem 0.0625rem 0.125rem #aaa.", "previewHTML": "

Style This Heading Text

", - "previewBaseCSS": "body { font-family: sans-serif; padding: 20px; }", - "sandboxCSS": ".heading { border-bottom: 1px solid #ddd; padding-bottom: 10px; }", + "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; }", + "sandboxCSS": ".heading { border-bottom: 0.0625rem solid #ddd; padding-bottom: 0.625rem; }", "codePrefix": "/* Style the heading text */\n", "initialCode": "", "codeSuffix": "", @@ -204,8 +204,8 @@ }, { "type": "regex", - "value": "text-shadow:\\s*1px\\s+1px\\s+2px\\s+#aaa", - "message": "Set the text-shadow to '1px 1px 2px #aaa'", + "value": "text-shadow:\\s*0.0625rem\\s+0.0625rem\\s+0.125rem\\s+#aaa", + "message": "Set the text-shadow to '0.0625rem 0.0625rem 0.125rem #aaa'", "options": { "caseSensitive": false } @@ -214,13 +214,13 @@ }, { "id": "basics-5", - "title": "CSS Units", - "description": "Learn about different CSS units like pixels, percentages, em, rem, and when to use each.", - "task": "Set the width of the box to 80%, the max-width to 600px, and the font-size to 1.2rem.", - "previewHTML": "
This box needs sizing with different units.
", - "previewBaseCSS": "body { font-family: sans-serif; padding: 20px; } .units-box { background-color: #f5f5f5; padding: 15px; border: 1px solid #ddd; }", + "title": "CSS Units and Variables", + "description": "Learn about different CSS units like rem, percentages, em, and how to use CSS variables (custom properties).", + "task": "Set the width of the box to 80%, the max-width to 37.5rem, and create a CSS variable --main-color with the value #6200ee, then use it for the border color.", + "previewHTML": "
This box needs sizing with different units and a border using a CSS variable.
", + "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .units-box { background-color: #f5f5f5; padding: 1rem; border: 0.125rem solid #ddd; }", "sandboxCSS": "", - "codePrefix": "/* Style the box using different units */\n", + "codePrefix": "/* Style the box using different units and CSS variables */\n:root {\n /* Define your CSS variable here */\n}\n\n", "initialCode": "", "codeSuffix": "", "previewContainer": "preview-area", @@ -251,8 +251,16 @@ }, { "type": "contains", - "value": "font-size", - "message": "Use the 'font-size' property", + "value": "--main-color", + "message": "Define the '--main-color' CSS variable", + "options": { + "caseSensitive": false + } + }, + { + "type": "contains", + "value": "var(--main-color)", + "message": "Use the CSS variable with var(--main-color)", "options": { "caseSensitive": false } @@ -272,20 +280,9 @@ "type": "property_value", "value": { "property": "max-width", - "expected": "600px" + "expected": "37.5rem" }, - "message": "Set the max-width to '600px'", - "options": { - "exact": true - } - }, - { - "type": "property_value", - "value": { - "property": "font-size", - "expected": "1.2rem" - }, - "message": "Set the font-size to '1.2rem'", + "message": "Set the max-width to '37.5rem'", "options": { "exact": true } diff --git a/src/lessons/configs/flexbox.json b/src/lessons/configs/flexbox.json index 359e6e3..734114e 100644 --- a/src/lessons/configs/flexbox.json +++ b/src/lessons/configs/flexbox.json @@ -1,4 +1,260 @@ { "id": "flexbox", - "title": "Flexbox Layout" + "title": "CSS Flexbox", + "description": "Master the flexible box layout model for modern responsive designs", + "difficulty": "intermediate", + "lessons": [ + { + "id": "flexbox-1", + "title": "Flexbox Container Basics", + "description": "Learn how to create a flex container and understand the main and cross axes.", + "task": "Convert the parent div into a flex container and set it to display items in a row (which is the default).", + "previewHTML": "
1
2
3
", + "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .box { background-color: #3498db; color: white; padding: 1.25rem; margin: 0.5rem; text-align: center; font-weight: bold; }", + "sandboxCSS": ".flex-container { border: 0.125rem dashed #ccc; padding: 1rem; }", + "codePrefix": "/* Convert the container to use flexbox */\n", + "initialCode": "", + "codeSuffix": "", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains", + "value": ".flex-container", + "message": "Use the '.flex-container' class selector", + "options": { + "caseSensitive": false + } + }, + { + "type": "contains", + "value": "display", + "message": "Use the 'display' property", + "options": { + "caseSensitive": false + } + }, + { + "type": "property_value", + "value": { + "property": "display", + "expected": "flex" + }, + "message": "Set the display property to 'flex'", + "options": { + "exact": true + } + } + ] + }, + { + "id": "flexbox-2", + "title": "Flex Direction and Wrap", + "description": "Control the direction and wrapping of flex items within a container.", + "task": "Set the flex container to display items in a column and allow them to wrap if needed.", + "previewHTML": "
1
2
3
4
5
", + "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .box { background-color: #3498db; color: white; padding: 1.25rem; margin: 0.5rem; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; }", + "sandboxCSS": ".flex-container { border: 0.125rem dashed #ccc; padding: 1rem; height: 20rem; display: flex; }", + "codePrefix": "/* Set the flex direction to column and enable wrapping */\n.flex-container {\n /* Add your code below */\n", + "initialCode": "", + "codeSuffix": "\n}", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains", + "value": "flex-direction", + "message": "Use the 'flex-direction' property", + "options": { + "caseSensitive": false + } + }, + { + "type": "contains", + "value": "flex-wrap", + "message": "Use the 'flex-wrap' property", + "options": { + "caseSensitive": false + } + }, + { + "type": "property_value", + "value": { + "property": "flex-direction", + "expected": "column" + }, + "message": "Set the flex-direction to 'column'", + "options": { + "exact": true + } + }, + { + "type": "property_value", + "value": { + "property": "flex-wrap", + "expected": "wrap" + }, + "message": "Set flex-wrap to 'wrap'", + "options": { + "exact": true + } + } + ] + }, + { + "id": "flexbox-3", + "title": "Justify Content", + "description": "Learn how to align flex items along the main axis of the flex container.", + "task": "Distribute the flex items evenly along the main axis with space between them.", + "previewHTML": "
1
2
3
", + "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .box { background-color: #3498db; color: white; padding: 1.25rem; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; }", + "sandboxCSS": ".flex-container { border: 0.125rem dashed #ccc; padding: 1rem; display: flex; }", + "codePrefix": "/* Distribute the items with space between them */\n.flex-container {\n /* Add your code below */\n", + "initialCode": "", + "codeSuffix": "\n}", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains", + "value": "justify-content", + "message": "Use the 'justify-content' property", + "options": { + "caseSensitive": false + } + }, + { + "type": "property_value", + "value": { + "property": "justify-content", + "expected": "space-between" + }, + "message": "Set justify-content to 'space-between'", + "options": { + "exact": true + } + } + ] + }, + { + "id": "flexbox-4", + "title": "Align Items", + "description": "Control how flex items are aligned along the cross axis of the flex container.", + "task": "Center the flex items vertically along the cross axis.", + "previewHTML": "
1
2
3
", + "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .box { background-color: #3498db; color: white; padding: 1.25rem; margin: 0.5rem; text-align: center; font-weight: bold; width: 3rem; display: flex; justify-content: center; } .tall { height: 8rem; align-items: flex-start; } .short { height: 3rem; align-items: flex-start; }", + "sandboxCSS": ".flex-container { border: 0.125rem dashed #ccc; padding: 1rem; display: flex; height: 12rem; }", + "codePrefix": "/* Center the items vertically */\n.flex-container {\n /* Add your code below */\n", + "initialCode": "", + "codeSuffix": "\n}", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains", + "value": "align-items", + "message": "Use the 'align-items' property", + "options": { + "caseSensitive": false + } + }, + { + "type": "property_value", + "value": { + "property": "align-items", + "expected": "center" + }, + "message": "Set align-items to 'center'", + "options": { + "exact": true + } + } + ] + }, + { + "id": "flexbox-5", + "title": "Flex Item Properties", + "description": "Control how individual flex items grow, shrink, and establish their base size.", + "task": "Make the second box grow twice as much as the others and prevent the third box from shrinking.", + "previewHTML": "
1
2
3
", + "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .box { background-color: #3498db; color: white; padding: 1.25rem; margin: 0.5rem; text-align: center; font-weight: bold; height: 3rem; display: flex; align-items: center; justify-content: center; } .box1 { background-color: #e74c3c; } .box2 { background-color: #2ecc71; } .box3 { background-color: #f39c12; }", + "sandboxCSS": ".flex-container { border: 0.125rem dashed #ccc; padding: 1rem; display: flex; width: 100%; }", + "codePrefix": "/* Make box2 grow more and prevent box3 from shrinking */\n", + "initialCode": ".box1 {\n flex: 1;\n}\n\n.box2 {\n /* Make this grow twice as much as the others */\n}\n\n.box3 {\n flex: 1;\n /* Prevent this from shrinking */\n}", + "codeSuffix": "", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains", + "value": ".box2", + "message": "Style the '.box2' element", + "options": { + "caseSensitive": false + } + }, + { + "type": "contains", + "value": ".box3", + "message": "Style the '.box3' element", + "options": { + "caseSensitive": false + } + }, + { + "type": "regex", + "value": ".box2\\s*{[^}]*flex:\\s*2", + "message": "Set flex to '2' for box2", + "options": { + "caseSensitive": false + } + }, + { + "type": "regex", + "value": ".box3\\s*{[^}]*flex-shrink:\\s*0", + "message": "Set flex-shrink to '0' for box3", + "options": { + "caseSensitive": false + } + } + ] + }, + { + "id": "flexbox-6", + "title": "Aligning Individual Items", + "description": "Learn how to override the container's alignment for individual flex items.", + "task": "Set 'align-self' on the middle item to align it to the start of the cross axis.", + "previewHTML": "
1
2
3
", + "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .box { background-color: #3498db; color: white; padding: 1.25rem; margin: 0.5rem; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; } .middle { background-color: #2ecc71; }", + "sandboxCSS": ".flex-container { border: 0.125rem dashed #ccc; padding: 1rem; display: flex; height: 15rem; align-items: center; }", + "codePrefix": "/* Align the middle item to the start */\n", + "initialCode": "", + "codeSuffix": "", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains", + "value": ".middle", + "message": "Use the '.middle' class selector", + "options": { + "caseSensitive": false + } + }, + { + "type": "contains", + "value": "align-self", + "message": "Use the 'align-self' property", + "options": { + "caseSensitive": false + } + }, + { + "type": "property_value", + "value": { + "property": "align-self", + "expected": "flex-start" + }, + "message": "Set align-self to 'flex-start'", + "options": { + "exact": true + } + } + ] + } + ] } \ No newline at end of file diff --git a/src/lessons/configs/grid.json b/src/lessons/configs/grid.json index 9e26dfe..8a7f629 100644 --- a/src/lessons/configs/grid.json +++ b/src/lessons/configs/grid.json @@ -1 +1,388 @@ -{} \ No newline at end of file +{ + "id": "grid", + "title": "CSS Grid", + "description": "Master the grid layout system for complex two-dimensional layouts", + "difficulty": "intermediate", + "lessons": [ + { + "id": "grid-1", + "title": "Grid Container Basics", + "description": "Learn how to create a grid container and define basic grid structures.", + "task": "Create a grid with 3 columns of equal width and a 1rem gap between grid items.", + "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; }", + "codePrefix": "/* Create a grid with 3 equal columns and gap */\n", + "initialCode": "", + "codeSuffix": "", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains", + "value": ".grid-container", + "message": "Use the '.grid-container' class selector", + "options": { + "caseSensitive": false + } + }, + { + "type": "contains", + "value": "display", + "message": "Use the 'display' property", + "options": { + "caseSensitive": false + } + }, + { + "type": "contains", + "value": "grid-template-columns", + "message": "Use the 'grid-template-columns' property", + "options": { + "caseSensitive": false + } + }, + { + "type": "contains", + "value": "gap", + "message": "Use the 'gap' property", + "options": { + "caseSensitive": false + } + }, + { + "type": "property_value", + "value": { + "property": "display", + "expected": "grid" + }, + "message": "Set display to 'grid'", + "options": { + "exact": true + } + }, + { + "type": "regex", + "value": "grid-template-columns:\\s*repeat\\(\\s*3\\s*,\\s*1fr\\s*\\)", + "message": "Set grid-template-columns to 'repeat(3, 1fr)'", + "options": { + "caseSensitive": false + } + }, + { + "type": "property_value", + "value": { + "property": "gap", + "expected": "1rem" + }, + "message": "Set gap to '1rem'", + "options": { + "exact": true + } + } + ] + }, + { + "id": "grid-2", + "title": "Grid Template Areas", + "description": "Use named grid areas to create visual layouts that are easy to understand.", + "task": "Create a layout with a header, sidebar, main content area, and footer using grid-template-areas.", + "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", + "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}", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains", + "value": "grid-template-areas", + "message": "Use the 'grid-template-areas' property", + "options": { + "caseSensitive": false + } + }, + { + "type": "contains", + "value": "header", + "message": "Define a 'header' area", + "options": { + "caseSensitive": false + } + }, + { + "type": "contains", + "value": "sidebar", + "message": "Define a 'sidebar' area", + "options": { + "caseSensitive": false + } + }, + { + "type": "contains", + "value": "content", + "message": "Define a 'content' area", + "options": { + "caseSensitive": false + } + }, + { + "type": "contains", + "value": "footer", + "message": "Define a 'footer' area", + "options": { + "caseSensitive": false + } + }, + { + "type": "regex", + "value": "grid-template-areas:\\s*['\"]header\\s+header['\"]\\s*['\"]sidebar\\s+content['\"]\\s*['\"]footer\\s+footer['\"]", + "message": "Create a layout with header spanning full width, sidebar and content in middle row, and footer spanning full width", + "options": { + "caseSensitive": false + } + } + ] + }, + { + "id": "grid-3", + "title": "Spanning Grid Cells", + "description": "Make grid items span multiple grid cells horizontally or vertically.", + "task": "Make the featured item span 2 columns and 2 rows using grid-column and grid-row.", + "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; }", + "codePrefix": "/* Make the featured item span 2x2 cells */\n", + "initialCode": "", + "codeSuffix": "", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains", + "value": ".featured", + "message": "Use the '.featured' class selector", + "options": { + "caseSensitive": false + } + }, + { + "type": "contains", + "value": "grid-column", + "message": "Use the 'grid-column' property", + "options": { + "caseSensitive": false + } + }, + { + "type": "contains", + "value": "grid-row", + "message": "Use the 'grid-row' property", + "options": { + "caseSensitive": false + } + }, + { + "type": "regex", + "value": "grid-column:\\s*span\\s+2", + "message": "Set grid-column to 'span 2'", + "options": { + "caseSensitive": false + } + }, + { + "type": "regex", + "value": "grid-row:\\s*span\\s+2", + "message": "Set grid-row to 'span 2'", + "options": { + "caseSensitive": false + } + } + ] + }, + { + "id": "grid-4", + "title": "Automatic Grid Placement", + "description": "Learn how to use auto-placement and auto-fit/auto-fill for responsive grid layouts.", + "task": "Create a responsive grid with auto-fit that has at least 10rem wide columns that fill the available space.", + "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; }", + "codePrefix": "/* Create a responsive grid with auto-fit columns */\n", + "initialCode": "", + "codeSuffix": "", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains", + "value": ".responsive-grid", + "message": "Use the '.responsive-grid' class selector", + "options": { + "caseSensitive": false + } + }, + { + "type": "contains", + "value": "display", + "message": "Use the 'display' property", + "options": { + "caseSensitive": false + } + }, + { + "type": "contains", + "value": "grid-template-columns", + "message": "Use the 'grid-template-columns' property", + "options": { + "caseSensitive": false + } + }, + { + "type": "contains", + "value": "minmax", + "message": "Use the 'minmax' function", + "options": { + "caseSensitive": false + } + }, + { + "type": "contains", + "value": "auto-fit", + "message": "Use 'auto-fit'", + "options": { + "caseSensitive": false + } + }, + { + "type": "regex", + "value": "grid-template-columns:\\s*repeat\\(\\s*auto-fit\\s*,\\s*minmax\\(\\s*10rem\\s*,\\s*1fr\\s*\\)\\s*\\)", + "message": "Set grid-template-columns to 'repeat(auto-fit, minmax(10rem, 1fr))'", + "options": { + "caseSensitive": false + } + } + ] + }, + { + "id": "grid-5", + "title": "Grid Alignment", + "description": "Control the alignment of grid items within their cells on both axes.", + "task": "Center the grid items both horizontally and vertically within their grid cells.", + "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", + "initialCode": "", + "codeSuffix": "\n}", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains", + "value": "justify-items", + "message": "Use the 'justify-items' property", + "options": { + "caseSensitive": false + } + }, + { + "type": "contains", + "value": "align-items", + "message": "Use the 'align-items' property", + "options": { + "caseSensitive": false + } + }, + { + "type": "property_value", + "value": { + "property": "justify-items", + "expected": "center" + }, + "message": "Set justify-items to 'center'", + "options": { + "exact": true + } + }, + { + "type": "property_value", + "value": { + "property": "align-items", + "expected": "center" + }, + "message": "Set align-items to 'center'", + "options": { + "exact": true + } + } + ] + }, + { + "id": "grid-6", + "title": "Overlapping Grid Items", + "description": "Learn how to create overlapping layouts by using grid positioning and z-index.", + "task": "Position the overlay element to cover the entire grid area and use z-index to place it above other items.", + "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; }", + "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}", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains", + "value": "grid-column", + "message": "Use the 'grid-column' property", + "options": { + "caseSensitive": false + } + }, + { + "type": "contains", + "value": "grid-row", + "message": "Use the 'grid-row' property", + "options": { + "caseSensitive": false + } + }, + { + "type": "contains", + "value": "z-index", + "message": "Use the 'z-index' property", + "options": { + "caseSensitive": false + } + }, + { + "type": "property_value", + "value": { + "property": "grid-column", + "expected": "1" + }, + "message": "Set grid-column to '1'", + "options": { + "exact": true + } + }, + { + "type": "property_value", + "value": { + "property": "grid-row", + "expected": "1" + }, + "message": "Set grid-row to '1'", + "options": { + "exact": true + } + }, + { + "type": "regex", + "value": "z-index:\\s*[1-9]\\d*", + "message": "Set z-index to a positive number", + "options": { + "caseSensitive": false + } + } + ] + } + ] +} \ No newline at end of file