style: run format.lessons first time
This commit is contained in:
Michael Czechowski
@@ -1,293 +1,293 @@
|
|||||||
{
|
{
|
||||||
"id": "basics",
|
"id": "basics",
|
||||||
"title": "CSS Basics",
|
"title": "CSS Basics",
|
||||||
"description": "Learn the fundamental concepts of CSS styling",
|
"description": "Learn the fundamental concepts of CSS styling",
|
||||||
"difficulty": "beginner",
|
"difficulty": "beginner",
|
||||||
"lessons": [
|
"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": "<p class='target'>This paragraph needs to be blue!</p><p>This paragraph should remain unchanged.</p>",
|
|
||||||
"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",
|
"id": "basics-1",
|
||||||
"value": ".target",
|
"title": "Introduction to Selectors",
|
||||||
"message": "Make sure to use the '.target' class selector",
|
"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.",
|
||||||
"options": {
|
"task": "Style the paragraph element by making its text color blue. Use the 'color' property with the value 'blue'.",
|
||||||
"caseSensitive": false
|
"previewHTML": "<p class='target'>This paragraph needs to be blue!</p><p>This paragraph should remain unchanged.</p>",
|
||||||
}
|
"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",
|
"id": "basics-2",
|
||||||
"value": "color",
|
"title": "Box Model Basics",
|
||||||
"message": "Use the 'color' property",
|
"description": "The CSS box model is a fundamental concept that describes how elements are sized and spaced on a page.",
|
||||||
"options": {
|
"task": "Add padding of 1.25rem and a 0.125rem solid border with color #333 to the box element.",
|
||||||
"caseSensitive": false
|
"previewHTML": "<div class='box'>This box needs padding and a border!</div>",
|
||||||
}
|
"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",
|
"id": "basics-3",
|
||||||
"value": {
|
"title": "Colors and Backgrounds",
|
||||||
"property": "color",
|
"description": "Learn how to apply background colors and control text coloring in different ways.",
|
||||||
"expected": "blue"
|
"task": "Style the element with a background color of #e0f7fa and text color of #01579b.",
|
||||||
},
|
"previewHTML": "<div class='colorbox'>This element needs colors!</div>",
|
||||||
"message": "Set the color property to 'blue'",
|
"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; }",
|
||||||
"options": {
|
"sandboxCSS": "",
|
||||||
"exact": false
|
"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": "<h2 class='heading'>Style This Heading Text</h2>",
|
||||||
|
"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": "<div class='units-box'>This box needs sizing with different units and a border using a CSS variable.</div>",
|
||||||
|
"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": "<div class='box'>This box needs padding and a border!</div>",
|
|
||||||
"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": "<div class='colorbox'>This element needs colors!</div>",
|
|
||||||
"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": "<h2 class='heading'>Style This Heading Text</h2>",
|
|
||||||
"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": "<div class='units-box'>This box needs sizing with different units and a border using a CSS variable.</div>",
|
|
||||||
"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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
@@ -1,260 +1,260 @@
|
|||||||
{
|
{
|
||||||
"id": "flexbox",
|
"id": "flexbox",
|
||||||
"title": "CSS Flexbox",
|
"title": "CSS Flexbox",
|
||||||
"description": "Master the flexible box layout model for modern responsive designs",
|
"description": "Master the flexible box layout model for modern responsive designs",
|
||||||
"difficulty": "intermediate",
|
"difficulty": "intermediate",
|
||||||
"lessons": [
|
"lessons": [
|
||||||
{
|
{
|
||||||
"id": "flexbox-1",
|
"id": "flexbox-1",
|
||||||
"title": "Flexbox Container Basics",
|
"title": "Flexbox Container Basics",
|
||||||
"description": "Learn how to create a flex container and understand the main and cross axes.",
|
"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).",
|
"task": "Convert the parent div into a flex container and set it to display items in a row (which is the default).",
|
||||||
"previewHTML": "<div class='flex-container'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div></div>",
|
"previewHTML": "<div class='flex-container'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div></div>",
|
||||||
"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; }",
|
"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; }",
|
"sandboxCSS": ".flex-container { border: 0.125rem dashed #ccc; padding: 1rem; }",
|
||||||
"codePrefix": "/* Convert the container to use flexbox */\n",
|
"codePrefix": "/* Convert the container to use flexbox */\n",
|
||||||
"initialCode": "",
|
"initialCode": "",
|
||||||
"codeSuffix": "",
|
"codeSuffix": "",
|
||||||
"previewContainer": "preview-area",
|
"previewContainer": "preview-area",
|
||||||
"validations": [
|
"validations": [
|
||||||
{
|
{
|
||||||
"type": "contains",
|
"type": "contains",
|
||||||
"value": ".flex-container",
|
"value": ".flex-container",
|
||||||
"message": "Use the '.flex-container' class selector",
|
"message": "Use the '.flex-container' class selector",
|
||||||
"options": {
|
"options": {
|
||||||
"caseSensitive": false
|
"caseSensitive": false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "contains",
|
"type": "contains",
|
||||||
"value": "display",
|
"value": "display",
|
||||||
"message": "Use the 'display' property",
|
"message": "Use the 'display' property",
|
||||||
"options": {
|
"options": {
|
||||||
"caseSensitive": false
|
"caseSensitive": false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "property_value",
|
"type": "property_value",
|
||||||
"value": {
|
"value": {
|
||||||
"property": "display",
|
"property": "display",
|
||||||
"expected": "flex"
|
"expected": "flex"
|
||||||
},
|
},
|
||||||
"message": "Set the display property to 'flex'",
|
"message": "Set the display property to 'flex'",
|
||||||
"options": {
|
"options": {
|
||||||
"exact": true
|
"exact": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "flexbox-2",
|
"id": "flexbox-2",
|
||||||
"title": "Flex Direction and Wrap",
|
"title": "Flex Direction and Wrap",
|
||||||
"description": "Control the direction and wrapping of flex items within a container.",
|
"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.",
|
"task": "Set the flex container to display items in a column and allow them to wrap if needed.",
|
||||||
"previewHTML": "<div class='flex-container'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div><div class='box'>4</div><div class='box'>5</div></div>",
|
"previewHTML": "<div class='flex-container'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div><div class='box'>4</div><div class='box'>5</div></div>",
|
||||||
"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; }",
|
"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; }",
|
"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",
|
"codePrefix": "/* Set the flex direction to column and enable wrapping */\n.flex-container {\n /* Add your code below */\n",
|
||||||
"initialCode": "",
|
"initialCode": "",
|
||||||
"codeSuffix": "\n}",
|
"codeSuffix": "\n}",
|
||||||
"previewContainer": "preview-area",
|
"previewContainer": "preview-area",
|
||||||
"validations": [
|
"validations": [
|
||||||
{
|
{
|
||||||
"type": "contains",
|
"type": "contains",
|
||||||
"value": "flex-direction",
|
"value": "flex-direction",
|
||||||
"message": "Use the 'flex-direction' property",
|
"message": "Use the 'flex-direction' property",
|
||||||
"options": {
|
"options": {
|
||||||
"caseSensitive": false
|
"caseSensitive": false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "contains",
|
"type": "contains",
|
||||||
"value": "flex-wrap",
|
"value": "flex-wrap",
|
||||||
"message": "Use the 'flex-wrap' property",
|
"message": "Use the 'flex-wrap' property",
|
||||||
"options": {
|
"options": {
|
||||||
"caseSensitive": false
|
"caseSensitive": false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "property_value",
|
"type": "property_value",
|
||||||
"value": {
|
"value": {
|
||||||
"property": "flex-direction",
|
"property": "flex-direction",
|
||||||
"expected": "column"
|
"expected": "column"
|
||||||
},
|
},
|
||||||
"message": "Set the flex-direction to 'column'",
|
"message": "Set the flex-direction to 'column'",
|
||||||
"options": {
|
"options": {
|
||||||
"exact": true
|
"exact": true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "property_value",
|
"type": "property_value",
|
||||||
"value": {
|
"value": {
|
||||||
"property": "flex-wrap",
|
"property": "flex-wrap",
|
||||||
"expected": "wrap"
|
"expected": "wrap"
|
||||||
},
|
},
|
||||||
"message": "Set flex-wrap to 'wrap'",
|
"message": "Set flex-wrap to 'wrap'",
|
||||||
"options": {
|
"options": {
|
||||||
"exact": true
|
"exact": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "flexbox-3",
|
"id": "flexbox-3",
|
||||||
"title": "Justify Content",
|
"title": "Justify Content",
|
||||||
"description": "Learn how to align flex items along the main axis of the flex container.",
|
"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.",
|
"task": "Distribute the flex items evenly along the main axis with space between them.",
|
||||||
"previewHTML": "<div class='flex-container'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div></div>",
|
"previewHTML": "<div class='flex-container'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div></div>",
|
||||||
"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; }",
|
"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; }",
|
"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",
|
"codePrefix": "/* Distribute the items with space between them */\n.flex-container {\n /* Add your code below */\n",
|
||||||
"initialCode": "",
|
"initialCode": "",
|
||||||
"codeSuffix": "\n}",
|
"codeSuffix": "\n}",
|
||||||
"previewContainer": "preview-area",
|
"previewContainer": "preview-area",
|
||||||
"validations": [
|
"validations": [
|
||||||
{
|
{
|
||||||
"type": "contains",
|
"type": "contains",
|
||||||
"value": "justify-content",
|
"value": "justify-content",
|
||||||
"message": "Use the 'justify-content' property",
|
"message": "Use the 'justify-content' property",
|
||||||
"options": {
|
"options": {
|
||||||
"caseSensitive": false
|
"caseSensitive": false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "property_value",
|
"type": "property_value",
|
||||||
"value": {
|
"value": {
|
||||||
"property": "justify-content",
|
"property": "justify-content",
|
||||||
"expected": "space-between"
|
"expected": "space-between"
|
||||||
},
|
},
|
||||||
"message": "Set justify-content to 'space-between'",
|
"message": "Set justify-content to 'space-between'",
|
||||||
"options": {
|
"options": {
|
||||||
"exact": true
|
"exact": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "flexbox-4",
|
"id": "flexbox-4",
|
||||||
"title": "Align Items",
|
"title": "Align Items",
|
||||||
"description": "Control how flex items are aligned along the cross axis of the flex container.",
|
"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.",
|
"task": "Center the flex items vertically along the cross axis.",
|
||||||
"previewHTML": "<div class='flex-container'><div class='box tall'>1</div><div class='box'>2</div><div class='box short'>3</div></div>",
|
"previewHTML": "<div class='flex-container'><div class='box tall'>1</div><div class='box'>2</div><div class='box short'>3</div></div>",
|
||||||
"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; }",
|
"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; }",
|
"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",
|
"codePrefix": "/* Center the items vertically */\n.flex-container {\n /* Add your code below */\n",
|
||||||
"initialCode": "",
|
"initialCode": "",
|
||||||
"codeSuffix": "\n}",
|
"codeSuffix": "\n}",
|
||||||
"previewContainer": "preview-area",
|
"previewContainer": "preview-area",
|
||||||
"validations": [
|
"validations": [
|
||||||
{
|
{
|
||||||
"type": "contains",
|
"type": "contains",
|
||||||
"value": "align-items",
|
"value": "align-items",
|
||||||
"message": "Use the 'align-items' property",
|
"message": "Use the 'align-items' property",
|
||||||
"options": {
|
"options": {
|
||||||
"caseSensitive": false
|
"caseSensitive": false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "property_value",
|
"type": "property_value",
|
||||||
"value": {
|
"value": {
|
||||||
"property": "align-items",
|
"property": "align-items",
|
||||||
"expected": "center"
|
"expected": "center"
|
||||||
},
|
},
|
||||||
"message": "Set align-items to 'center'",
|
"message": "Set align-items to 'center'",
|
||||||
"options": {
|
"options": {
|
||||||
"exact": true
|
"exact": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "flexbox-5",
|
"id": "flexbox-5",
|
||||||
"title": "Flex Item Properties",
|
"title": "Flex Item Properties",
|
||||||
"description": "Control how individual flex items grow, shrink, and establish their base size.",
|
"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.",
|
"task": "Make the second box grow twice as much as the others and prevent the third box from shrinking.",
|
||||||
"previewHTML": "<div class='flex-container'><div class='box box1'>1</div><div class='box box2'>2</div><div class='box box3'>3</div></div>",
|
"previewHTML": "<div class='flex-container'><div class='box box1'>1</div><div class='box box2'>2</div><div class='box box3'>3</div></div>",
|
||||||
"previewBaseCSS": "body { font-family: system-ui, -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; }",
|
"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%; }",
|
"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",
|
"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}",
|
"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": "",
|
"codeSuffix": "",
|
||||||
"previewContainer": "preview-area",
|
"previewContainer": "preview-area",
|
||||||
"validations": [
|
"validations": [
|
||||||
{
|
{
|
||||||
"type": "contains",
|
"type": "contains",
|
||||||
"value": ".box2",
|
"value": ".box2",
|
||||||
"message": "Style the '.box2' element",
|
"message": "Style the '.box2' element",
|
||||||
"options": {
|
"options": {
|
||||||
"caseSensitive": false
|
"caseSensitive": false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "contains",
|
"type": "contains",
|
||||||
"value": ".box3",
|
"value": ".box3",
|
||||||
"message": "Style the '.box3' element",
|
"message": "Style the '.box3' element",
|
||||||
"options": {
|
"options": {
|
||||||
"caseSensitive": false
|
"caseSensitive": false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "regex",
|
"type": "regex",
|
||||||
"value": ".box2\\s*{[^}]*flex:\\s*2",
|
"value": ".box2\\s*{[^}]*flex:\\s*2",
|
||||||
"message": "Set flex to '2' for box2",
|
"message": "Set flex to '2' for box2",
|
||||||
"options": {
|
"options": {
|
||||||
"caseSensitive": false
|
"caseSensitive": false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "regex",
|
"type": "regex",
|
||||||
"value": ".box3\\s*{[^}]*flex-shrink:\\s*0",
|
"value": ".box3\\s*{[^}]*flex-shrink:\\s*0",
|
||||||
"message": "Set flex-shrink to '0' for box3",
|
"message": "Set flex-shrink to '0' for box3",
|
||||||
"options": {
|
"options": {
|
||||||
"caseSensitive": false
|
"caseSensitive": false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "flexbox-6",
|
"id": "flexbox-6",
|
||||||
"title": "Aligning Individual Items",
|
"title": "Aligning Individual Items",
|
||||||
"description": "Learn how to override the container's alignment for individual flex 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.",
|
"task": "Set 'align-self' on the middle item to align it to the start of the cross axis.",
|
||||||
"previewHTML": "<div class='flex-container'><div class='box'>1</div><div class='box middle'>2</div><div class='box'>3</div></div>",
|
"previewHTML": "<div class='flex-container'><div class='box'>1</div><div class='box middle'>2</div><div class='box'>3</div></div>",
|
||||||
"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; }",
|
"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; }",
|
"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",
|
"codePrefix": "/* Align the middle item to the start */\n",
|
||||||
"initialCode": "",
|
"initialCode": "",
|
||||||
"codeSuffix": "",
|
"codeSuffix": "",
|
||||||
"previewContainer": "preview-area",
|
"previewContainer": "preview-area",
|
||||||
"validations": [
|
"validations": [
|
||||||
{
|
{
|
||||||
"type": "contains",
|
"type": "contains",
|
||||||
"value": ".middle",
|
"value": ".middle",
|
||||||
"message": "Use the '.middle' class selector",
|
"message": "Use the '.middle' class selector",
|
||||||
"options": {
|
"options": {
|
||||||
"caseSensitive": false
|
"caseSensitive": false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "contains",
|
"type": "contains",
|
||||||
"value": "align-self",
|
"value": "align-self",
|
||||||
"message": "Use the 'align-self' property",
|
"message": "Use the 'align-self' property",
|
||||||
"options": {
|
"options": {
|
||||||
"caseSensitive": false
|
"caseSensitive": false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "property_value",
|
"type": "property_value",
|
||||||
"value": {
|
"value": {
|
||||||
"property": "align-self",
|
"property": "align-self",
|
||||||
"expected": "flex-start"
|
"expected": "flex-start"
|
||||||
},
|
},
|
||||||
"message": "Set align-self to 'flex-start'",
|
"message": "Set align-self to 'flex-start'",
|
||||||
"options": {
|
"options": {
|
||||||
"exact": true
|
"exact": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@@ -1,388 +1,388 @@
|
|||||||
{
|
{
|
||||||
"id": "grid",
|
"id": "grid",
|
||||||
"title": "CSS Grid",
|
"title": "CSS Grid",
|
||||||
"description": "Master the grid layout system for complex two-dimensional layouts",
|
"description": "Master the grid layout system for complex two-dimensional layouts",
|
||||||
"difficulty": "intermediate",
|
"difficulty": "intermediate",
|
||||||
"lessons": [
|
"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": "<div class='grid-container'><div class='item'>1</div><div class='item'>2</div><div class='item'>3</div><div class='item'>4</div><div class='item'>5</div><div class='item'>6</div></div>",
|
|
||||||
"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",
|
"id": "grid-1",
|
||||||
"value": ".grid-container",
|
"title": "Grid Container Basics",
|
||||||
"message": "Use the '.grid-container' class selector",
|
"description": "Learn how to create a grid container and define basic grid structures.",
|
||||||
"options": {
|
"task": "Create a grid with 3 columns of equal width and a 1rem gap between grid items.",
|
||||||
"caseSensitive": false
|
"previewHTML": "<div class='grid-container'><div class='item'>1</div><div class='item'>2</div><div class='item'>3</div><div class='item'>4</div><div class='item'>5</div><div class='item'>6</div></div>",
|
||||||
}
|
"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",
|
"id": "grid-2",
|
||||||
"value": "display",
|
"title": "Grid Template Areas",
|
||||||
"message": "Use the 'display' property",
|
"description": "Use named grid areas to create visual layouts that are easy to understand.",
|
||||||
"options": {
|
"task": "Create a layout with a header, sidebar, main content area, and footer using grid-template-areas.",
|
||||||
"caseSensitive": false
|
"previewHTML": "<div class='grid-layout'><div class='header'>Header</div><div class='sidebar'>Sidebar</div><div class='content'>Main Content</div><div class='footer'>Footer</div></div>",
|
||||||
}
|
"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .grid-layout > div { padding: 1.25rem; color: white; text-align: center; font-weight: bold; } .header { background-color: #e74c3c; } .sidebar { background-color: #3498db; } .content { background-color: #2ecc71; } .footer { background-color: #f39c12; }",
|
||||||
|
"sandboxCSS": ".grid-layout { border: 0.125rem dashed #ccc; padding: 1rem; height: 25rem; }",
|
||||||
|
"codePrefix": "/* Create a layout using grid-template-areas */\n.grid-layout {\n display: grid;\n grid-template-columns: 12rem 1fr;\n grid-template-rows: auto 1fr auto;\n gap: 1rem;\n \n /* Add your grid-template-areas code below */\n",
|
||||||
|
"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",
|
"id": "grid-3",
|
||||||
"value": "grid-template-columns",
|
"title": "Spanning Grid Cells",
|
||||||
"message": "Use the 'grid-template-columns' property",
|
"description": "Make grid items span multiple grid cells horizontally or vertically.",
|
||||||
"options": {
|
"task": "Make the featured item span 2 columns and 2 rows using grid-column and grid-row.",
|
||||||
"caseSensitive": false
|
"previewHTML": "<div class='grid-container'><div class='item'>1</div><div class='item'>2</div><div class='item featured'>Featured</div><div class='item'>4</div><div class='item'>5</div><div class='item'>6</div><div class='item'>7</div><div class='item'>8</div><div class='item'>9</div></div>",
|
||||||
}
|
"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",
|
"id": "grid-4",
|
||||||
"value": "gap",
|
"title": "Automatic Grid Placement",
|
||||||
"message": "Use the 'gap' property",
|
"description": "Learn how to use auto-placement and auto-fit/auto-fill for responsive grid layouts.",
|
||||||
"options": {
|
"task": "Create a responsive grid with auto-fit that has at least 10rem wide columns that fill the available space.",
|
||||||
"caseSensitive": false
|
"previewHTML": "<div class='responsive-grid'><div class='card'>Card 1</div><div class='card'>Card 2</div><div class='card'>Card 3</div><div class='card'>Card 4</div><div class='card'>Card 5</div><div class='card'>Card 6</div></div>",
|
||||||
}
|
"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",
|
"id": "grid-5",
|
||||||
"value": {
|
"title": "Grid Alignment",
|
||||||
"property": "display",
|
"description": "Control the alignment of grid items within their cells on both axes.",
|
||||||
"expected": "grid"
|
"task": "Center the grid items both horizontally and vertically within their grid cells.",
|
||||||
},
|
"previewHTML": "<div class='align-grid'><div class='item'>1</div><div class='item tall'>2</div><div class='item'>3</div><div class='item'>4</div><div class='item'>5</div><div class='item wide'>6</div></div>",
|
||||||
"message": "Set display to 'grid'",
|
"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; }",
|
||||||
"options": {
|
"sandboxCSS": ".align-grid { border: 0.125rem dashed #ccc; padding: 1rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; height: 25rem; }",
|
||||||
"exact": true
|
"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",
|
"id": "grid-6",
|
||||||
"value": "grid-template-columns:\\s*repeat\\(\\s*3\\s*,\\s*1fr\\s*\\)",
|
"title": "Overlapping Grid Items",
|
||||||
"message": "Set grid-template-columns to 'repeat(3, 1fr)'",
|
"description": "Learn how to create overlapping layouts by using grid positioning and z-index.",
|
||||||
"options": {
|
"task": "Position the overlay element to cover the entire grid area and use z-index to place it above other items.",
|
||||||
"caseSensitive": false
|
"previewHTML": "<div class='overlap-grid'><div class='base'>Base Content</div><div class='overlay'>Overlay</div></div>",
|
||||||
}
|
"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .overlap-grid { position: relative; height: 15rem; } .base { background-color: #3498db; color: white; padding: 1.25rem; display: flex; align-items: center; justify-content: center; font-weight: bold; } .overlay { background-color: rgba(231, 76, 60, 0.7); color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.5rem; }",
|
||||||
},
|
"sandboxCSS": ".overlap-grid { border: 0.125rem dashed #ccc; padding: 1rem; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; }",
|
||||||
{
|
"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",
|
||||||
"type": "property_value",
|
"initialCode": "",
|
||||||
"value": {
|
"codeSuffix": "\n}",
|
||||||
"property": "gap",
|
"previewContainer": "preview-area",
|
||||||
"expected": "1rem"
|
"validations": [
|
||||||
},
|
{
|
||||||
"message": "Set gap to '1rem'",
|
"type": "contains",
|
||||||
"options": {
|
"value": "grid-column",
|
||||||
"exact": true
|
"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": "<div class='grid-layout'><div class='header'>Header</div><div class='sidebar'>Sidebar</div><div class='content'>Main Content</div><div class='footer'>Footer</div></div>",
|
|
||||||
"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .grid-layout > div { padding: 1.25rem; color: white; text-align: center; font-weight: bold; } .header { background-color: #e74c3c; } .sidebar { background-color: #3498db; } .content { background-color: #2ecc71; } .footer { background-color: #f39c12; }",
|
|
||||||
"sandboxCSS": ".grid-layout { border: 0.125rem dashed #ccc; padding: 1rem; height: 25rem; }",
|
|
||||||
"codePrefix": "/* Create a layout using grid-template-areas */\n.grid-layout {\n display: grid;\n grid-template-columns: 12rem 1fr;\n grid-template-rows: auto 1fr auto;\n gap: 1rem;\n \n /* Add your grid-template-areas code below */\n",
|
|
||||||
"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": "<div class='grid-container'><div class='item'>1</div><div class='item'>2</div><div class='item featured'>Featured</div><div class='item'>4</div><div class='item'>5</div><div class='item'>6</div><div class='item'>7</div><div class='item'>8</div><div class='item'>9</div></div>",
|
|
||||||
"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": "<div class='responsive-grid'><div class='card'>Card 1</div><div class='card'>Card 2</div><div class='card'>Card 3</div><div class='card'>Card 4</div><div class='card'>Card 5</div><div class='card'>Card 6</div></div>",
|
|
||||||
"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": "<div class='align-grid'><div class='item'>1</div><div class='item tall'>2</div><div class='item'>3</div><div class='item'>4</div><div class='item'>5</div><div class='item wide'>6</div></div>",
|
|
||||||
"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": "<div class='overlap-grid'><div class='base'>Base Content</div><div class='overlay'>Overlay</div></div>",
|
|
||||||
"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .overlap-grid { position: relative; height: 15rem; } .base { background-color: #3498db; color: white; padding: 1.25rem; display: flex; align-items: center; justify-content: center; font-weight: bold; } .overlay { background-color: rgba(231, 76, 60, 0.7); color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.5rem; }",
|
|
||||||
"sandboxCSS": ".overlap-grid { border: 0.125rem dashed #ccc; padding: 1rem; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; }",
|
|
||||||
"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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
@@ -1,143 +1,143 @@
|
|||||||
{
|
{
|
||||||
"id": "tailwindcss-basics",
|
"id": "tailwindcss-basics",
|
||||||
"title": "Tailwind CSS Basics",
|
"title": "Tailwind CSS Basics",
|
||||||
"description": "Learn how to use Tailwind CSS utility classes to quickly style your HTML elements",
|
"description": "Learn how to use Tailwind CSS utility classes to quickly style your HTML elements",
|
||||||
"difficulty": "beginner",
|
"difficulty": "beginner",
|
||||||
"lessons": [
|
"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": "<h1 class='heading'>Welcome to Tailwind</h1><p class='description'>Tailwind makes styling easy.</p>",
|
|
||||||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1.25rem; }",
|
|
||||||
"sandboxCSS": "",
|
|
||||||
"codePrefix": "<!-- Add Tailwind classes to these elements -->\n<h1 class=\"heading",
|
|
||||||
"initialCode": "\">Welcome to Tailwind</h1>\n<p class=\"description\">Tailwind makes styling easy.</p>",
|
|
||||||
"codeSuffix": "",
|
|
||||||
"previewContainer": "preview-area",
|
|
||||||
"validations": [
|
|
||||||
{
|
{
|
||||||
"type": "contains",
|
"id": "tw-1",
|
||||||
"value": "font-bold",
|
"title": "Text and Font Weight",
|
||||||
"message": "Add 'font-bold' to the heading"
|
"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": "<h1 class='heading'>Welcome to Tailwind</h1><p class='description'>Tailwind makes styling easy.</p>",
|
||||||
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1.25rem; }",
|
||||||
|
"sandboxCSS": "",
|
||||||
|
"codePrefix": "<!-- Add Tailwind classes to these elements -->\n<h1 class=\"heading",
|
||||||
|
"initialCode": "\">Welcome to Tailwind</h1>\n<p class=\"description\">Tailwind makes styling easy.</p>",
|
||||||
|
"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",
|
"id": "tw-2",
|
||||||
"value": "text-gray-600",
|
"title": "Background Colors",
|
||||||
"message": "Add 'text-gray-600' to the paragraph"
|
"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": "<div class='alert'>Error: Something went wrong!</div>",
|
||||||
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1.25rem; } .alert { padding: 1rem; border-radius: 0.5rem; }",
|
||||||
|
"sandboxCSS": "",
|
||||||
|
"codePrefix": "<div class=\"alert",
|
||||||
|
"initialCode": "\">Error: Something went wrong!</div>",
|
||||||
|
"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": "<button class='btn'>Accept</button><button class='btn'>Decline</button>",
|
||||||
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1.25rem; } .btn { background-color: #3498db; color: white; border-radius: 0.375rem; }",
|
||||||
|
"sandboxCSS": "",
|
||||||
|
"codePrefix": "<button class=\"btn",
|
||||||
|
"initialCode": "\">Accept</button>\n<button class=\"btn\">Decline</button>",
|
||||||
|
"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": "<button class='action'>Hover me!</button>",
|
||||||
|
"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": "<button class=\"action",
|
||||||
|
"initialCode": "\">Hover me!</button>",
|
||||||
|
"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": "<div class='card'>This is a card component.</div>",
|
||||||
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1.25rem; background-color: #f3f4f6; }",
|
||||||
|
"sandboxCSS": "",
|
||||||
|
"codePrefix": "<div class=\"card",
|
||||||
|
"initialCode": "\">This is a card component.</div>",
|
||||||
|
"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": "<div class='alert'>Error: Something went wrong!</div>",
|
|
||||||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1.25rem; } .alert { padding: 1rem; border-radius: 0.5rem; }",
|
|
||||||
"sandboxCSS": "",
|
|
||||||
"codePrefix": "<div class=\"alert",
|
|
||||||
"initialCode": "\">Error: Something went wrong!</div>",
|
|
||||||
"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": "<button class='btn'>Accept</button><button class='btn'>Decline</button>",
|
|
||||||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1.25rem; } .btn { background-color: #3498db; color: white; border-radius: 0.375rem; }",
|
|
||||||
"sandboxCSS": "",
|
|
||||||
"codePrefix": "<button class=\"btn",
|
|
||||||
"initialCode": "\">Accept</button>\n<button class=\"btn\">Decline</button>",
|
|
||||||
"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": "<button class='action'>Hover me!</button>",
|
|
||||||
"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": "<button class=\"action",
|
|
||||||
"initialCode": "\">Hover me!</button>",
|
|
||||||
"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": "<div class='card'>This is a card component.</div>",
|
|
||||||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1.25rem; background-color: #f3f4f6; }",
|
|
||||||
"sandboxCSS": "",
|
|
||||||
"codePrefix": "<div class=\"card",
|
|
||||||
"initialCode": "\">This is a card component.</div>",
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user