diff --git a/lessons/00-basics.json b/lessons/00-basics.json index c6f1ab6..e9a1544 100644 --- a/lessons/00-basics.json +++ b/lessons/00-basics.json @@ -1,60 +1,64 @@ { "id": "basics", - "title": "CSS Basics", - "description": "Learn the fundamental concepts of CSS styling", + "title": "CSS Fundamentals", + "description": "Establish a solid foundation in Cascading Style Sheets (CSS), the language used to control the presentation and layout of web documents. This module introduces core concepts that form the basis of modern web 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'.", + "title": "CSS Syntax Structure", + "description": "CSS consists of selectors that target HTML elements and declaration blocks that specify how those elements should be styled. Understanding this fundamental syntax structure is essential for all CSS development.", + "task": "Complete the CSS rule by adding a semicolon after the color property value. Every CSS declaration must end with a semicolon to separate it from the next declaration.", "previewHTML": "

This paragraph needs to be blue!

This paragraph should remain unchanged.

", "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; }", "sandboxCSS": ".target { outline: 0.125rem dashed #ccc; padding: 0.625rem; }", - "codePrefix": "/* Style the paragraph with class 'target' */\n", + "codePrefix": "/* Complete the CSS rule by adding a semicolon */\n.target {\n color: blue", "initialCode": "", - "codeSuffix": "", + "codeSuffix": "\n}", "previewContainer": "preview-area", "validations": [ { "type": "contains", - "value": ".target", - "message": "Make sure to use the '.target' class selector", + "value": ";", + "message": "Make sure to add a semicolon after the color value", "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 + "caseSensitive": true } } ] }, { "id": "basics-2", - "title": "Box Model Basics", - "description": "The CSS box model is a fundamental concept that describes how elements are sized and spaced on a page.", - "task": "Add padding of 1.25rem and a 0.125rem solid border with color #333 to the box element.", - "previewHTML": "
This box needs padding and a border!
", - "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .box { background-color: #f0f0f0; }", + "title": "CSS Selectors: Classes", + "description": "Class selectors allow you to target specific HTML elements that share the same class attribute. Classes are denoted by a dot (.) followed by the class name and are one of the most frequently used selectors in CSS.", + "task": "Write a class selector to target elements with the class 'highlight'. Then, set their text color to 'crimson'. Begin with the dot (.) followed by the class name.", + "previewHTML": "

This text should be crimson.

This text remains unchanged.

", + "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; }", + "sandboxCSS": ".highlight { background-color: #fffacd; padding: 0.3125rem; }", + "codePrefix": "/* Write a class selector to target elements with the class 'highlight' */\n", + "initialCode": "", + "codeSuffix": " {\n color: crimson;\n}", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains", + "value": ".highlight", + "message": "Make sure to use the '.highlight' class selector", + "options": { + "caseSensitive": false + } + } + ] + }, + { + "id": "basics-3", + "title": "Box Model: Adding Padding", + "description": "The CSS box model consists of content, padding, border, and margin areas. Padding creates space between an element's content and its border, improving visual appearance and readability.", + "task": "Add padding to the box element. Set the padding to '1.25rem' to create space between the content and the element's edges.", + "previewHTML": "
This box needs padding!
", + "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .box { background-color: #f0f0f0; border: 0.0625rem solid #ddd; }", "sandboxCSS": "", - "codePrefix": "/* Add padding and border to the box */\n.box {\n /* Add your code below */\n", + "codePrefix": "/* Add padding to the box */\n.box {\n /* Add your code below */\n ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", @@ -67,14 +71,6 @@ "caseSensitive": false } }, - { - "type": "contains", - "value": "border", - "message": "Use the 'border' property", - "options": { - "caseSensitive": false - } - }, { "type": "property_value", "value": { @@ -83,7 +79,30 @@ }, "message": "Set the padding to '1.25rem'", "options": { - "exact": false + "exact": true + } + } + ] + }, + { + "id": "basics-4", + "title": "Box Model: Adding Borders", + "description": "Borders define the perimeter of an element, separating it visually from surrounding content. CSS offers precise control over border thickness, style, and color.", + "task": "Add a border to the element. Set the border property to '0.125rem solid #333' to create a thin, solid dark border around the box.", + "previewHTML": "
This box needs a border!
", + "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .bordered-box { background-color: #f8f8f8; padding: 1rem; }", + "sandboxCSS": "", + "codePrefix": "/* Add a border to the box */\n.bordered-box {\n /* Add your code below */\n ", + "initialCode": "", + "codeSuffix": "\n}", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains", + "value": "border", + "message": "Use the 'border' property", + "options": { + "caseSensitive": false } }, { @@ -97,26 +116,18 @@ ] }, { - "id": "basics-3", - "title": "Colors and Backgrounds", - "description": "Learn how to apply background colors and control text coloring in different ways.", - "task": "Style the element with a background color of #e0f7fa and text color of #01579b.", - "previewHTML": "
This element needs colors!
", - "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .colorbox { padding: 1.5rem; text-align: center; font-weight: bold; font-size: 1.125rem; }", + "id": "basics-5", + "title": "Colors: RGB and Hexadecimal Notation", + "description": "CSS supports various color models, with RGB (Red, Green, Blue) and hexadecimal notation being among the most common. Understanding color representation is essential for creating visually appealing designs.", + "task": "Set the background color of the element to the hexadecimal value '#e0f7fa' (a light cyan). Hexadecimal color values start with a hash symbol (#) followed by 6 characters representing RGB values.", + "previewHTML": "
This element needs a background color!
", + "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .colorbox { padding: 1.5rem; text-align: center; font-weight: bold; }", "sandboxCSS": "", - "codePrefix": "/* Style the colorbox with background and text colors */\n", + "codePrefix": "/* Set the background color using a hexadecimal value */\n.colorbox {\n /* Add your code below */\n ", "initialCode": "", - "codeSuffix": "", + "codeSuffix": "\n}", "previewContainer": "preview-area", "validations": [ - { - "type": "contains", - "value": ".colorbox", - "message": "Use the '.colorbox' class selector", - "options": { - "caseSensitive": false - } - }, { "type": "contains", "value": "background-color", @@ -125,14 +136,6 @@ "caseSensitive": false } }, - { - "type": "contains", - "value": "color", - "message": "Use the 'color' property", - "options": { - "caseSensitive": false - } - }, { "type": "property_value", "value": { @@ -143,41 +146,22 @@ "options": { "exact": true } - }, - { - "type": "property_value", - "value": { - "property": "color", - "expected": "#01579b" - }, - "message": "Set the text color to '#01579b'", - "options": { - "exact": true - } } ] }, { - "id": "basics-4", - "title": "Typography Basics", - "description": "Learn how to control text appearance with CSS typography properties.", - "task": "Style the heading with font-family 'Georgia, serif', font-size of 1.5rem, and add text-shadow of 0.0625rem 0.0625rem 0.125rem #aaa.", - "previewHTML": "

Style This Heading Text

", + "id": "basics-6", + "title": "Typography: Font Family", + "description": "The font-family property specifies the typeface used for text content. It's best practice to provide a list of fonts (a 'font stack') to ensure compatibility across different operating systems.", + "task": "Set the font family of the heading to 'Georgia, serif'. The comma indicates that 'serif' will be used as a fallback if 'Georgia' is not available on the user's system.", + "previewHTML": "

This heading needs a serif font

", "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", + "codePrefix": "/* Set the font family */\n.heading {\n /* Add your code below */\n ", "initialCode": "", - "codeSuffix": "", + "codeSuffix": "\n}", "previewContainer": "preview-area", "validations": [ - { - "type": "contains", - "value": ".heading", - "message": "Use the '.heading' class selector", - "options": { - "caseSensitive": false - } - }, { "type": "contains", "value": "font-family", @@ -186,26 +170,10 @@ "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'", + "value": "font-family:\\s*Georgia,\\s*serif", + "message": "Set the font-family to 'Georgia, serif'", "options": { "caseSensitive": false } @@ -213,26 +181,18 @@ ] }, { - "id": "basics-5", - "title": "CSS Units and Variables", - "description": "Learn about different CSS units like rem, percentages, em, and how to use CSS variables (custom properties).", - "task": "Set the width of the box to 80%, the max-width to 37.5rem, and create a CSS variable --main-color with the value #6200ee, then use it for the border color.", - "previewHTML": "
This box needs sizing with different units and a border using a CSS variable.
", - "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .units-box { background-color: #f5f5f5; padding: 1rem; border: 0.125rem solid #ddd; }", + "id": "basics-7", + "title": "CSS Units: Relative vs. Absolute", + "description": "CSS offers various measurement units for specifying sizes. Relative units (like rem, em, %) adapt to different screen sizes, while absolute units (like pixels) maintain fixed dimensions regardless of context.", + "task": "Set the width of the box to '80%' of its parent container. Percentage units are relative to the parent element's dimensions and are crucial for responsive design.", + "previewHTML": "
This box should take up 80% width
", + "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .container { background-color: #f5f5f5; padding: 1rem; } .responsive-box { background-color: #e1bee7; padding: 1rem; text-align: center; }", "sandboxCSS": "", - "codePrefix": "/* Style the box using different units and CSS variables */\n:root {\n /* Define your CSS variable here */\n}\n\n", + "codePrefix": "/* Set the width using a percentage unit */\n.responsive-box {\n /* Add your code below */\n ", "initialCode": "", - "codeSuffix": "", + "codeSuffix": "\n}", "previewContainer": "preview-area", "validations": [ - { - "type": "contains", - "value": ".units-box", - "message": "Use the '.units-box' class selector", - "options": { - "caseSensitive": false - } - }, { "type": "contains", "value": "width", @@ -241,30 +201,6 @@ "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": { @@ -275,16 +211,36 @@ "options": { "exact": true } + } + ] + }, + { + "id": "basics-8", + "title": "CSS Variables: Custom Properties", + "description": "CSS variables (custom properties) allow you to store specific values for reuse throughout your stylesheet. They help create consistent designs and make global changes more efficient.", + "task": "Create a CSS variable named '--accent-color' with the value '#6200ee' in the root scope, then use it for the text color of the element.", + "previewHTML": "
This text should use the accent color
", + "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; }", + "sandboxCSS": ".themed-element { padding: 1rem; background-color: #f5f5f5; font-weight: bold; }", + "codePrefix": "/* Define and use a CSS variable */\n:root {\n /* Define your variable here */\n ", + "initialCode": "", + "codeSuffix": "\n}\n\n.themed-element {\n color: var(--accent-color);\n}", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains", + "value": "--accent-color", + "message": "Define the '--accent-color' CSS variable", + "options": { + "caseSensitive": true + } }, { - "type": "property_value", - "value": { - "property": "max-width", - "expected": "37.5rem" - }, - "message": "Set the max-width to '37.5rem'", + "type": "contains", + "value": "#6200ee", + "message": "Set the variable value to '#6200ee'", "options": { - "exact": true + "caseSensitive": false } } ] diff --git a/lessons/01-box-model.json b/lessons/01-box-model.json index 9818eda..fa2f1e4 100644 --- a/lessons/01-box-model.json +++ b/lessons/01-box-model.json @@ -1,49 +1,113 @@ { "id": "box-model", - "title": "CSS Box Model Essentials", - "description": "Understand how CSS calculates sizes and spacing around elements using margin, border, padding, and content areas.", + "title": "CSS Box Model & Layout Principles", + "description": "Master the fundamental principles of space management in web design through the CSS box model. This module explores how content, padding, borders, and margins combine to create layout structures that are both visually appealing and structurally sound.", "difficulty": "beginner", "lessons": [ { "id": "box-model-1", - "title": "Content, Padding, Border, Margin", - "description": "Learn the four layers of the CSS box model and how each affects element dimensions.", - "task": "Create a div with class 'box' and add 1.25rem padding, a 0.125rem solid #333 border, and 1rem margin.", - "previewHTML": "
Box Model Demo
", - "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .box { background-color: #f0f0f0; }", + "title": "Box Model Components", + "description": "The CSS box model consists of four concentric layers that build an element's total dimensions: content area (innermost), padding, border, and margin (outermost). Understanding how these components interact is essential for precise layout control.", + "task": "Add padding of '1.25rem' to the box to create space between its content and border. Padding is the space between an element's content and its border, giving content room to breathe.", + "previewHTML": "
Box Model Components
", + "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1rem; } .box { background-color: #f0f0f0; border: 0.125rem dashed #aaa; }", "sandboxCSS": "", - "codePrefix": "/* Style the box element */\n.box {", + "codePrefix": "/* Add padding to the box element */\n.box {\n /* Add your code below */\n ", "initialCode": "", - "codeSuffix": "}", + "codeSuffix": "\n}", "previewContainer": "preview-area", "validations": [ - { "type": "contains", "value": "padding", "message": "Use the 'padding' property", "options": { "caseSensitive": false } }, - { "type": "property_value", "value": { "property": "padding", "expected": "1.25rem" }, "message": "Padding should be 1.25rem" }, - { "type": "contains", "value": "border", "message": "Use the 'border' property", "options": { "caseSensitive": false } }, { - "type": "regex", - "value": "border:\\s*0.125rem\\s+solid\\s+#333", - "message": "Border should be '0.125rem solid #333'", + "type": "contains", + "value": "padding", + "message": "Use the 'padding' property", "options": { "caseSensitive": false } }, - { "type": "contains", "value": "margin", "message": "Use the 'margin' property", "options": { "caseSensitive": false } }, - { "type": "property_value", "value": { "property": "margin", "expected": "1rem" }, "message": "Margin should be 1rem" } + { + "type": "property_value", + "value": { "property": "padding", "expected": "1.25rem" }, + "message": "Set padding to exactly '1.25rem'" + } ] }, { "id": "box-model-2", - "title": "Box-Sizing Property", - "description": "Discover how box-sizing changes the box model calculation for width and height.", - "task": "Set box-sizing: border-box; on the .box element and note how its width includes padding and border.", - "previewHTML": "
Border-box Demo
", - "previewBaseCSS": "body { font-family: sans-serif; } .box { width: 200px; padding: 1rem; border: 0.125rem solid #333; background: #eef; }", + "title": "Adding Borders", + "description": "Borders outline an element, creating visual separation from surrounding content. CSS allows you to control border thickness, style (solid, dashed, dotted, etc.), and color independently or through shorthand notation.", + "task": "Add a solid border with thickness '0.125rem' and color '#333' to the box element. The border property accepts three values: width, style, and color.", + "previewHTML": "
This box needs a border
", + "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1rem; } .box { background-color: #f0f0f0; padding: 1.25rem; }", "sandboxCSS": "", - "codePrefix": "/* Apply box-sizing */\n.box {", + "codePrefix": "/* Add a border to the box */\n.box {\n /* Add your code below */\n ", "initialCode": "", - "codeSuffix": "}", + "codeSuffix": "\n}", "previewContainer": "preview-area", "validations": [ - { "type": "contains", "value": "box-sizing", "message": "Include the 'box-sizing' property", "options": { "caseSensitive": false } }, + { + "type": "contains", + "value": "border", + "message": "Use the 'border' property", + "options": { "caseSensitive": false } + }, + { + "type": "regex", + "value": "border:\\s*0.125rem\\s+solid\\s+#333", + "message": "Set border to '0.125rem solid #333'", + "options": { "caseSensitive": false } + }, + { + "type": "contains", + "value": "solid", + "message": "Include 'solid' as the border style", + "options": { "caseSensitive": false } + } + ] + }, + { + "id": "box-model-3", + "title": "Adding Margins", + "description": "Margins create space between elements, controlling how they relate to one another within a layout. Unlike padding (which affects internal spacing), margins exist outside the element's border and create separation from adjacent elements.", + "task": "Add margin of '1rem' to the box element to create space between it and surrounding elements. The margin property sets space outside an element's border.", + "previewHTML": "
This box needs margins
Adjacent element
", + "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1rem; } .container { background-color: #f8f8f8; padding: 0.5rem; } .margin-box { background-color: #d1c4e9; padding: 1rem; border: 0.125rem solid #7e57c2; } .neighbor { background-color: #bbdefb; padding: 1rem; border: 0.125rem solid #42a5f5; }", + "sandboxCSS": "", + "codePrefix": "/* Add margin to the box */\n.margin-box {\n /* Add your code below */\n ", + "initialCode": "", + "codeSuffix": "\n}", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains", + "value": "margin", + "message": "Use the 'margin' property", + "options": { "caseSensitive": false } + }, + { + "type": "property_value", + "value": { "property": "margin", "expected": "1rem" }, + "message": "Set margin to '1rem'" + } + ] + }, + { + "id": "box-model-4", + "title": "Box Sizing: Content-Box vs. Border-Box", + "description": "The box-sizing property determines how element dimensions are calculated. The default 'content-box' model excludes padding and border from width/height values, while 'border-box' includes them, making layout calculations more intuitive.", + "task": "Set the box-sizing property to 'border-box' for the element. This makes padding and border included in the element's specified width and height.", + "previewHTML": "
Content-box (default)
Border-box
", + "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1rem; } .sizing-demo { display: flex; gap: 1rem; } .box { width: 200px; padding: 1rem; border: 0.25rem solid #333; background: #f5f5f5; } .content-box { box-sizing: content-box; } .border-box { /* Your code will go here */ }", + "sandboxCSS": "", + "codePrefix": "/* Set box-sizing property */\n.border-box {\n /* Add your code below */\n ", + "initialCode": "", + "codeSuffix": "\n}", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains", + "value": "box-sizing", + "message": "Use the 'box-sizing' property", + "options": { "caseSensitive": false } + }, { "type": "property_value", "value": { "property": "box-sizing", "expected": "border-box" }, @@ -52,45 +116,107 @@ ] }, { - "id": "box-model-3", + "id": "box-model-5", "title": "Margin Collapse", - "description": "Understand how vertical margins can collapse between adjacent elements.", - "task": "Create two stacked divs with class 'box' and 1rem top margin on each. Observe margin collapse.", - "previewHTML": "
First
Second
", - "previewBaseCSS": "body { font-family: sans-serif; } .box { padding: 1rem; background: #ddd; margin-top: 1rem; }", + "description": "An important behavior of the CSS box model is vertical margin collapse: when two vertical margins meet, they don't add up but instead collapse to the larger of the two values. Understanding this behavior is crucial for consistent vertical spacing.", + "task": "Add a bottom margin of '2rem' to the first paragraph. You'll observe that the space between paragraphs equals 2rem (not 3rem), demonstrating margin collapse.", + "previewHTML": "

This paragraph has a bottom margin.

This paragraph has a top margin of 1rem.

", + "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1rem; } .collapse-demo { border: 0.0625rem solid #ddd; padding: 0.5rem; background: #f9f9f9; } .second { margin-top: 1rem; background: #f0f0f0; }", "sandboxCSS": "", - "codePrefix": "", + "codePrefix": "/* Add margin to observe margin collapse */\n.first {\n /* Add your code below */\n ", "initialCode": "", - "codeSuffix": "", - "previewContainer": "preview-area", - "validations": [ - { "type": "contains", "value": "margin-top", "message": "Use 'margin-top' on .box", "options": { "caseSensitive": false } }, - { "type": "property_value", "value": { "property": "margin-top", "expected": "1rem" }, "message": "Top margin should be 1rem" } - ] - }, - { - "id": "box-model-4", - "title": "Using Shorthand Properties", - "description": "Learn to write concise padding and margin using shorthand notation.", - "task": "Refactor separate margin and padding properties into a single shorthand declaration on .box.", - "previewHTML": "
Shorthand Demo
", - "previewBaseCSS": "body { font-family: sans-serif; } .box { background: #fef; }", - "sandboxCSS": "", - "codePrefix": "/* Refactor to shorthand */\n.box {", - "initialCode": "margin: 1rem 0 2rem 0; padding: 0.5rem 1rem 0.5rem 1rem;", - "codeSuffix": "}", + "codeSuffix": "\n}", "previewContainer": "preview-area", "validations": [ { - "type": "regex", - "value": "margin:\\s*1rem\\s+0\\s+2rem\\s+0", - "message": "Use shorthand for margin: 1rem 0 2rem 0", + "type": "contains", + "value": "margin-bottom", + "message": "Use the 'margin-bottom' property", + "options": { "caseSensitive": false } + }, + { + "type": "property_value", + "value": { "property": "margin-bottom", "expected": "2rem" }, + "message": "Set margin-bottom to '2rem'" + } + ] + }, + { + "id": "box-model-6", + "title": "Margin Shorthand Notation", + "description": "CSS offers shorthand notations to concisely set multiple properties at once. The margin shorthand can set all four sides (top, right, bottom, left) with values specified in clockwise order. Understanding shorthand syntax improves coding efficiency.", + "task": "Use margin shorthand syntax to set the top and bottom margins to '1rem' and the left and right margins to '2rem' simultaneously.", + "previewHTML": "
This box needs margins: 1rem top/bottom, 2rem left/right
", + "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1rem; } .container { background-color: #f5f5f5; padding: 0.5rem; } .shorthand-box { background-color: #e8f5e9; border: 0.125rem solid #66bb6a; padding: 1rem; }", + "sandboxCSS": "", + "codePrefix": "/* Use margin shorthand notation */\n.shorthand-box {\n /* Add your code below */\n ", + "initialCode": "", + "codeSuffix": "\n}", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains", + "value": "margin", + "message": "Use the 'margin' property", "options": { "caseSensitive": false } }, { "type": "regex", - "value": "padding:\\s*0.5rem\\s+1rem\\s+0.5rem\\s+1rem", - "message": "Use shorthand for padding: 0.5rem 1rem 0.5rem 1rem", + "value": "margin:\\s*1rem\\s+2rem", + "message": "Use 'margin: 1rem 2rem' to set vertical and horizontal margins", + "options": { "caseSensitive": false } + } + ] + }, + { + "id": "box-model-7", + "title": "Padding Shorthand Notation", + "description": "Similar to margin shorthand, padding shorthand allows setting all four sides of padding concisely. The syntax follows the same clockwise pattern: top, right, bottom, left (or TRouBLe). When fewer values are specified, CSS applies specific rules to determine missing sides.", + "task": "Use padding shorthand notation to set all sides to '1.5rem' in a single declaration. When a single value is provided, it applies to all four sides.", + "previewHTML": "
This box needs equal padding on all sides
", + "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1rem; } .padding-box { background-color: #fff3e0; border: 0.125rem solid #ff9800; }", + "sandboxCSS": "", + "codePrefix": "/* Use padding shorthand notation */\n.padding-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": "property_value", + "value": { "property": "padding", "expected": "1.5rem" }, + "message": "Set padding to '1.5rem' on all sides" + } + ] + }, + { + "id": "box-model-8", + "title": "Border Shorthand and Individual Properties", + "description": "Border properties can be set individually (border-width, border-style, border-color) or using the border shorthand. For even more granular control, you can target specific sides (border-top, border-right, etc.) with their own values.", + "task": "Set only the bottom border of the element to '0.25rem solid #2196f3'. Use the specific border-bottom property rather than the general border property.", + "previewHTML": "
This element needs only a bottom border
", + "previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1rem; } .border-demo { padding: 1rem; background-color: #e3f2fd; }", + "sandboxCSS": "", + "codePrefix": "/* Add a bottom border only */\n.border-demo {\n /* Add your code below */\n ", + "initialCode": "", + "codeSuffix": "\n}", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains", + "value": "border-bottom", + "message": "Use the 'border-bottom' property", + "options": { "caseSensitive": false } + }, + { + "type": "regex", + "value": "border-bottom:\\s*0.25rem\\s+solid\\s+#2196f3", + "message": "Set border-bottom to '0.25rem solid #2196f3'", "options": { "caseSensitive": false } } ]