Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m291:learningunits:lu02:aufgaben:a_projekt_styles [2026/02/02 01:57] – 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>
@@ Zeile 13: / Zeile 16: @@
   * Sie arbeiten im bereitgestellten ''index.html'' Template aus LU01 weiter.
-<WRAP center round download 60%>
+<WRAP center round download 80%>
+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}}
@@ 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]]
@@ Zeile 34: / Zeile 40: @@
-===== Schritt 1 Google Font Poppins einbinden =====
+===== Schritt 1: Google Font Poppins einbinden =====
 **Aufgabe**
@@ Zeile 40: / Zeile 46: @@
   * 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//
+  * Setzen Sie im ''body'' (CSS) die ''font-family'' auf Poppins mit einem Fallback auf //sans-serif//
-===== Schritt 2 CSS-Variablen in :root definieren =====
+===== Schritt 2: CSS-Variablen in :root definieren =====
 **Aufgabe**
@@ Zeile 84: / Zeile 90: @@
 </WRAP>
-===== Schritt 3 Grundstyles im body setzen =====
+===== Schritt 3: Grundstyles im body setzen =====
 **Aufgabe**
@@ Zeile 107: / Zeile 113: @@
-===== 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 Schriftschnitt 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 121: / Zeile 129: @@
-===== Schritt 5 Typografie für h3 und h1 =====
+===== Schritt 5: Typografie für h3 und h1 =====
 **Aufgabe**
@@ Zeile 150: / Zeile 158: @@
 </WRAP>
-===== Schritt 6 Buttons stylen =====
+===== Schritt 6: Buttons stylen =====
+{{:de:modul:m291:learningunits:lu02:aufgaben:screenshot_2026-01-25_at_23.57.10.png?nolink&500|}}
 **Aufgabe**
@@ Zeile 175: / Zeile 185: @@
   * „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 203: / 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 223: / 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