Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m291:learningunits:lu02:aufgaben:a_projekt_styles [2026/02/02 02:00] – 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 108: / Zeile 114: @@
 ===== 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 151: / Zeile 159: @@
 ===== Schritt 6: Buttons stylen =====
+{{:de:modul:m291:learningunits:lu02:aufgaben:screenshot_2026-01-25_at_23.57.10.png?nolink&500|}}
 **Aufgabe**
@@ Zeile 176: / Zeile 186: @@
 ===== 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**