====== LU00l - LB2 V2.1 - Inhalt ===== ===== LU01 - Verweise und URL-Aufbau ===== ^# ^Lernziel ^ ^1.1 |Ich kenne die Syntax und seine Bestandteile einer //URL//. | ^1.2 |Ich kann mindestens drei verschiedene //Protokolle// aufzählen, die in einer URL verwendet werden können. | ^1.3 |Ich kenne den unterschied zwischen einer //Referenzierung mit absoluter// und //relativer Pfadangabe//. | ===== LU03 - Box Modell ===== ^# ^Lernziel ^ ^3.1 |Ich kenne den Unterschied zwischen dem //klassischen// und dem //neuen Box-Modell//. | ^3.2 |Ich kann den Vorteil des //neuen Box-Modells// in eigenen Worten angeben. | ^3.3 |Ich kann den Begriff //zusammenfallende Aussenabstände// (vertikale, Collapsing Margins) in eigenen Worten erklären. | ^3.4 |Ich kann den Begriff //zusammenfallende Aussenabstände// (vertikale, Collapsing Margins) berechnen. | ===== LU04 - Display ===== ^# ^Lernziel ^ ^4.1 |Ich kenne die Standardwerte von der Eigenschaft //display// und kann die Unterschied in eigenen Worten erklären. | ^4.2 |Ich kenne den Aufbau eines //Flexbox Layouts// (Container, Items) und deren Eigenschaften. | ^4.3 |Ich kenne den Aufbau eines //Grid Layouts// (Container, Zeilen, Spalten, Zellen). | ^4.4 |Ich verstehe den Unterschied zwischen //Flexbox// und //Grid Layout//. | ^4.5 |Ich kann ein //Flexbox Layout// syntaktisch und semantisch korrekt erstellen. | ===== LU05 - Responsive Webdesign (RWD) ===== ^# ^Lernziel ^ ^5.1 |Ich kann erklären, was Responsive Webdesign ist und warum es heute für professionelle Webentwicklung unverzichtbar ist (inkl. Google Mobile-First-Indexierung). | ^5.2 |Ich kann die Schlüsselelemente des Responsive Webdesigns (flexibles Grid, flexible Medien, Media Queries) benennen und voneinander unterscheiden. | ^5.3 |Ich kann den Begriff Viewport definieren und dessen Bedeutung für die Darstellung einer Webseite auf verschiedenen Endgeräten erläutern. | ^5.4 |Ich kann die aktuell gültigen CSS-Medientypen //(all, screen, print, speech)// aufzählen und deren Verwendungszweck beschreiben. | ^5.5 |Ich kann das media-Attribut im //link//, //media// oder //Tag// korrekt einsetzen, um gerätespezifische Stylesheets (z. B. für Bildschirm und Drucker) einzubinden zu können. | ^5.6 |Ich kann veraltete (deprecated) Medientypen wie //handheld//, //tv// oder //braille// identifizieren und begründen, und begründen warum diese durch moderne CSS3-Media-Queries ersetzt wurden. | ^5.7 |Ich kann den Begriff //Breakpoint// in eigenen Worten erklären und dessen Funktion im Responsive Webdesign beschreiben. | ^5.8 |Ich kann Media Queries mit Breakpoints und //and//-Verknüpfungen syntaktisch und semantisch korrekt erstellen und in HTML-Dokumente einbinden. | ^5.9 |Ich kenne die wichtigsten Medienmerkmale (width, height, orientation, resolution etc.) und deren Bedeutung für Media Queries. | ^5.10 |Ich kann Medienmerkmale mit den Präfixen //min-// und //max-// sowie dem Attribut orientation gezielt in Media Queries einsetzen. | ===== LU06 - Bootstrap ===== ^# ^Lernziel ^ ^6.1 |Ich kenne die zwei Varianten, um Bootstrap in ein HTML-Dokument einzubinden (Download und CDN), und deren jeweilige Vor- und Nachteile. | ^6.2 |Ich kann erklären, wofür die -Attribute //integrity// und //crossorigin// beim Einbinden von Bootstrap verwendet werden. | ^6.3 |Ich kann erklären was //.container// oder //.container-fluid// sind und wann ich diese einsetze und welchem HTML-Element ich die Container-Klasse sinnvoll zuordne. | ^6.4 |Ich kenne den Unterschied zwischen //.container// und //.container-fluid// sowie das 12-Spalten-Raster von Bootstrap. | ^6.5 |Ich kann ein responsives Spaltenlayout mit den Bootstrap-Klassen //container//, //row// und // col-// syntaktisch und semantisch korrekt erstellen. |