Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m291:leistungsbeurteilungen:01_lb:a_lernziele [2026/03/08 14:25] – gkoch
+++ de:modul:m291:leistungsbeurteilungen:01_lb:a_lernziele [2026/03/15 23:39] (aktuell) – gkoch
@@ Zeile 2: / Zeile 2: @@
 **Modul:** M291 Web-Frontend \\
-**Prüfungsform:** Moodle-Test (Multiple Choice / Single Choice)
+**Prüfungsform:** Moodle-Test (Multiple Choice / Single Choice)\\
+**Dauer:** 30 Minuten\\
-Die LB01 deckt sowohl das repetierte Vorwissen aus den vorbereitenden Videos als auch die neuen Inhalte aus dem Unterricht ab.
+**Sozialform:** Einzelarbeit
+Die LB01 deckt sowohl das repetierte Vorwissen aus den vorbereitenden Videos und den Modulen 287 / 288 als auch die neuen Inhalte aus dem Unterricht ab.
 ===== 1. UI-Analyse und HTML-Struktur =====
-==== Elementklassen erkennen ====
+==== UI-Designs lesen ====
-Sie können UI-Designs in funktionale Bausteine zerlegen und diese den Klassen **Layout**, **Formular**, **Navigation** oder **Anzeige** zuordnen.
+Sie können ein UI-Design (z. B. in Figma) in funktionale Bausteine zerlegen, indem Sie in sechs Schritten vorgehen: Grobscan, Navigation, Sections, Gruppierung, Layout und Wiederholungen erkennen. Sie ordnen die Bausteine den Klassen **Layout**, **Formular**, **Navigation** oder **Anzeige** zu.
 ==== Semantik ====
-Sie wählen für UI-Bereiche die korrekten semantischen HTML-Tags aus, z. B. ''<header>'', ''<nav>'', ''<main>'', ''<section>'', ''<footer>''.
+Sie wählen für UI-Bereiche die korrekten semantischen HTML-Tags aus (z. B. ''<header>'', ''<nav>'', ''<main>'', ''<section>'', ''<footer>'') und können begründen, warum semantisches HTML Vorteile gegenüber reinen ''<div>''-Strukturen bietet.
 ==== Strukturierung ====
-Sie können Elemente sinnvoll gruppieren und für die Strukturierung sprechende Klassennamen vergeben.
+Sie können Elemente sinnvoll gruppieren, sprechende Klassennamen vergeben und ein HTML-Grundgerüst mit korrekter Verlinkung von CSS (''<link>'') und JavaScript (''<script>'') aufbauen.
+==== Bilder und srcset ====
+Sie verstehen den Einsatz von ''srcset'', um Bilder responsiv für verschiedene Bildschirmauflösungen oder Pixeldichten bereitzustellen, und können den Unterschied zum einfachen ''src''-Attribut erklären.
-==== Bilder ====
-Sie verstehen den Einsatz von ''srcset'', um Bilder responsiv für verschiedene Bildschirmauflösungen bereitzustellen.
 ===== 2. CSS Layout und Styling =====
+==== Schriftgrössen und Einheiten ====
+Sie kennen den Unterschied zwischen ''px'', ''em'' und ''rem'' und wissen, wann welche Einheit sinnvoll eingesetzt wird. Sie wenden ''rem'' für Schriftgrössen an, damit diese bei Browser-Zoom korrekt skalieren, und kennen die «EM-Falle» bei verschachtelten Elementen.
+==== Fonts einbinden ====
+Sie können einen Google Font per ''<link>'' im ''<head>'' einbinden und als ''font-family'' verwenden. Sie kennen die wichtigsten Font-Eigenschaften (''font-weight'', ''font-style'', ''line-height'') und wissen, warum ''line-height'' einheitenlos gesetzt werden soll.
+==== CSS-Variablen ====
+Sie definieren Designwerte (Farben, Abstände, Schriftgrössen) als CSS-Variablen in '':root'' und verwenden sie mit ''var(--name)'' im ganzen Stylesheet. Sie können erklären, welche Vorteile CSS-Variablen gegenüber direkt eingetragenen Werten bieten.
 ==== Box-Modell ====
-Sie beherrschen die Konzepte von Content, Padding, Border und Margin und wissen, wie ''box-sizing: border-box'' die Grössenberechnung beeinflusst.
+Sie beherrschen die Konzepte von Content, Padding, Border und Margin und wissen, wie ''box-sizing: border-box'' die Grössenberechnung beeinflusst. Sie kennen den Unterschied zwischen Inline- und Block-Elementen und wie ''display'' dieses Verhalten steuert.
 ==== Selektoren ====
