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

refactor: simplify compound class names in lessons

Browse Source 
- German flexbox: .flex-container → .wrap
- 00-basics: .responsive-element → .box, .flex-container → .wrap
This commit is contained in:
Michael Czechowski
2025-12-30 20:21:09 +01:00
parent db5c7980d6
commit fb76db1a21
2 changed files with 20 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
lessons/00-basics.json
View File

@@ -339,10 +339,10 @@
"title": "Units",
"description": "CSS offers various measurement units, categorized as either relative or absolute. Relative units (like %, em, rem, vh, vw) scale based on other factors and are essential for responsive design. For instance, 'rem' units scale relative to the root element's font size, while '%' units are proportional to parent element dimensions. Absolute units (like px, pt, cm, in) maintain fixed dimensions regardless of context. Modern web development favors relative units for their adaptability across different screen sizes and user preferences, especially for accessible design.",
"task": "Set the width of the responsive element to '80%' of its parent container and its font-size to '18px'. Percentage width enables the element to adapt to different screen sizes, while pixel units provide precise control for font sizes.",
"previewHTML": "<div class='container'><div class='responsive-element'>This element should have responsive width and font size.</div></div>",
"previewBaseCSS": "body { font-family: Arial, sans-serif; padding: 20px; line-height: 1.6; } .container { background-color: #f0f0f0; padding: 15px; width: 100%; } .responsive-element { background-color: #bbdefb; padding: 15px; }",
"previewHTML": "<div class='outer'><div class='box'>This element should have responsive width and font size.</div></div>",
"previewBaseCSS": "body { font-family: Arial, sans-serif; padding: 20px; line-height: 1.6; } .outer { background-color: #f0f0f0; padding: 15px; width: 100%; } .box { background-color: #bbdefb; padding: 15px; }",
"sandboxCSS": "",
"codePrefix": "/* Set width using percentage and font-size using pixels */\n.responsive-element {\n /* Add your code below */\n ",
"codePrefix": "/* Set width using percentage and font-size using pixels */\n.box {\n /* Add your code below */\n ",
"initialCode": "",
"codeSuffix": "\n}",
"previewContainer": "preview-area",
@@ -449,10 +449,10 @@
"title": "Flex Basics",
"description": "Flexbox is a powerful layout model that makes it easier to design flexible responsive layouts. It consists of flex containers and flex items. The container is the parent element with 'display: flex' or 'display: inline-flex' set, while items are the direct children within. Flexbox provides properties for controlling direction, alignment, order, and proportions of items. With flexbox, complex layouts that would require tricky positioning and floats can be achieved with much cleaner and more maintainable code.",
"task": "Create a basic flexbox container by adding 'display: flex' to the parent element. Then set flex-direction to 'row' to make the items display horizontally (this is the default behavior, but it's good to specify it explicitly).",
"previewHTML": "<div class='flex-container'><div class='flex-item'>Item 1</div><div class='flex-item'>Item 2</div><div class='flex-item'>Item 3</div></div>",
"previewBaseCSS": "body { font-family: Arial, sans-serif; padding: 20px; line-height: 1.6; } .flex-item { background-color: #2196f3; color: white; padding: 15px; margin: 5px; }",
"previewHTML": "<div class='wrap'><div class='item'>Item 1</div><div class='item'>Item 2</div><div class='item'>Item 3</div></div>",
"previewBaseCSS": "body { font-family: Arial, sans-serif; padding: 20px; line-height: 1.6; } .item { background-color: #2196f3; color: white; padding: 15px; margin: 5px; }",
"sandboxCSS": "",
"codePrefix": "/* Create a flexbox container with horizontal items */\n.flex-container {\n /* Add your code below */\n ",
"codePrefix": "/* Create a flexbox container with horizontal items */\n.wrap {\n /* Add your code below */\n ",
"initialCode": "",
"codeSuffix": "\n}",
"previewContainer": "preview-area",