Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
| Beide Seiten der vorigen Revision Vorhergehende Überarbeitung | |||
| de:modul:m287:learningunits:lu00:12 [2026/06/05 12:33] – [LU05 - Responsive Webdesign (RWD)] vdemir | de:modul:m287:learningunits:lu00:12 [2026/06/05 12:36] (aktuell) – vdemir | ||
|---|---|---|---|
| Zeile 15: | Zeile 15: | ||
| ^# ^Stufe ^Lernziel ^ | ^# ^Stufe ^Lernziel ^ | ||
| ^2.1 ^Unterscheiden |Ich kenne den Unterschied zwischen dem klassischen und dem neuen Box-Modell. | ^2.1 ^Unterscheiden |Ich kenne den Unterschied zwischen dem klassischen und dem neuen Box-Modell. | ||
| - | ^2.1 ^Erklären |Ich kann den Vorteil des neuen Box-Modells in eigenen Worten angeben. | | + | ^2.1 ^Erklären |
| - | ^2.1 ^Erklären |Ich kann Inhalte (Content) in Boxen syntaktisch (Aufbau) und semantisch (Bedeutung) korrekt mit dem klassischen und dem neuen Box-Modell erstellen und strukturieren. | | + | ^2.1 ^Erklären |
| - | ^2.1 ^Anwenden |Ich kann Inhalte (Content) in Boxen in der ausführlichen und in der kurzen Schreibweise lesen, verstehen, strukturieren und gestalten. | | + | ^2.1 ^Anwenden |
| - | ^2.1 ^Erstellen |Ich kann den Begriff zusammenfallende (vertikale) Aussenabstände (Collapsing Margins) in eigenen Worten erklären. | | + | ^2.1 ^Erstellen |
| ==== LU04 - Display ==== | ==== LU04 - Display ==== | ||
| ^# ^Stufe ^Lernziel ^ | ^# ^Stufe ^Lernziel ^ | ||
| - | ^4.1 ^Kennen |Ich kenne die Standardwerte von der Eigenschaft //display// und kann die Unterschied in eigenen Worten erklären. | | + | ^4.1 ^Kennen |
| - | ^4.2 ^Kennen |Ich kenne den Aufbau eines Flexbox Layouts (Container, Items) und deren Eigenschaften. | | + | ^4.2 ^Kennen |
| - | ^4.3 ^Kennen | Ich kenne den Aufbau eines Grid Layouts (Container, Zeilen, Spalten, Zellen). | | + | ^4.3 ^Kennen |
| ^4.4 ^Unterscheiden |Ich kann die Standardwerte der Eigenschaft display unterscheiden und den Unterschied in eigenen Worten erklären. | | ^4.4 ^Unterscheiden |Ich kann die Standardwerte der Eigenschaft display unterscheiden und den Unterschied in eigenen Worten erklären. | | ||
| ^4.5 ^Unterscheiden |Ich verstehe den Unterschied zwischen Flexbox und Grid Layout. | | ^4.5 ^Unterscheiden |Ich verstehe den Unterschied zwischen Flexbox und Grid Layout. | | ||
| - | ^4.6 ^Erstellen |Ich kann ein Flexbox Layout syntaktisch und semantisch korrekt erstellen und strukturieren. | | + | ^4.6 ^Erstellen |
| - | ^4.7 ^Erstellen |Ich kann ein Grid Layout syntaktisch und semantisch korrekt erstellen und strukturieren. | | + | ^4.7 ^Erstellen |
| ==== LU05 - Responsive Webdesign (RWD) ==== | ==== LU05 - Responsive Webdesign (RWD) ==== | ||
| ^# ^Stufe ^Lernziel ^ | ^# ^Stufe ^Lernziel ^ | ||
| - | ^5.1 ^Erklären |Ich kann erklären, was Responsive Webdesign ist und warum es heute für professionelle Webentwicklung unverzichtbar ist (inkl. Google Mobile-First-Indexierung). | | + | ^5.1 ^Erklären |
| ^5.2 ^Unterscheiden |Ich kann die Schlüsselelemente des Responsive Webdesigns (flexibles Grid, flexible Medien, Media Queries) benennen und voneinander unterscheiden. | | ^5.2 ^Unterscheiden |Ich kann die Schlüsselelemente des Responsive Webdesigns (flexibles Grid, flexible Medien, Media Queries) benennen und voneinander unterscheiden. | | ||
| - | ^5.3 ^Definieren |Ich kann den Begriff Viewport definieren und dessen Bedeutung für die Darstellung einer Webseite auf verschiedenen Endgeräten erläutern. | | + | ^5.3 ^Definieren |
| - | ^5.4 ^Aufzählen |Ich kann die aktuell gültigen CSS-Medientypen //(all, screen, print, speech)// aufzählen und deren Verwendungszweck beschreiben. | | + | ^5.4 ^Aufzählen |
| - | ^5.5 ^Anwenden |Ich kann das media-Attribut im < | + | ^5.5 ^Anwenden |
| - | ^5.6 ^Beurteilen |Ich kann veraltete (deprecated) Medientypen wie // | + | ^5.6 ^Beurteilen |
| - | ^5.7 ^Kennen |Ich kenne die drei Varianten, um Media Queries in ein HTML-Dokument einzubinden (//< | + | ^5.7 ^Kennen |
| - | ^5.8 ^Beurteilen |Ich kann den Begriff // | + | ^5.8 ^Beurteilen |
| - | ^5.9 ^Beurteilen |Ich kann Media Queries mit Breakpoints und // | + | ^5.9 ^Beurteilen |
| - | ^5.10 ^Kennen |Ich kenne die wichtigsten Medienmerkmale (width, height, orientation, | + | ^5.10 ^Kennen |
| ^5.11 ^Unterscheiden |Ich kann den Unterschied zwischen width/ | ^5.11 ^Unterscheiden |Ich kann den Unterschied zwischen width/ | ||
| - | ^5.12 ^Anwenden |Ich kann Medienmerkmale mit den Präfixen min- und max- sowie dem Attribut orientation gezielt in Media Queries einsetzen. | | + | ^5.12 ^Anwenden |
| Zeile 51: | Zeile 51: | ||
| ^# ^Stufe ^Lernziel ^ | ^# ^Stufe ^Lernziel ^ | ||
| - | ^6.1 ^Kennen |Ich kenne die zwei Varianten, um Bootstrap in ein HTML-Dokument einzubinden (Download und CDN), und deren jeweilige Vor- und Nachteile. | | + | ^6.1 ^Kennen |
| - | ^6.2 ^Erklären |Ich kann erklären, wofür die < | + | ^6.2 ^Erklären |
| - | ^6.3 ^Anwenden |Ich kann Bootstrap korrekt in ein bestehendes HTML-Projekt einbinden und die Auswirkungen auf die Darstellung im Webbrowser beurteilen. | + | ^6.3 ^Anwenden |
| - | ^6.4 ^Kennen |Ich kenne den Unterschied zwischen .container und .container-fluid sowie das 12-Spalten-Raster von Bootstrap. | | + | ^6.4 ^Kennen |
| ^6.5 ^Unterscheiden |Ich kann erklären, wann ich .container oder .container-fluid einsetze und welchem HTML-Element ich die Container-Klasse sinnvoll zuordne. | | ^6.5 ^Unterscheiden |Ich kann erklären, wann ich .container oder .container-fluid einsetze und welchem HTML-Element ich die Container-Klasse sinnvoll zuordne. | | ||
| - | ^6.6 ^Erstellen |Ich kann ein responsives Spaltenlayout mit den Bootstrap-Klassen container, row und col- syntaktisch und semantisch korrekt erstellen. | | + | ^6.6 ^Erstellen |