public/code-crispies
2
1
Fork 0
Code Issues 7 Pull Requests Actions Activity

feat: refine lessons

Browse Source
This commit is contained in:
Michael Czechowski
2025-05-19 20:20:38 +02:00
parent ef15d93673
commit cf650b0842
3 changed files with 28 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lessons/00-basics.json
View File

@@ -8,7 +8,7 @@
{
"id": "css-syntax-structure",
"title": "CSS Syntax: The Building Blocks",
"description": "CSS (Cascading Style Sheets) follows a structured syntax that consists of selectors targeting HTML elements and declaration blocks defining their styling. A declaration block contains one or more declarations separated by semicolons, with each declaration consisting of a property and value pair. This fundamental structure forms the basis of all CSS rules and allows for precise control over web page presentation. Understanding this syntax is critical for effectively implementing any styling on the web.<br><br><pre>/* Element selctor */\np {\n color: orangered;\n /* │ └─── Indicates the value of the expression\n │ \n └─────────── Indicates the property of the expression */\n}</pre>",
"description": "CSS (Cascading Style Sheets) follows a structured syntax that consists of selectors targeting HTML elements and declaration blocks defining their styling. A declaration block contains one or more declarations separated by semicolons, with each declaration consisting of a property and value pair. This fundamental structure forms the basis of all CSS rules and allows for precise control over web page presentation. Understanding this syntax is critical for effectively implementing any styling on the web.<br><br><pre>/* Element selector */\np {\n color: orangered;\n /* │ └─── Indicates the value of the expression\n │ \n └─────────── Indicates the property of the expression */\n}</pre>",
"task": "Complete the CSS rule by providing a valid selector that targets all paragraph elements (p). This selector should apply to every paragraph on the page. Notice how the declaration block is already structured with the property-value pair 'color: blue;'.",
"previewHTML": "<p>This paragraph should be blue.</p><p>This paragraph should also be blue.</p><div>This div element should remain unchanged.</div>",
"previewBaseCSS": "body { font-family: Arial, sans-serif; padding: 20px; line-height: 1.6; }",