init project
This commit is contained in:
Michael Czechowski
296
src/lessons/configs/basics.json
Normal file
296
src/lessons/configs/basics.json
Normal file
@@ -0,0 +1,296 @@
|
||||
{
|
||||
"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": "<p class='target'>This paragraph needs to be blue!</p><p>This paragraph should remain unchanged.</p>",
|
||||
"previewBaseCSS": "body { font-family: sans-serif; padding: 20px; }",
|
||||
"sandboxCSS": ".target { outline: 2px dashed #ccc; padding: 10px; }",
|
||||
"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
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "basics-2",
|
||||
"title": "Box Model Basics",
|
||||
"description": "The CSS box model is a fundamental concept that describes how elements are sized and spaced on a page.",
|
||||
"task": "Add padding of 20px and a 2px solid border with color #333 to the box element.",
|
||||
"previewHTML": "<div class='box'>This box needs padding and a border!</div>",
|
||||
"previewBaseCSS": "body { font-family: sans-serif; padding: 20px; } .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": "20px"
|
||||
},
|
||||
"message": "Set the padding to '20px'",
|
||||
"options": {
|
||||
"exact": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "regex",
|
||||
"value": "border:\\s*2px\\s+solid\\s+#333",
|
||||
"message": "Set the border to '2px 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: sans-serif; padding: 20px; } .colorbox { padding: 25px; text-align: center; font-weight: bold; font-size: 18px; }",
|
||||
"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 24px, and add text-shadow of 1px 1px 2px #aaa.",
|
||||
"previewHTML": "<h2 class='heading'>Style This Heading Text</h2>",
|
||||
"previewBaseCSS": "body { font-family: sans-serif; padding: 20px; }",
|
||||
"sandboxCSS": ".heading { border-bottom: 1px solid #ddd; padding-bottom: 10px; }",
|
||||
"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*1px\\s+1px\\s+2px\\s+#aaa",
|
||||
"message": "Set the text-shadow to '1px 1px 2px #aaa'",
|
||||
"options": {
|
||||
"caseSensitive": false
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "basics-5",
|
||||
"title": "CSS Units",
|
||||
"description": "Learn about different CSS units like pixels, percentages, em, rem, and when to use each.",
|
||||
"task": "Set the width of the box to 80%, the max-width to 600px, and the font-size to 1.2rem.",
|
||||
"previewHTML": "<div class='units-box'>This box needs sizing with different units.</div>",
|
||||
"previewBaseCSS": "body { font-family: sans-serif; padding: 20px; } .units-box { background-color: #f5f5f5; padding: 15px; border: 1px solid #ddd; }",
|
||||
"sandboxCSS": "",
|
||||
"codePrefix": "/* Style the box using different units */\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": "font-size",
|
||||
"message": "Use the 'font-size' property",
|
||||
"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": "600px"
|
||||
},
|
||||
"message": "Set the max-width to '600px'",
|
||||
"options": {
|
||||
"exact": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "property_value",
|
||||
"value": {
|
||||
"property": "font-size",
|
||||
"expected": "1.2rem"
|
||||
},
|
||||
"message": "Set the font-size to '1.2rem'",
|
||||
"options": {
|
||||
"exact": true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user