-Sie können komplexe CSS-Selektoren gezielt einsetzen: Klassen, IDs, Kind- und Geschwister-Elemente sowie Pseudo-Klassen wie '':hover'' oder '':not()''.
+Sie können komplexe CSS-Selektoren gezielt einsetzen: Klassen, IDs, Kind- und Geschwister-Elemente, Pseudo-Klassen wie '':hover'', '':focus'', '':focus-within'' und '':not()'' sowie Pseudo-Elemente wie ''::before'' und ''::after''.
 ==== Layout-Techniken ====
+**Flexbox:** Sie können Elemente mit ''display: flex'' ausrichten, mit ''flex-direction'' die Richtung definieren, Abstände mit ''gap'' setzen und die Verteilung mit ''justify-content'' und ''align-items'' steuern.
-**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()''.
 ==== Positionierung ====
-Sie kennen den Unterschied zwischen ''static'', ''relative'', ''absolute'', ''fixed'' und ''sticky''.
+Sie kennen den Unterschied zwischen ''static'', ''relative'', ''absolute'', ''fixed'' und ''sticky'' und können beschreiben, in welchem Kontext welcher Wert sinnvoll ist.
 ==== Kaskade und Vererbung ====
-Sie verstehen, wie Styles vererbt oder überschrieben werden (Spezifität), und kennen die Schlüsselwörter ''initial'', ''inherit'', ''unset'' und ''revert''.
+Sie verstehen, wie Styles vererbt oder überschrieben werden (Spezifität, Reihenfolge, Wichtigkeit), kennen die Schlüsselwörter ''initial'', ''inherit'' und ''unset'' und wissen, welche Eigenschaften typischerweise vererbt werden (z. B. ''color'', ''font-*'') und welche nicht (z. B. ''margin'', ''border'').
-==== Variablen und Fonts ====
-Sie können CSS-Variablen in '':root'' definieren und wissen, wie man externe Fonts (z. B. Google Fonts) korrekt einbindet.
 ==== Responsive Design ====
-Sie können Media Queries einsetzen, um Layouts an verschiedene Breakpoints anzupassen.
+Sie können Media Queries einsetzen, um Layouts an verschiedene Breakpoints anzupassen. Sie wissen, was ein Breakpoint ist und wann ein neuer sinnvoll ist (z. B. wenn Elemente sich überlappen oder horizontales Scrollen entsteht). Sie kennen das Werkzeug «Device Toolbar» in den DevTools zum Testen responsiver Layouts.
 ===== 3. JavaScript Grundlagen und DOM-Manipulation =====
-==== Variablen ====
+==== Variablen und Scope ====
-Sie kennen den Unterschied zwischen ''let'', ''const'' und dem veralteten ''var'' sowie die Konzepte von Block-Scope und Function-Scope.
+Sie kennen den Unterschied zwischen ''let'', ''const'' und ''var'' sowie die Konzepte von Block-Scope und Function-Scope und können begründen, wann ''const'' und wann ''let'' eingesetzt wird.
 ==== Datentypen ====
-Sie können mit primitiven Datentypen (String, Number, Boolean) sowie mit Arrays und Objekten umgehen.
+Sie können mit primitiven Datentypen (string, number, boolean) sowie mit Arrays und Objekten umgehen und kennen typische Anwendungsfälle.
 ==== Funktionen ====
-Sie können Funktionen deklarieren, Parameter übergeben und Rückgabewerte verarbeiten.
+Sie können Funktionen deklarieren (klassisch und als Arrow Function), Parameter übergeben und Rückgabewerte verarbeiten.
 ==== DOM-Zugriff ====
