| # | 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. |
| # | 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. |
| # | 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. |
| # | 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. |
| # | 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 <link>-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. |