Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m287:learningunits:lu04:aufgaben:flexbox2 [2026/04/01 15:41] – vdemir
+++ de:modul:m287:learningunits:lu04:aufgaben:flexbox2 [2026/05/06 09:13] (aktuell) – vdemir
@@ Zeile 4: / Zeile 4: @@
 ^ Was ^ Beschreibung ^
 | Produkt: | HTML-Seite mit CSS Flexbox |
-| Zeit: | 30 Min. |
+| Zeit: | 40 Min. |
 | Sozialform: | Einzel- oder Partnerarbeit |
 | Arbeitsmittel: | Unterrichtsunterlagen, HTML-Editor, Browser |
@@ Zeile 13: / Zeile 13: @@
 ===== Auftrag =====
-Schauen Sie sich das nachfolgende Video Schritt an, und bauen das gezeigte Beispiel nach. Falls es zu schnell geht, können Sie die betroffene Stelle wiederholen.
+Schauen Sie sich das nachfolgende Video an, und bauen das gezeigte Beispiel, Schritt für Schritt, nach. Falls es zu schnell geht, können Sie die betroffene Stelle anhalten bzw. wiederholen. Als Basis für Ihre Arbeit können Sie gerne die Codevorlagen unten verwenden.
+{{:de:modul:m287:learningunits:lu04:aufgaben:cssflexboxtutorial_english.mp4|Flexbox_Tutorial_English}}
 ===== Codevorlagen =====
@@ Zeile 30: / Zeile 30: @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Flexbox Tutorial!</title>
-    <link rel="stylesheet" href="tutorial.css">
-    <link rel="stylesheet" href="flexbox.css">
+    <link rel="stylesheet" href="styles_vorlage.css">
 </head>
 <body>
-    <div class="behaelter">
+    <div class="flex-container">
-        <div class="kind">Kind 1</div>
+        <div class="box box1">1</div>
-        <div class="kind">Kind 2</div>
+        <div class="box box2">2</div>
-        <div class="kind">Kind 3</div>
+        <div class="box box3">3</div>
-        <div class="kind">Kind 4</div>
+        <div class="box box4">4</div>
-        <div class="kind">Kind 5</div>
+        <div class="box box5">5</div>
     </div>
 </body>
@@ Zeile 45: / Zeile 45: @@
 </code>
-**tutorial.css**
+**styles_vorlage.css**
 <code CSS>
 * {
-    font-family: Arial, Helvetica, sans-serif;
+  margin: 0;
+  padding: 0;
+    box-sizing: border-box;
 }
+body {
-.behaelter {
+    background: #fff;
-    background-color: #ddd;
 }
+.box {
-.kind:nth-child(1) {
+    height: 100px;
-    background-color: red;
+    width: 100px;
-}
+    background-color: skyblue;
+    font-size: 1.5rem;
-.kind:nth-child(2) {
-    background-color: green;
-}
-.kind:nth-child(3) {
-    background-color: blue;
-}
-.kind:nth-child(4) {
-    background-color: yellow;
-}
-.kind:nth-child(5) {
-    background-color: purple;
-}
-</code>
-**flexbox.css**
-<code CSS>
-.behaelter {
-  height: 400px;
-}
-.kind {
-  width: 50px;
-  height: 50px;
 }
 </code>