refactor: simplify compound class names in lessons
- German flexbox: .flex-container → .wrap - 00-basics: .responsive-element → .box, .flex-container → .wrap
This commit is contained in:
@@ -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",
|
||||
|
||||
@@ -9,11 +9,11 @@
|
||||
"id": "flexbox-1",
|
||||
"title": "Flexbox Container Grundlagen",
|
||||
"description": "Lerne, wie du einen Flex-Container erstellst und die Haupt- und Querachse verstehst.",
|
||||
"task": "Füge <code>display: flex</code> zu <code>.flex-container</code> hinzu, um ein Flexbox-Layout zu erstellen.",
|
||||
"task": "Füge <code>display: flex</code> zu <code>.wrap</code> hinzu, um ein Flexbox-Layout zu erstellen.",
|
||||
"previewHTML": "<div class='flex-container'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div></div>",
|
||||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; }",
|
||||
"sandboxCSS": ".flex-container { border: 2px dashed #aaa; padding: 1rem; }",
|
||||
"codePrefix": ".flex-container {\n ",
|
||||
"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; }",
|
||||
"codePrefix": ".wrap {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "\n}",
|
||||
"previewContainer": "preview-area",
|
||||
@@ -29,11 +29,11 @@
|
||||
"id": "flexbox-2",
|
||||
"title": "Flex-Richtung und Umbruch",
|
||||
"description": "Steuere die Richtung und den Umbruch von Flex-Elementen innerhalb eines Containers.",
|
||||
"task": "Füge <code>flex-direction: column</code> und <code>flex-wrap: wrap</code> zu <code>.flex-container</code> hinzu.",
|
||||
"task": "Füge <code>flex-direction: column</code> und <code>flex-wrap: wrap</code> zu <code>.wrap</code> hinzu.",
|
||||
"previewHTML": "<div class='flex-container'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div><div class='box'>4</div><div class='box'>5</div></div>",
|
||||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; }",
|
||||
"sandboxCSS": ".flex-container { border: 2px dashed #aaa; padding: 1rem; height: 16rem; display: flex; }",
|
||||
"codePrefix": ".flex-container {\n ",
|
||||
"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; height: 16rem; display: flex; }",
|
||||
"codePrefix": ".wrap {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "\n}",
|
||||
"previewContainer": "preview-area",
|
||||
@@ -54,11 +54,11 @@
|
||||
"id": "flexbox-3",
|
||||
"title": "Justify Content",
|
||||
"description": "Lerne, wie du Flex-Elemente entlang der Hauptachse des Containers ausrichtest.",
|
||||
"task": "Füge <code>justify-content: space-between</code> zu <code>.flex-container</code> hinzu, um die Boxen gleichmäßig zu verteilen.",
|
||||
"task": "Füge <code>justify-content: space-between</code> zu <code>.wrap</code> hinzu, um die Boxen gleichmäßig zu verteilen.",
|
||||
"previewHTML": "<div class='flex-container'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div></div>",
|
||||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; }",
|
||||
"sandboxCSS": ".flex-container { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
|
||||
"codePrefix": ".flex-container {\n ",
|
||||
"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
|
||||
"codePrefix": ".wrap {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "\n}",
|
||||
"previewContainer": "preview-area",
|
||||
@@ -74,11 +74,11 @@
|
||||
"id": "flexbox-4",
|
||||
"title": "Align Items",
|
||||
"description": "Steuere, wie Flex-Elemente entlang der Querachse des Containers ausgerichtet werden.",
|
||||
"task": "Füge <code>align-items: center</code> zu <code>.flex-container</code> hinzu, um die Boxen vertikal zu zentrieren.",
|
||||
"task": "Füge <code>align-items: center</code> zu <code>.wrap</code> hinzu, um die Boxen vertikal zu zentrieren.",
|
||||
"previewHTML": "<div class='flex-container'><div class='box tall'>1</div><div class='box'>2</div><div class='box short'>3</div></div>",
|
||||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; width: 3rem; display: flex; justify-content: center; } .tall { height: 6rem; } .short { height: 3rem; }",
|
||||
"sandboxCSS": ".flex-container { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 10rem; }",
|
||||
"codePrefix": ".flex-container {\n ",
|
||||
"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 10rem; }",
|
||||
"codePrefix": ".wrap {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "\n}",
|
||||
"previewContainer": "preview-area",
|
||||
@@ -97,7 +97,7 @@
|
||||
"task": "Füge <code>flex: 2</code> zu <code>.box2</code> hinzu, um sie doppelt so breit wachsen zu lassen.",
|
||||
"previewHTML": "<div class='flex-container'><div class='box box1'>1</div><div class='box box2'>2</div><div class='box box3'>3</div></div>",
|
||||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; display: flex; align-items: center; justify-content: center; } .box1 { background: coral; flex: 1; } .box2 { background: mediumseagreen; } .box3 { background: gold; flex: 1; }",
|
||||
"sandboxCSS": ".flex-container { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
|
||||
"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
|
||||
"codePrefix": ".box2 {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "\n}",
|
||||
@@ -117,7 +117,7 @@
|
||||
"task": "Füge <code>align-self: flex-start</code> zu <code>.middle</code> hinzu, um es nach oben zu verschieben.",
|
||||
"previewHTML": "<div class='flex-container'><div class='box'>1</div><div class='box middle'>2</div><div class='box'>3</div></div>",
|
||||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; } .middle { background: mediumseagreen; }",
|
||||
"sandboxCSS": ".flex-container { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 12rem; align-items: center; }",
|
||||
"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 12rem; align-items: center; }",
|
||||
"codePrefix": ".middle {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "\n}",
|
||||
|
||||
Reference in New Issue
Block a user