Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m291:learningunits:lu02:aufgaben:a_projekt_styles [2026/02/02 01:44] – gkoch
+++ de:modul:m291:learningunits:lu02:aufgaben:a_projekt_styles [2026/02/02 02:19] (aktuell) – gkoch
@@ Zeile 1: / Zeile 1: @@
-====== LU02 Auftrag: Landingpage Alarado – Fonts, Variablen und Responsive ======
+====== Projekt 1: Landingpage Alarado – Fonts, Variablen und Responsive ======
 <WRAP center round box 80%>
@@ Zeile 8: / Zeile 8: @@
   - 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|}}
 </WRAP>
 ==== Voraussetzungen ====
-  * Sie arbeiten im bereitgestellten ''index.html'' Template mit den TODO-Kommentaren.
+  * Sie arbeiten im bereitgestellten ''index.html'' Template aus LU01 weiter.
+<WRAP center round download 80%>
+Ausgangslage:
+{{:de:modul:m291:learningunits:lu02:aufgaben:screenshot_2026-02-01_at_23.02.30.png?direct&600|}}
-<WRAP center round download 60%>
 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}}
@@ Zeile 21: / Zeile 27: @@
 ==== Arbeitsweise ====
   * Arbeiten Sie von oben nach unten im Template.
-  * Nach jedem Schritt: speichern → Browser aktualisieren → Ergebnis prüfen.
+  * 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.
@@ Zeile 28: / Zeile 34: @@
 \\
   * Google Fonts: [[https://fonts.google.com/|fonts.google.com]]
-  * MDN: CSS Custom Properties: [[https://developer.mozilla.org/en-US/docs/Web/CSS/--*|MDN CSS Variables]]
+  * 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]]
 </WRAP>
-----
-===== Schritt 1 Google Font Poppins einbinden =====
+===== Schritt 1: Google Font Poppins einbinden =====
 **Aufgabe**
   * Öffnen Sie [[https://fonts.google.com/|Google Fonts]] und suchen Sie **Poppins**.
-  * Wählen Sie passende Schriftschnitte aus, die Sie im Design benötigen (typisch: 400, 500, 600, 700).
+  * Klicken Sie auf //Get Font//
   * Kopieren Sie den vorgeschlagenen ''<link>'' Code und fügen Sie ihn im ''<head>'' an der Stelle **TODO in LU02** ein.
+  * Setzen Sie im ''body'' (CSS) die ''font-family'' auf Poppins mit einem Fallback auf //sans-serif//
-<WRAP center round tip 70%>
-Optional können Sie zusätzlich ''preconnect'' Links verwenden, damit der Browser schneller eine Verbindung aufbaut. ((''preconnect'' ist ein Performance-Hinweis: Der Browser startet die Verbindung früher.))
-</WRAP>
-**Checkpoint**
-  * Seite neu laden: keine Fehler in der Console.
-  * Im Elements-Tab sehen Sie im ''<head>'' die Font-Links.
-----
-===== Schritt 2 CSS-Variablen in :root definieren =====
+===== Schritt 2: CSS-Variablen in :root definieren =====
 **Aufgabe**
@@ Zeile 59: / Zeile 56: @@
     - Farben für Hintergrund und Text
     - Aktive Linkfarbe
-    - Schriftgrössen und Schriftgewichte für Navigation, h1, h3, Buttons
+    - 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.
 <WRAP center round box 80%>
@@ Zeile 92: / Zeile 90: @@
 </WRAP>
-**Checkpoint**
+===== Schritt 3: Grundstyles im body setzen =====
-  * Sie haben mindestens: Hintergrund, Text, Accent-Farbe sowie Variablen für h1/h3/nav/button.
-----
-===== Schritt 3 Grundstyles im body setzen =====
 **Aufgabe**
   * Setzen Sie im ''body'':
-    - ''font-family'' auf Poppins mit sinnvoller Fallback-Schrift
     - ''background-color'' und ''color'' über Ihre Variablen
-    - ''line-height'' für gute Lesbarkeit
 <WRAP center round box 80%>
@@ Zeile 112: / Zeile 103: @@
   background-color: var(...);
   color: var(...);
-  line-height: ...;
+  height: 100vh;
 }
 </code>
 </WRAP>
-**Checkpoint**
+**Überprüfen Sie Folgendes:**
   * Text wirkt sichtbar in der neuen Schrift.
   * Hintergrund und Textfarbe stimmen mit dem Design überein.
-----
-===== Schritt 4 Navigation stylen =====
+===== 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 Gewicht erhalten (über Variablen)
+    - 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)
@@ Zeile 136: / Zeile 128: @@
 </WRAP>
-**Checkpoint**
-  * Nur „About us“ ist aktiv gestylt.
-  * Die anderen Links sehen wie normale Navigation aus.
-----
+===== Schritt 5: Typografie für h3 und h1 =====
-===== Schritt 5 Typografie für h3 und h1 =====
 **Aufgabe**
   * Setzen Sie bei ''h3'':
-    - Schriftgrösse und Gewicht über Variablen
+    - Schriftgrösse und //font-weight// über Variablen
     - Grossschreibung mit ''text-transform: uppercase''
     - passende Abstände (margin)
   * Setzen Sie bei ''h1'':
-    - Schriftgrösse und Gewicht über Variablen
+    - Schriftgrösse und //font-weight// über Variablen
     - passende Abstände gemäss Design
@@ Zeile 171: / Zeile 158: @@
 </WRAP>
-**Checkpoint**
+===== Schritt 6: Buttons stylen =====
-  * h3 wirkt wie im Design (klein, fett, gross geschrieben).
-  * h1 wirkt wie ein klarer Haupttitel (gross, stark gewichtet).
-----
+{{:de:modul:m291:learningunits:lu02:aufgaben:screenshot_2026-01-25_at_23.57.10.png?nolink&500|}}
-===== Schritt 6 Buttons stylen =====
 **Aufgabe**
   * Definieren Sie Basis-Styles für alle ''button'':
-    - Schriftgrösse und Gewicht über Variablen
+    - Schriftgrösse und //font-weight// über Variablen
     - Cursor-Verhalten
   * Stylen Sie anschliessend die Varianten:
@@ Zeile 198: / Zeile 181: @@
 </WRAP>
-**Checkpoint**
+**Überprüfen Sie folgendes**
   * „Get Started“ wirkt wie ein Hauptbutton.
-  * „Get live demo“ wirkt wie ein zurückhaltender Zweitbutton.
+  * „Get live demo“ wirkt eher wie ein Link.
-----
+===== Schritt 7: Responsive Regeln mit Media Query =====
-===== 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**
@@ Zeile 232: / Zeile 215: @@
 </WRAP>
-**Checkpoint**
+**Ü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 =====
+===== Schritt 8: Responsive testen mit DevTools =====
 {{:de:modul:m291:learningunits:lu02:aufgaben:screenshot_2026-02-02_at_00.23.31.png?direct&1100|}}
@@ Zeile 252: / Zeile 235: @@
   * Text bleibt gut lesbar.
-===== Schritt 9 Abgabe und Commit =====
-**Abgabe Ende LU02**
-  * Commit-Message: ''LU02: fonts variables responsive''
-  * Zeigen Sie der Lehrperson kurz:
-    - Poppins aktiv
-    - Variablen in '':root'' vorhanden und verwendet
-    - Navigation und Buttons gestylt
-    - Mobile Layout funktioniert