====== Projekt 1: Landingpage Alarado – Fonts, Variablen und Responsive ====== **Ziel:** Sie ergänzen im bestehenden LU01-Projekt die **TODO in LU02**: \\ - Google Font einbinden - CSS-Variablen in '':root'' definieren und verwenden - Typografie, Navigation und Buttons gemäss Design stylen - Responsive Anpassungen mit einer Media Query umsetzen Ziel-Layout: {{:de:modul:m291:learningunits:lu02:aufgaben:screenshot_2026-02-01_at_23.07.59.png?direct&600|}} ==== Voraussetzungen ==== * Sie arbeiten im bereitgestellten ''index.html'' Template aus LU01 weiter. Ausgangslage: {{:de:modul:m291:learningunits:lu02:aufgaben:screenshot_2026-02-01_at_23.02.30.png?direct&600|}} Falls Sie in der letzten Unterrichtseinheit nicht weit gekommen sind, laden Sie sich dieses HTML-File herunter und verbessern Sie Ihren Code nach dieser Vorlage. {{ :de:modul:m291:learningunits:lu02:aufgaben:index_lu02_start.zip | Code nach LU01}} ==== Arbeitsweise ==== * Arbeiten Sie von oben nach unten im Template. * Nach jedem Schritt: speichern → Browser aktualisieren → Ergebnis prüfen. (oder mit Live-Server – aktualisiert automatisch) * Wenn etwas nicht funktioniert: DevTools öffnen → Console und Elements prüfen. **Hilfreiche Links** \\ * Google Fonts: [[https://fonts.google.com/|fonts.google.com]] * MDN: CSS Custom Properties: [[https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascading_variables/Using_custom_properties|MDN CSS Variables]] * MDN: Media Queries: [[https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries|MDN Media Queries]] * DevTools Responsive Mode: [[https://developer.chrome.com/docs/devtools/device-mode/|Chrome DevTools Device Mode]] ===== Schritt 1: Google Font Poppins einbinden ===== **Aufgabe** * Öffnen Sie [[https://fonts.google.com/|Google Fonts]] und suchen Sie **Poppins**. * Klicken Sie auf //Get Font// * Kopieren Sie den vorgeschlagenen '''' Code und fügen Sie ihn im '''' an der Stelle **TODO in LU02** ein. * Setzen Sie im ''body'' (CSS) die ''font-family'' auf Poppins mit einem Fallback auf //sans-serif// ===== Schritt 2: CSS-Variablen in :root definieren ===== **Aufgabe** * Füllen Sie den Block '':root'' im CSS. * Definieren Sie Variablen für: - Farben für Hintergrund und Text - Aktive Linkfarbe - Schriftgrössen und Schriftschnitte (=font-weight) für Navigation, h1, h3, Buttons * Werte nehmen Sie aus dem Figma-Design. * Nutzen Sie ''rem''-Werte und nicht ''px''-Werte für die Schriftgrössen. Einen Umrechner finden Sie hier: [[https://nekocalc.com/px-to-rem-converter|PX To REM converter]] oder via VS-Code Extension [[https://marketplace.visualstudio.com/items?itemName=sainoba.px-to-rem|VS Code Extension px-to-rem]] -> Umrechnung: pixel wert markieren und dann ''Alt-Z'' drücken. **Beispielstruktur für :root** :root { /* Farben */ --color-bg-light: ...; --color-text-light: ...; --color-accent: ...; /* Typografie */ --size-h1-desktop: ...; --size-h1-mobile: ...; --weight-h1: ...; --size-h3: ...; --weight-h3: ...; --size-nav: ...; --weight-nav: ...; --size-button: ...; --weight-button: ...; } **Regel:** Ab jetzt verwenden Sie im CSS möglichst oft ''var(--...)'' statt einzelne Zahlen zu kopieren. ===== Schritt 3: Grundstyles im body setzen ===== **Aufgabe** * Setzen Sie im ''body'': - ''background-color'' und ''color'' über Ihre Variablen **Beispiel welche Eigenschaften erwartet werden** body { font-family: ...; background-color: var(...); color: var(...); height: 100vh; } **Überprüfen Sie Folgendes:** * Text wirkt sichtbar in der neuen Schrift. * Hintergrund und Textfarbe stimmen mit dem Design überein. ===== Schritt 4: Navigation stylen ===== {{:de:modul:m291:learningunits:lu02:aufgaben:screenshot_2026-01-25_at_23.31.39.png?nolink&800|}} **Aufgabe** * Stylen Sie die Navigation so, dass: - die ''li'' eine definierte Schriftgrösse und ein Schriftschnitt (=font-weight) erhalten (über Variablen) - Links standardmässig keine Unterstreichung haben - der aktive Link als aktiv erkennbar ist (Farbe und Unterstreichung gemäss Design) * Achten Sie darauf, dass nur der aktive Link speziell gestylt ist. Für „alle Links ausser active“ eignet sich ein Selektor wie ''a:not(.active)''. ((Der Selektor trifft alle Links, die nicht die Klasse active haben.)) ===== Schritt 5: Typografie für h3 und h1 ===== **Aufgabe** * Setzen Sie bei ''h3'': - Schriftgrösse und //font-weight// über Variablen - Grossschreibung mit ''text-transform: uppercase'' - passende Abstände (margin) * Setzen Sie bei ''h1'': - Schriftgrösse und //font-weight// über Variablen - passende Abstände gemäss Design **Beispiel welche Eigenschaften erwartet werden** h3 { font-size: var(...); font-weight: var(...); text-transform: uppercase; margin-bottom: ...; } h1 { font-size: var(...); font-weight: var(...); margin-bottom: ...; } ===== Schritt 6: Buttons stylen ===== {{:de:modul:m291:learningunits:lu02:aufgaben:screenshot_2026-01-25_at_23.57.10.png?nolink&500|}} **Aufgabe** * Definieren Sie Basis-Styles für alle ''button'': - Schriftgrösse und //font-weight// über Variablen - Cursor-Verhalten * Stylen Sie anschliessend die Varianten: - ''.highlight'' als primärer Button (Padding, Hintergrundfarbe, Radius, Textfarbe) - ''.active'' als sekundärer Button (transparent, keine Border) **Beispiel welche Bereiche Sie umsetzen sollen** button { ... } button:hover { ... } button.highlight { ... } button.active { ... } **Überprüfen Sie folgendes** * „Get Started“ wirkt wie ein Hauptbutton. * „Get live demo“ wirkt eher wie ein Link. ===== Schritt 7: Responsive Regeln mit Media Query ===== {{:de:modul:m291:learningunits:lu02:aufgaben:screenshot_2026-02-01_at_23.09.10.png?nolink&400|}} **Aufgabe** * Ergänzen Sie im Template den ''@media'' Block so, dass das Mobile-Layout funktioniert: - Hero wird einspaltig - Bild kommt oben, Text darunter - Innenabstände werden kleiner - Navigation-Liste und Switch verschwinden - Hamburger-Icon wird sichtbar - h1 wird kleiner **Gerüst für den Media Query Block** @media screen and (width < 1024px) { /* Hero Layout anpassen */ /* Content-Wrapper Breite anpassen */ /* Container Padding anpassen */ /* Typografie Mobile anpassen */ /* Navigation/Switch ausblenden, Hamburger einblenden */ } **Kaskade merken:** Wenn ein Selektor im ''@media'' Block gleich ist wie oben, überschreibt die Regel im ''@media'' Block die vorherige Regel, sobald die Bedingung stimmt. **Überprüfen Sie Folgendes:** * Über 1024px: 2-Spalten Layout. * Unter 1024px: 1-Spalten Layout mit Bild oben. * Hamburger sichtbar, Menu und Switch versteckt. ===== Schritt 8: Responsive testen mit DevTools ===== {{:de:modul:m291:learningunits:lu02:aufgaben:screenshot_2026-02-02_at_00.23.31.png?direct&1100|}} **Aufgabe** * Öffnen Sie DevTools und aktivieren Sie den Device Toolbar Modus. * Testen Sie mindestens: - Breite knapp über 1024px - Breite knapp unter 1024px - ein Smartphone-Preset (z.B. iPhone) **Achten Sie besonders auf Folgendes:** * Kein horizontales Scrollen. * Keine überlappenden Elemente. * Text bleibt gut lesbar.