diff --git a/lessons/basics.json b/lessons/basics.json index 303bb76..c6f1ab6 100644 --- a/lessons/basics.json +++ b/lessons/basics.json @@ -1,293 +1,293 @@ { - "id": "basics", - "title": "CSS Basics", - "description": "Learn the fundamental concepts of CSS styling", - "difficulty": "beginner", - "lessons": [ - { - "id": "basics-1", - "title": "Introduction to Selectors", - "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: 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": "", - "previewContainer": "preview-area", - "validations": [ + "id": "basics", + "title": "CSS Basics", + "description": "Learn the fundamental concepts of CSS styling", + "difficulty": "beginner", + "lessons": [ { - "type": "contains", - "value": ".target", - "message": "Make sure to use the '.target' class selector", - "options": { - "caseSensitive": false - } + "id": "basics-1", + "title": "Introduction to Selectors", + "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: 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": "", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains", + "value": ".target", + "message": "Make sure to use the '.target' class selector", + "options": { + "caseSensitive": false + } + }, + { + "type": "contains", + "value": "color", + "message": "Use the 'color' property", + "options": { + "caseSensitive": false + } + }, + { + "type": "property_value", + "value": { + "property": "color", + "expected": "blue" + }, + "message": "Set the color property to 'blue'", + "options": { + "exact": false + } + } + ] }, { - "type": "contains", - "value": "color", - "message": "Use the 'color' property", - "options": { - "caseSensitive": false - } + "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 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: 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": "", + "codeSuffix": "\n}", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains", + "value": "padding", + "message": "Use the 'padding' property", + "options": { + "caseSensitive": false + } + }, + { + "type": "contains", + "value": "border", + "message": "Use the 'border' property", + "options": { + "caseSensitive": false + } + }, + { + "type": "property_value", + "value": { + "property": "padding", + "expected": "1.25rem" + }, + "message": "Set the padding to '1.25rem'", + "options": { + "exact": false + } + }, + { + "type": "regex", + "value": "border:\\s*0.125rem\\s+solid\\s+#333", + "message": "Set the border to '0.125rem solid #333'", + "options": { + "caseSensitive": false + } + } + ] }, { - "type": "property_value", - "value": { - "property": "color", - "expected": "blue" - }, - "message": "Set the color property to 'blue'", - "options": { - "exact": false - } + "id": "basics-3", + "title": "Colors and Backgrounds", + "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: 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": "", + "codeSuffix": "", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains", + "value": ".colorbox", + "message": "Use the '.colorbox' class selector", + "options": { + "caseSensitive": false + } + }, + { + "type": "contains", + "value": "background-color", + "message": "Use the 'background-color' property", + "options": { + "caseSensitive": false + } + }, + { + "type": "contains", + "value": "color", + "message": "Use the 'color' property", + "options": { + "caseSensitive": false + } + }, + { + "type": "property_value", + "value": { + "property": "background-color", + "expected": "#e0f7fa" + }, + "message": "Set the background-color to '#e0f7fa'", + "options": { + "exact": true + } + }, + { + "type": "property_value", + "value": { + "property": "color", + "expected": "#01579b" + }, + "message": "Set the text color to '#01579b'", + "options": { + "exact": true + } + } + ] + }, + { + "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 1.5rem, and add text-shadow of 0.0625rem 0.0625rem 0.125rem #aaa.", + "previewHTML": "

Style This Heading Text

", + "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": "", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains", + "value": ".heading", + "message": "Use the '.heading' class selector", + "options": { + "caseSensitive": false + } + }, + { + "type": "contains", + "value": "font-family", + "message": "Use the 'font-family' property", + "options": { + "caseSensitive": false + } + }, + { + "type": "contains", + "value": "font-size", + "message": "Use the 'font-size' property", + "options": { + "caseSensitive": false + } + }, + { + "type": "contains", + "value": "text-shadow", + "message": "Use the 'text-shadow' property", + "options": { + "caseSensitive": false + } + }, + { + "type": "regex", + "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 + } + } + ] + }, + { + "id": "basics-5", + "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 and CSS variables */\n:root {\n /* Define your CSS variable here */\n}\n\n", + "initialCode": "", + "codeSuffix": "", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains", + "value": ".units-box", + "message": "Use the '.units-box' class selector", + "options": { + "caseSensitive": false + } + }, + { + "type": "contains", + "value": "width", + "message": "Use the 'width' property", + "options": { + "caseSensitive": false + } + }, + { + "type": "contains", + "value": "max-width", + "message": "Use the 'max-width' property", + "options": { + "caseSensitive": false + } + }, + { + "type": "contains", + "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 + } + }, + { + "type": "property_value", + "value": { + "property": "width", + "expected": "80%" + }, + "message": "Set the width to '80%'", + "options": { + "exact": true + } + }, + { + "type": "property_value", + "value": { + "property": "max-width", + "expected": "37.5rem" + }, + "message": "Set the max-width to '37.5rem'", + "options": { + "exact": true + } + } + ] } - ] - }, - { - "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 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: 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": "", - "codeSuffix": "\n}", - "previewContainer": "preview-area", - "validations": [ - { - "type": "contains", - "value": "padding", - "message": "Use the 'padding' property", - "options": { - "caseSensitive": false - } - }, - { - "type": "contains", - "value": "border", - "message": "Use the 'border' property", - "options": { - "caseSensitive": false - } - }, - { - "type": "property_value", - "value": { - "property": "padding", - "expected": "1.25rem" - }, - "message": "Set the padding to '1.25rem'", - "options": { - "exact": false - } - }, - { - "type": "regex", - "value": "border:\\s*0.125rem\\s+solid\\s+#333", - "message": "Set the border to '0.125rem solid #333'", - "options": { - "caseSensitive": false - } - } - ] - }, - { - "id": "basics-3", - "title": "Colors and Backgrounds", - "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: 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": "", - "codeSuffix": "", - "previewContainer": "preview-area", - "validations": [ - { - "type": "contains", - "value": ".colorbox", - "message": "Use the '.colorbox' class selector", - "options": { - "caseSensitive": false - } - }, - { - "type": "contains", - "value": "background-color", - "message": "Use the 'background-color' property", - "options": { - "caseSensitive": false - } - }, - { - "type": "contains", - "value": "color", - "message": "Use the 'color' property", - "options": { - "caseSensitive": false - } - }, - { - "type": "property_value", - "value": { - "property": "background-color", - "expected": "#e0f7fa" - }, - "message": "Set the background-color to '#e0f7fa'", - "options": { - "exact": true - } - }, - { - "type": "property_value", - "value": { - "property": "color", - "expected": "#01579b" - }, - "message": "Set the text color to '#01579b'", - "options": { - "exact": true - } - } - ] - }, - { - "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 1.5rem, and add text-shadow of 0.0625rem 0.0625rem 0.125rem #aaa.", - "previewHTML": "

Style This Heading Text

", - "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": "", - "previewContainer": "preview-area", - "validations": [ - { - "type": "contains", - "value": ".heading", - "message": "Use the '.heading' class selector", - "options": { - "caseSensitive": false - } - }, - { - "type": "contains", - "value": "font-family", - "message": "Use the 'font-family' property", - "options": { - "caseSensitive": false - } - }, - { - "type": "contains", - "value": "font-size", - "message": "Use the 'font-size' property", - "options": { - "caseSensitive": false - } - }, - { - "type": "contains", - "value": "text-shadow", - "message": "Use the 'text-shadow' property", - "options": { - "caseSensitive": false - } - }, - { - "type": "regex", - "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 - } - } - ] - }, - { - "id": "basics-5", - "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 and CSS variables */\n:root {\n /* Define your CSS variable here */\n}\n\n", - "initialCode": "", - "codeSuffix": "", - "previewContainer": "preview-area", - "validations": [ - { - "type": "contains", - "value": ".units-box", - "message": "Use the '.units-box' class selector", - "options": { - "caseSensitive": false - } - }, - { - "type": "contains", - "value": "width", - "message": "Use the 'width' property", - "options": { - "caseSensitive": false - } - }, - { - "type": "contains", - "value": "max-width", - "message": "Use the 'max-width' property", - "options": { - "caseSensitive": false - } - }, - { - "type": "contains", - "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 - } - }, - { - "type": "property_value", - "value": { - "property": "width", - "expected": "80%" - }, - "message": "Set the width to '80%'", - "options": { - "exact": true - } - }, - { - "type": "property_value", - "value": { - "property": "max-width", - "expected": "37.5rem" - }, - "message": "Set the max-width to '37.5rem'", - "options": { - "exact": true - } - } - ] - } - ] -} \ No newline at end of file + ] +} diff --git a/lessons/flexbox.json b/lessons/flexbox.json index 734114e..7b380bd 100644 --- a/lessons/flexbox.json +++ b/lessons/flexbox.json @@ -1,260 +1,260 @@ { - "id": "flexbox", - "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 + "id": "flexbox", + "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 + } + } + ] + } + ] +} diff --git a/lessons/grid.json b/lessons/grid.json index 8a7f629..b3191bd 100644 --- a/lessons/grid.json +++ b/lessons/grid.json @@ -1,388 +1,388 @@ { - "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": [ + "id": "grid", + "title": "CSS Grid", + "description": "Master the grid layout system for complex two-dimensional layouts", + "difficulty": "intermediate", + "lessons": [ { - "type": "contains", - "value": ".grid-container", - "message": "Use the '.grid-container' class selector", - "options": { - "caseSensitive": false - } + "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 + } + } + ] }, { - "type": "contains", - "value": "display", - "message": "Use the 'display' property", - "options": { - "caseSensitive": false - } + "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 + } + } + ] }, { - "type": "contains", - "value": "grid-template-columns", - "message": "Use the 'grid-template-columns' property", - "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 + } + } + ] }, { - "type": "contains", - "value": "gap", - "message": "Use the 'gap' property", - "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 + } + } + ] }, { - "type": "property_value", - "value": { - "property": "display", - "expected": "grid" - }, - "message": "Set display to 'grid'", - "options": { - "exact": true - } + "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 + } + } + ] }, { - "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-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 + } + } + ] } - ] - }, - { - "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 + ] +} diff --git a/lessons/tailwindcss.json b/lessons/tailwindcss.json index 2ae41d7..85cabe2 100644 --- a/lessons/tailwindcss.json +++ b/lessons/tailwindcss.json @@ -1,143 +1,143 @@ { - "id": "tailwindcss-basics", - "title": "Tailwind CSS Basics", - "description": "Learn how to use Tailwind CSS utility classes to quickly style your HTML elements", - "difficulty": "beginner", - "lessons": [ - { - "id": "tw-1", - "title": "Text and Font Weight", - "description": "Tailwind provides utility classes to style text appearance, like size and weight.", - "task": "Make the heading bold and the paragraph text gray using Tailwind classes.", - "previewHTML": "

Welcome to Tailwind

Tailwind makes styling easy.

", - "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1.25rem; }", - "sandboxCSS": "", - "codePrefix": "\n

Welcome to Tailwind

\n

Tailwind makes styling easy.

", - "codeSuffix": "", - "previewContainer": "preview-area", - "validations": [ + "id": "tailwindcss-basics", + "title": "Tailwind CSS Basics", + "description": "Learn how to use Tailwind CSS utility classes to quickly style your HTML elements", + "difficulty": "beginner", + "lessons": [ { - "type": "contains", - "value": "font-bold", - "message": "Add 'font-bold' to the heading" + "id": "tw-1", + "title": "Text and Font Weight", + "description": "Tailwind provides utility classes to style text appearance, like size and weight.", + "task": "Make the heading bold and the paragraph text gray using Tailwind classes.", + "previewHTML": "

Welcome to Tailwind

Tailwind makes styling easy.

", + "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1.25rem; }", + "sandboxCSS": "", + "codePrefix": "\n

Welcome to Tailwind

\n

Tailwind makes styling easy.

", + "codeSuffix": "", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains", + "value": "font-bold", + "message": "Add 'font-bold' to the heading" + }, + { + "type": "contains", + "value": "text-gray-600", + "message": "Add 'text-gray-600' to the paragraph" + } + ] }, { - "type": "contains", - "value": "text-gray-600", - "message": "Add 'text-gray-600' to the paragraph" + "id": "tw-2", + "title": "Background Colors", + "description": "Use Tailwind background utility classes like bg-red-400 to style element backgrounds.", + "task": "Apply a red background to the alert box and make the text white.", + "previewHTML": "
Error: Something went wrong!
", + "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1.25rem; } .alert { padding: 1rem; border-radius: 0.5rem; }", + "sandboxCSS": "", + "codePrefix": "
Error: Something went wrong!
", + "codeSuffix": "", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains", + "value": "bg-red-400", + "message": "Use 'bg-red-400' to set the background color" + }, + { + "type": "contains", + "value": "text-white", + "message": "Use 'text-white' for the text color" + } + ] + }, + { + "id": "tw-3", + "title": "Spacing with Margin and Padding", + "description": "Tailwind provides spacing utilities such as 'm-' for margin and 'p-' for padding.", + "task": "Add margin between the buttons and padding inside them.", + "previewHTML": "", + "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1.25rem; } .btn { background-color: #3498db; color: white; border-radius: 0.375rem; }", + "sandboxCSS": "", + "codePrefix": "\n", + "codeSuffix": "", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains", + "value": "m-2", + "message": "Add 'm-2' to add spacing between the buttons" + }, + { + "type": "contains", + "value": "p-2", + "message": "Add 'p-2' for internal button padding" + } + ] + }, + { + "id": "tw-4", + "title": "Using Hover Variants", + "description": "Tailwind makes it easy to add hover styles using the 'hover:' prefix.", + "task": "Add a hover effect that changes the background color of the button to green.", + "previewHTML": "", + "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1.25rem; } .action { padding: 0.75rem 1.25rem; border-radius: 0.5rem; background-color: #ccc; color: #000; }", + "sandboxCSS": "", + "codePrefix": "", + "codeSuffix": "", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains", + "value": "hover:bg-green-500", + "message": "Add 'hover:bg-green-500' to change background color on hover" + } + ] + }, + { + "id": "tw-5", + "title": "Combining Multiple Classes", + "description": "You can combine multiple Tailwind utilities to quickly build components.", + "task": "Style the card with a white background, shadow, rounded corners, padding, and center-aligned text.", + "previewHTML": "
This is a card component.
", + "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1.25rem; background-color: #f3f4f6; }", + "sandboxCSS": "", + "codePrefix": "
This is a card component.
", + "codeSuffix": "", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains", + "value": "bg-white", + "message": "Use 'bg-white' for background color" + }, + { + "type": "contains", + "value": "shadow", + "message": "Use 'shadow' to add a shadow" + }, + { + "type": "contains", + "value": "rounded", + "message": "Use 'rounded' to add rounded corners" + }, + { + "type": "contains", + "value": "p-4", + "message": "Use 'p-4' for padding" + }, + { + "type": "contains", + "value": "text-center", + "message": "Use 'text-center' to center the text" + } + ] } - ] - }, - { - "id": "tw-2", - "title": "Background Colors", - "description": "Use Tailwind background utility classes like bg-red-400 to style element backgrounds.", - "task": "Apply a red background to the alert box and make the text white.", - "previewHTML": "
Error: Something went wrong!
", - "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1.25rem; } .alert { padding: 1rem; border-radius: 0.5rem; }", - "sandboxCSS": "", - "codePrefix": "
Error: Something went wrong!
", - "codeSuffix": "", - "previewContainer": "preview-area", - "validations": [ - { - "type": "contains", - "value": "bg-red-400", - "message": "Use 'bg-red-400' to set the background color" - }, - { - "type": "contains", - "value": "text-white", - "message": "Use 'text-white' for the text color" - } - ] - }, - { - "id": "tw-3", - "title": "Spacing with Margin and Padding", - "description": "Tailwind provides spacing utilities such as 'm-' for margin and 'p-' for padding.", - "task": "Add margin between the buttons and padding inside them.", - "previewHTML": "", - "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1.25rem; } .btn { background-color: #3498db; color: white; border-radius: 0.375rem; }", - "sandboxCSS": "", - "codePrefix": "\n", - "codeSuffix": "", - "previewContainer": "preview-area", - "validations": [ - { - "type": "contains", - "value": "m-2", - "message": "Add 'm-2' to add spacing between the buttons" - }, - { - "type": "contains", - "value": "p-2", - "message": "Add 'p-2' for internal button padding" - } - ] - }, - { - "id": "tw-4", - "title": "Using Hover Variants", - "description": "Tailwind makes it easy to add hover styles using the 'hover:' prefix.", - "task": "Add a hover effect that changes the background color of the button to green.", - "previewHTML": "", - "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1.25rem; } .action { padding: 0.75rem 1.25rem; border-radius: 0.5rem; background-color: #ccc; color: #000; }", - "sandboxCSS": "", - "codePrefix": "", - "codeSuffix": "", - "previewContainer": "preview-area", - "validations": [ - { - "type": "contains", - "value": "hover:bg-green-500", - "message": "Add 'hover:bg-green-500' to change background color on hover" - } - ] - }, - { - "id": "tw-5", - "title": "Combining Multiple Classes", - "description": "You can combine multiple Tailwind utilities to quickly build components.", - "task": "Style the card with a white background, shadow, rounded corners, padding, and center-aligned text.", - "previewHTML": "
This is a card component.
", - "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1.25rem; background-color: #f3f4f6; }", - "sandboxCSS": "", - "codePrefix": "
This is a card component.
", - "codeSuffix": "", - "previewContainer": "preview-area", - "validations": [ - { - "type": "contains", - "value": "bg-white", - "message": "Use 'bg-white' for background color" - }, - { - "type": "contains", - "value": "shadow", - "message": "Use 'shadow' to add a shadow" - }, - { - "type": "contains", - "value": "rounded", - "message": "Use 'rounded' to add rounded corners" - }, - { - "type": "contains", - "value": "p-4", - "message": "Use 'p-4' for padding" - }, - { - "type": "contains", - "value": "text-center", - "message": "Use 'text-center' to center the text" - } - ] - } - ] + ] }