-Sie wissen, wie man Elemente mit ''getElementById()'', ''querySelector()'' oder ''querySelectorAll()'' aus dem DOM ausliest.
+Sie wissen, wie man Elemente mit ''getElementById()'', ''querySelector()'' oder ''querySelectorAll()'' aus dem DOM ausliest. Sie kennen den Unterschied zwischen diesen Methoden – insbesondere, dass ''querySelector()'' nur das erste passende Element zurückgibt, ''querySelectorAll()'' hingegen eine **NodeList** aller passenden Elemente.
-==== Manipulation ====
+Sie wissen, was eine **NodeList** ist, wie man mit ''forEach()'' über sie iteriert und warum Array-Methoden wie ''.map()'' oder ''.filter()'' nicht direkt darauf verfügbar sind.
-Sie können Klassen dynamisch mit ''classList'' (''add'', ''remove'', ''toggle'') verändern sowie Attribute und Inhalte von Elementen anpassen.
+Sie können Eltern-, Geschwister- und Kind-Elemente abrufen (''parentElement'', ''nextElementSibling'', ''previousElementSibling'', ''firstElementChild'') und kennen den Unterschied zwischen ''nextSibling'' und ''nextElementSibling'' (Text-Nodes).
+==== Manipulation ====
+Sie können Klassen dynamisch mit ''classList'' (''add'', ''remove'', ''toggle'', ''contains'') verändern und Attribute mit ''setAttribute()'' / ''getAttribute()'' lesen und setzen. Sie verstehen, warum das Steuern von Styles über CSS-Klassen (statt direktes ''element.style'') die bevorzugte Methode ist.
 ===== 4. Events, State und Accessibility (A11y) =====
-==== Events ====
+==== Events und EventListener ====
-Sie können auf Benutzerinteraktionen reagieren (z. B. ''click'', ''change'', ''input'') und verstehen das Konzept der Pointer Events (''pointerdown'', ''pointermove'', ''pointerup'').
+Sie können mit ''addEventListener()'' auf Benutzerinteraktionen reagieren und kennen die wichtigsten Event-Typen: ''click'', ''change'', ''input'', ''keydown'', ''DOMContentLoaded''. Sie verstehen das **Event-Objekt** und können ''event.target'' und ''event.currentTarget'' unterscheiden – insbesondere warum ''currentTarget'' bei Buttons mit Kind-Elementen zuverlässiger ist.
-==== Zustand (State) ====
+Sie kennen das Konzept der **Pointer Events** (''pointerdown'', ''pointermove'', ''pointerup'') als modernen Standard, der Maus, Touch und Stift mit einem einzigen Event-System abdeckt.
-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.
-==== Barrierefreiheit ====
+==== Zustand (State) ====
-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 verstehen, wie man den Zustand einer UI (z. B. «offen/geschlossen» beim Accordion oder den Dark Mode) über CSS-Klassen im DOM abbildet: JavaScript steuert den **Zustand** (Klasse setzen/entfernen), CSS steuert das **Aussehen**. Sie können den aktuellen Zustand mit ''classList.contains()'' auslesen, ohne eine eigene Variable zu führen.
+==== CSS Transitions ====
+Sie wissen, welche CSS-Eigenschaften animiert (interpoliert) werden können und welche nicht. Sie kennen die Syntax von ''transition'' mit Eigenschaft, Dauer und Timing-Funktion und können die wichtigsten Timing-Funktionen (''ease'', ''ease-in-out'', ''linear'', ''cubic-bezier'') unterscheiden. Sie wissen, warum ''display: none'' nicht animierbar ist, und kennen die Lösung mit ''height: 0 → auto'' und ''interpolate-size: allow-keywords'' (inkl. aktuellem Browser-Support: Chrome/Edge).
-===== 5. Formulare und Debugging =====
+==== Barrierefreiheit (A11y) ====
+Sie kennen die Bedeutung von Accessibility (a11y) und wissen, welche Personengruppen von barrierefreiem Web profitieren. Sie kennen die vier WCAG-Grundprinzipien (**POUR**: Perceivable, Operable, Understandable, Robust) und können je ein konkretes Beispiel dazu nennen.
-==== Formulare ====
+Sie können ''aria-expanded'' korrekt einsetzen, um Screenreadern den Zustand eines Accordions mitzuteilen. Sie kennen den Unterschied zwischen ''display: none'' (entfernt Element aus dem Accessibility Tree) und der «Visually Hidden»-CSS-Technik (visuell unsichtbar, aber für Screenreader vorhanden). Sie wissen, wann ''aria-hidden="true"'' und wann ''aria-label'' eingesetzt wird.
-Sie kennen verschiedene Input-Typen (z. B. ''text'', ''email'', ''checkbox'', ''radio'') und die Grundlagen der clientseitigen Validierung mit den Attributen ''required'' und ''pattern''.
-==== Fehlersuche ====
+Sie achten auf **Tastaturbedienbarkeit**: Focus-Styles werden nicht entfernt (''outline: none'' vermeiden), und sie kennen den Unterschied zwischen '':focus'' und '':focus-visible''.
-Sie können die Browser-DevTools (Console, Elements-Tab) nutzen, um HTML-Strukturen zu prüfen und JavaScript-Fehler zu finden und zu beheben.