Lernziele Leistungsbeurteilung 01 (LB01)

Modul: M291 Web-Frontend
Prüfungsform: Moodle-Test (Multiple Choice / Single Choice)

Die LB01 deckt sowohl das repetierte Vorwissen aus den vorbereitenden Videos bzw. den Modulen (287 Websites mit CSS gestalten, 288 Programmiertechniken im Webfrontend einsetzen) als auch die neuen Inhalte aus dem Unterricht ab.

Sie können UI-Designs in funktionale Bausteine zerlegen und diese den Klassen Layout, Formular, Navigation oder Anzeige zuordnen.

Sie wählen für UI-Bereiche die korrekten semantischen HTML-Tags aus, z. B. <header>, <nav>, <main>, <section>, <footer>.

Sie können Elemente sinnvoll gruppieren und für die Strukturierung sprechende Klassennamen vergeben.

Sie verstehen den Einsatz von srcset, um Bilder responsiv für verschiedene Bildschirmauflösungen oder Pixeldichten bereitzustellen.

Sie beherrschen die Konzepte von Content, Padding, Border und Margin und wissen, wie box-sizing: border-box die Grössenberechnung beeinflusst. Sie kennen die unterschiede zwischen Inline- und Box-Elementen.

Sie können komplexe CSS-Selektoren gezielt einsetzen: Klassen, IDs, Kind- und Geschwister-Elemente sowie Pseudo-Klassen wie :hover oder :not() und Pseudo-Elemente wie ::before und ::after.

Flexbox: Sie können Elemente mit display: flex ausrichten, mit flex-direction die Flex-Richtung definieren, Abstände mit gap definieren und die Verteilung mit justify-content und align-items steuern.

Grid: Sie verstehen die Grundlagen von CSS Grid, insbesondere die Spaltendefinition mit fr und repeat().

Sie kennen den Unterschied zwischen position: static, position: relative, position: absolute, position: fixed und position: sticky.

Sie verstehen, wie Styles vererbt oder überschrieben werden (Spezifität), und kennen die Schlüsselwörter initial, inherit und unset.

Sie können CSS-Variablen in :root definieren und wissen, wie man externe Fonts (z. B. Google Fonts) korrekt einbindet.

Sie können Media Queries einsetzen, um Layouts an verschiedene Breakpoints anzupassen.

Sie kennen den Unterschied zwischen let, const und dem veralteten var sowie die Konzepte von Block-Scope und Function-Scope.

Sie können mit primitiven Datentypen (string, number, boolean) sowie mit Arrays und Objekten umgehen.

Sie können Funktionen deklarieren, Parameter übergeben und Rückgabewerte verarbeiten.

Sie wissen, wie man Elemente mit getElementById(), querySelector() oder querySelectorAll() aus dem DOM ausliest und Eltern-Elemente, Geschwister-Elemente und Kind-Elemente abruft.

Sie können Klassen dynamisch mit classList (add, remove, toggle) verändern sowie Attribute von Elementen anpassen.

Sie können auf Benutzerinteraktionen reagieren (z. B. click, change, input) und verstehen das Konzept der Pointer Events (pointerdown, pointermove, pointerup).

Sie verstehen, wie man den Zustand einer UI – z. B. «offen/geschlossen» bei einem Accordion oder den Dark Mode – über CSS-Klassen im DOM abbildet und verwaltet.

Sie kennen die Bedeutung von aria-expanded für die Kommunikation von Zuständen an Screenreader und achten auf Tastaturbedienbarkeit (Fokus-Stile, semantische Elemente).