Modul: M291 Web-Frontend
Prüfungsform: Moodle-Test (Multiple Choice / Single Choice)
Die LB01 deckt sowohl das repetierte Vorwissen aus den vorbereitenden Videos 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 bereitzustellen.
Sie beherrschen die Konzepte von Content, Padding, Border und Margin und wissen, wie box-sizing: border-box die Grössenberechnung beeinflusst.
Sie können komplexe CSS-Selektoren gezielt einsetzen: Klassen, IDs, Kind- und Geschwister-Elemente sowie Pseudo-Klassen wie :hover oder :not().
Flexbox: Sie können Elemente mit display: flex ausrichten, 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 static, relative, absolute, fixed und sticky.
Sie verstehen, wie Styles vererbt oder überschrieben werden (Spezifität), und kennen die Schlüsselwörter initial, inherit, unset und revert.
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.
Sie können Klassen dynamisch mit classList (add, remove, toggle) verändern sowie Attribute und Inhalte 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).
Sie kennen verschiedene Input-Typen (z. B. text, email, checkbox, radio) und die Grundlagen der clientseitigen Validierung mit den Attributen required und pattern.
Sie können die Browser-DevTools (Console, Elements-Tab) nutzen, um HTML-Strukturen zu prüfen und JavaScript-Fehler zu finden und zu beheben.