{ "id": "basics", "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": "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": "/* Complete the CSS rule by adding a semicolon */\n.target {\n color: blue", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", "validations": [ { "type": "contains", "value": ";", "message": "Make sure to add a semicolon after the color value", "options": { "caseSensitive": true } } ] }, { "id": "basics-2", "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 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": "property_value", "value": { "property": "padding", "expected": "1.25rem" }, "message": "Set the padding to '1.25rem'", "options": { "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 } }, { "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-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": "/* Set the background color using a hexadecimal value */\n.colorbox {\n /* Add your code below */\n ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", "validations": [ { "type": "contains", "value": "background-color", "message": "Use the 'background-color' property", "options": { "caseSensitive": false } }, { "type": "property_value", "value": { "property": "background-color", "expected": "#e0f7fa" }, "message": "Set the background-color to '#e0f7fa'", "options": { "exact": true } } ] }, { "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": "/* Set the font family */\n.heading {\n /* Add your code below */\n ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", "validations": [ { "type": "contains", "value": "font-family", "message": "Use the 'font-family' property", "options": { "caseSensitive": false } }, { "type": "regex", "value": "font-family:\\s*Georgia,\\s*serif", "message": "Set the font-family to 'Georgia, serif'", "options": { "caseSensitive": false } } ] }, { "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": "/* Set the width using a percentage unit */\n.responsive-box {\n /* Add your code below */\n ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", "validations": [ { "type": "contains", "value": "width", "message": "Use the 'width' property", "options": { "caseSensitive": false } }, { "type": "property_value", "value": { "property": "width", "expected": "80%" }, "message": "Set the width to '80%'", "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": "contains", "value": "#6200ee", "message": "Set the variable value to '#6200ee'", "options": { "caseSensitive": false } } ] } ] }