Dies ist eine alte Version des Dokuments!
| # | Stufe | Lernziel |
| 1.1 | Kennen | Ich kenne die Syntax und seine Bestandteile einer URL. |
| 1.2 | Aufzählen | Ich kann mindestens drei verschiedene Protokolle aufzählen, die in einer URL verwendet werden können. |
| 1.3 | Unterscheiden | Ich kenne den unterschied zwischen einer Referenzierung mit absoluter und relativer Pfadangabe. |
| 1.4 | Anwenden | Ich kann Referenzierungen mit absoluter und relativer Pfadangabe gezielt in HTML-Dokumenten anwenden/einsetzen. |
| # | Stufe | Lernziel |
| 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 | 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 | Anwenden | Ich kann Inhalte (Content) in Boxen in der ausführlichen und in der kurzen Schreibweise lesen, verstehen, strukturieren und gestalten. |
| 2.1 | Erstellen | Ich kann den Begriff zusammenfallende (vertikale) Aussenabstände (Collapsing Margins) in eigenen Worten erklären. |
| # | Stufe | Lernziel |
| 4.1 | Kennen | Ich kenne die Standardwerte von der Eigenschaft display und kann die Unterschied in eigenen Worten erklären. |
| 4.2 | Kennen | Ich kenne den Aufbau eines Flexbox Layouts (Container, Items) und deren Eigenschaften. |
| 4.3 | Kennen | Ich kenne den Aufbau eines Grid Layouts (Container, Zeilen, Spalten, Zellen). |
| 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.6 | Erstellen | Ich kann ein Flexbox Layout syntaktisch und semantisch korrekt erstellen und strukturieren. |
| 4.7 | Erstellen | Ich kann ein Grid Layout syntaktisch und semantisch korrekt erstellen und strukturieren. |
| # | 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.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.4 | Aufzählen | Ich kann die aktuell gültigen CSS-Medientypen (all, screen, print, speech) aufzählen und deren Verwendungszweck beschreiben. |
| 5.5 | Anwenden | Ich kann das media-Attribut im <link>- oder <style>-Tag korrekt einsetzen, um gerätespezifische Stylesheets (z. B. für Bildschirm und Drucker) einzubinden zu können. |
| 5.6 | Beurteilen | 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 | Kennen | Ich kenne die drei Varianten, um Media Queries in ein HTML-Dokument einzubinden (<link>, <style>, @media). |
| 5.8 | Beurteilen | Ich kann den Begriff Breakpoint in eigenen Worten erklären und dessen Funktion im Responsive Webdesign beschreiben. |
| 5.9 | Beurteilen | Ich kann Media Queries mit Breakpoints und and-Verknüpfungen syntaktisch und semantisch korrekt erstellen und in HTML-Dokumente einbinden. |
| 5.10 | Kennen | Ich kenne die wichtigsten Medienmerkmale (width, height, orientation, resolution etc.) und deren Bedeutung für Media Queries. |
| 5.11 | Unterscheiden | Ich kann den Unterschied zwischen width/height (Viewport) und device-width/device-height (Gerät) in eigenen Worten erklären. |
| 5.12 | Anwenden | Ich kann Medienmerkmale mit den Präfixen min- und max- sowie dem Attribut orientation gezielt in Media Queries einsetzen. |
| # | 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.2 | Erklären | Ich kann erklären, wofür die <link>-Attribute integrity und crossorigin beim Einbinden von Bootstrap verwendet werden. |
| 6.3 | Anwenden | |
| 6.4 | Kennen | Ich kenne den Unterschied zwischen .container und .container-fluid sowie das 12-Spalten-Raster von Bootstrap. |
| 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. |
| # | Stufe | Lernziel |
| 7.1 | Kennen | Ich kenne die sechs Qualitätsmerkmale der Norm ISO 9126 (Zuverlässigkeit, Funktionalität, Benutzbarkeit, Effizienz, Änderbarkeit, Übertragbarkeit) und kann sie benennen. |
| 7.2 | Kennen | Ich kenne die wichtigsten Fehlerarten (Codier-, Logik-, Entwurfs-, Daten-, Umsetzungs- und Oberflächenfehler) und kann je ein Beispiel dazu nennen. |
| 7.3 | Kennen | Ich kenne die Prinzipien guter Testaktivitäten (frühzeitig, messbar, dokumentiert, geplant) und die fünf Kriterien für die Auswahl von Testfällen. |
| 7.4 | Kennen | Ich kenne den Zweck von Validatoren und weiss, welche W3C-Dienste für HTML und CSS verwendet werden. |
| 7.5 | Unterscheiden | Ich kann den Unterschied zwischen der White-Box- und der Black-Box-Testmethode in eigenen Worten erklären und begründen, wer welche Methode anwenden kann. |
| 7.6 | Erklären | Ich kann erklären, warum frühzeitiges Testen Zeit und Kosten spart, und dies anhand eines Praxisbeispiels (z.B. Prototyp vs. fertiges Produkt) veranschaulichen. |
| 7.7 | Erklären | Ich kann erklären, welche Auswirkungen Softwarefehler auf verschiedene Einsatzgebiete (Massenprodukt vs. individuelle Software) haben können. |
| 7.8 | Erklären | Ich kann erklären, warum Validatoren für Standardkonformität, Barrierefreiheit, SEO und langfristige Wartbarkeit wichtig sind. |
| 7.9 | Erstellen | Ich kann für ein gegebenes Testobjekt strukturierte Testfälle erstellen, die Normal-, Grenz- und Ausnahmefälle abdecken, und diese in einem Testbericht dokumentieren. |
| 7.10 | Anwenden | Ich kann den W3C HTML- und CSS-Validator gezielt einsetzen, die Ergebnisse (Fehler, Warnungen) interpretieren und den Code entsprechend korrigieren. |