Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m291:learningunits:lu01:aufgaben:a_landingpage [2026/01/25 23:13] – gkoch
+++ de:modul:m291:learningunits:lu01:aufgaben:a_landingpage [2026/01/26 00:06] (aktuell) – gkoch
@@ Zeile 1: / Zeile 1: @@
-====== Projekt 1: Landingpage Hero Section (Light/Dark Mode) – LU01 (HTML + Grundlayout) ======
+====== Projekt 1: Landingpage Hero Section – LU01 (HTML + Grundlayout) ======
 <WRAP center round box 80%>
@@ Zeile 8: / Zeile 8: @@
 **Fokus LU01:** __Zuerst HTML-Struktur__, danach __CSS-Grundlayout__ (Container + Flexbox). Noch kein Feinschliff bei Fonts/Farben/Interaktionen.
 </WRAP>
-[[m291:ui_elemente_lesen|→ Vorwissen: UI-Elemente lesen (Figma → HTML)]]
 ==== Lernziele (LU01) ====
@@ Zeile 21: / Zeile 19: @@
   * Starter-Template ''index.html'' (mit TODOs in LU01/LU02/LU03)
   * Browser + DevTools + Live Server
+<WRAP center round download 60%>
+Laden Sie hier das Material herunter:
+{{ :de:modul:m291:learningunits:lu01:aufgaben:landing_page_alarado.zip |}}
+</WRAP>
-<WRAP center round box 80%>
+<WRAP center round important 80%>
 **Wichtig:** Halten Sie sich an die TODO-Markierungen im Template.
 \\
@@ Zeile 30: / Zeile 33: @@
 ==== Schrittweiser Aufbau (LU01) ====
-===== 1) HTML zuerst: Struktur & Gruppen (ca. 35–45 Min.) =====
+===== 1) HTML zuerst: Struktur & Gruppen von Elementen =====
 === 1.1 Header: Logo + Navigation + Switch-Platzhalter ===
+<WRAP center round box 80%>
+{{ :de:modul:m291:learningunits:lu01:aufgaben:screenshot_2026-01-25_at_23.31.39.png?nolink&800 |}}
+\\
+//Navigation Bar//
+</WRAP>
 **Aufgabe:** Bauen Sie den ''<header>'' gemäss Template auf.
   * Logo als ''img'' einfügen (+ sinnvoller ''alt'')
@@ Zeile 41: / Zeile 50: @@
 **Repetition: Semantische Grundstruktur**
 \\
-- ''header'' = Kopfbereich der Seite (Logo, Navigation, Controls)
+  - ''header'' = Kopfbereich der Seite (Logo, Navigation, Controls)
-- ''nav'' = Navigation (Links als Liste)
+  - ''nav'' = Navigation (Links als Liste)
-- ''main'' = Hauptinhalt (pro Seite 1×)
+  - ''main'' = Hauptinhalt (pro Seite 1×)
-- ''section'' = thematisch zusammenhängender Abschnitt (z.B. Hero)
+  - ''section'' = thematisch zusammenhängender Abschnitt (z.B. Hero)
 </WRAP>
-**Beispiel: Header-Grundgerüst (Sie passen Texte/Links an Ihr Design an):**
+<WRAP center round tip 60%>
-<code html>
+Mehr Infos zum ''<nav>''-Tag finden Sie hier: [[https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/nav|MDN Nav-Tag]]
-<header>
+</WRAP>
-  <img src="./resources/logo-light.svg" alt="Alarado Logo" id="logo" />
-  <nav class="menu" aria-label="Hauptnavigation">
-    <ul>
-      <li><a href="#" class="active">About us</a></li>
-      <li><a href="#">Product</a></li>
-      <li><a href="#">Resource</a></li>
-      <li><a href="#">Contact</a></li>
-    </ul>
-  </nav>
-  <label class="switch">
+{{:de:modul:m291:learningunits:lu01:aufgaben:5fc6d794-b765-4b9d-bcbf-acd2aa07f619.png.webp?nolink&800 |}}
-    <input id="theme-toggle" type="checkbox" />
+\\
-  </label>
+//Beispiel einer Navigation mit ''<nav>'', ''<ul>'' und ''<li>'' umgesetzt. Ihr HTML-Code unterscheidet sich von dem hier gezeigten.//
-</header>
-</code>
-**Checkpoint (2 Min.)**
+**Checkliste**
   * Ist die Navigation eine Liste (''ul/li'')?
   * Gibt es pro Link ein ''a''-Element (nicht nur Text)?
   * Hat das Logo einen passenden ''alt''-Text?
----
+=== 1.2 Hero Section: Inhalt links, Bild rechts ===
-=== 1.2 Hero Section: Inhalt links, Bild rechts ===
+<WRAP center round box 80%>
+{{ :de:modul:m291:learningunits:lu01:aufgaben:screenshot_2026-01-25_at_23.48.22.png?nolink&800 |}}
+\\
+//Hero-Section mit Element-Gruppen//
+</WRAP>
 **Aufgabe:** Ergänzen Sie in ''<section id="hero-section">'':
   * Textblock: ''h3'', ''h1'', ''p''
@@ Zeile 80: / Zeile 82: @@
   * Features/Infos in einer Gruppe (z.B. ''.info-wrapper'')
-**Beispiel: Hero-Content-Wrapper**
-<code html>
-<section id="hero-section">
-  <div class="content-wrapper">
-    <h3>😎 Simple way to communicate</h3>
-    <h1>Actions for Accessibility in Design</h1>
-    <p>The fastest way to build and deploy websites with reusable components.</p>
-    <div class="button-wrapper">
-      <button class="highlight">Get Started</button>
-      <button class="active">Get live demo</button>
-    </div>
-    <div class="info-wrapper">
-      <span class="icon-ok">No credit card required</span>
-      <span class="icon-ok">No software to install</span>
-    </div>
-  </div>
-  <!-- Bild kommt in 1.3 -->
-</section>
-</code>
-**Checkpoint (2 Min.)**
+**Checkliste**
   * Sind Buttons in einem Wrapper gruppiert?
   * Sind “Features” in einem Wrapper gruppiert?
   * Ist die Struktur logisch lesbar, auch ohne CSS?
----
-=== 1.3 Hero-Bild: ''img'' mit ''srcset'' ===
+=== 1.3 Hero-Bild ===
 **Aufgabe:** Fügen Sie das Bild gemäss Template ein. Nutzen Sie ''srcset'' für 1x/2x (Retina).
@@ Zeile 132: / Zeile 111: @@
 </code>
-**Checkpoint (1 Min.)**
+**Checkliste**
   * Stimmt der Pfad (''./resources/...''), und lädt das Bild?
   * Haben Sie einen sinnvollen ''alt''-Text?
----
+===== 2) CSS: Grundlayout =====
-===== 2) CSS danach: Grundlayout (ca. 35–45 Min.) =====
 === 2.1 Container zentrieren: ''.main-wrapper'' ===
@@ Zeile 146: / Zeile 123: @@
 **Repetition: Container-Zentrierung**
 \\
-- ''max-width'' begrenzt die Breite
+  * ''max-width'' begrenzt die Breite
-- ''margin: 0 auto'' zentriert horizontal
+  * ''margin: 0 auto'' zentriert horizontal
-- ''padding'' sorgt für Innenabstand (damit Inhalt nicht am Rand klebt)
+  * ''padding'' sorgt für Innenabstand (damit Inhalt nicht am Rand klebt)
 </WRAP>
@@ Zeile 160: / Zeile 137: @@
 </code>
----
+=== 2.2 Header mit Flexbox ===
+<WRAP center round box 80%>
+{{ :de:modul:m291:learningunits:lu01:aufgaben:screenshot_2026-01-25_at_23.52.19.png?nolink&800 |}}
+\\
+//Flexbox-Layout//
+</WRAP>
+<WRAP center round tip 60%>
+Eine gute Übersicht zur Flexbox gibt es hier: [[https://css-tricks.com/snippets/css/a-guide-to-flexbox/|CSS-Tricks: a guide to flexbox]]
+</WRAP>
-=== 2.2 Header mit Flexbox ===
 **Aufgabe:** Positionieren Sie Logo (links), Navigation (mitte) und Switch (rechts).
@@ Zeile 168: / Zeile 154: @@
 **Repetition: Flexbox Basics**
 \\
-- ''display: flex'' → Elemente in einer Reihe
+  * ''display: flex'' → Elemente in einer Reihe
-- ''justify-content: space-between'' → links/mittig/rechts verteilen
+  * ''justify-content: space-between'' → links/mittig/rechts verteilen
-- ''align-items: center'' → vertikal zentrieren
+  * ''align-items: center'' → vertikal zentrieren
-- ''gap'' → Abstand zwischen Items
+  * ''gap'' → Abstand zwischen Items
 </WRAP>
-**Beispiel:**
-<code css>
-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-</code>
----
 === 2.3 Navigation: Menu-Items als Flex-Reihe ===
 **Aufgabe:** Lassen Sie die Menu-Items nebeneinander erscheinen (ohne Styling der Farben – das kommt in LU02).
-<code css>
-.menu ul {
-  list-style: none;
-  display: flex;
-  gap: 24px;
-}
-</code>
----
 === 2.4 Hero Section: 2-Spalten Flexbox ===
 **Aufgabe:** Textblock links, Bild rechts – nebeneinander.
-<code css>
-#hero-section {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 32px;
-  margin-top: 48px;
-}
-</code>
----
 === 2.5 Bild soll responsiv schrumpfen ===
 **Aufgabe:** Das Bild soll proportional kleiner werden, wenn das Fenster kleiner wird.
+<WRAP center round box 80%>
+{{ :de:modul:m291:learningunits:lu01:aufgaben:rest.gif?nolink | Landing Page responsive preview}}
+\\
+**Hinweis:** Das echte Responsive-Layout (Media Query + Hamburger) machen Sie in LU02/LU03.
+</WRAP>
 <WRAP center round box 80%>
 **Repetition: Responsive Images**
 \\
-- ''max-width: 100%'' → nie breiter als der Container
+  * ''width: 100%'' → Bild füllt den Container
-- ''height: auto'' → Seitenverhältnis bleibt korrekt
+  * ''height: auto'' → Seitenverhältnis bleibt korrekt
 </WRAP>
-<code css>
-.hero-image {
-  max-width: 100%;
-  height: auto;
-  width: 520px; /* Richtwert – gemäss Figma */
-}
-</code>
----
 === 2.6 Buttons: als Gruppe mit Flexbox ===
 **Aufgabe:** Buttons nebeneinander, mit Abstand. (Details wie Farben/Fonts in LU02)
-<code css>
+{{:de:modul:m291:learningunits:lu01:aufgaben:screenshot_2026-01-25_at_23.57.10.png?nolink&400 |}}
-.button-wrapper {
-  display: flex;
-  gap: 16px;
-  margin-top: 24px;
-}
-</code>
----
 === 2.7 Hamburger-Buttons (für LU01: ausblenden) ===
@@ Zeile 256: / Zeile 202: @@
 </code>
----
-<WRAP center round box 80%>
-{{ :de:modul:m291:learningunits:lu01:aufgaben:rest.gif?nolink | Landing Page responsive preview}}
-\\
-**Hinweis:** Das echte Responsive-Layout (Media Query + Hamburger) machen Sie in LU02/LU03.
-</WRAP>
-==== Mini-Checkliste “LU01 fertig” ====
+==== Checkliste “LU01 fertig” ====
   * HTML: Logo + Nav-Liste + Switch-Platzhalter sind vorhanden
   * HTML: Hero-Text, Button-Gruppe, Info-Gruppe sind vorhanden
@@ Zeile 271: / Zeile 212: @@
   * CSS: Header als Flexbox (3 Bereiche verteilt)
   * CSS: Hero als Flexbox (2 Spalten)
-  * CSS: Bild schrumpft responsiv (''max-width:100%'', ''height:auto'')
+  * CSS: Bild schrumpft responsiv (''width:100%'', ''height:auto'')
-  * Keine Fehler in der Console
 ==== Debugging-Checkliste ====
@@ Zeile 280: / Zeile 220: @@
   * Test: Browserfenster kleiner ziehen → Bild bleibt proportional
-==== Abgabe (Ende LU01) ====
-<WRAP center round box 80%>
-**Zwischenabgabe:** Commit mit Message z.B. ''LU01: HTML structure + basic flex layout''.
-\\
-Sie zeigen kurz im Browser:
-- Header korrekt angeordnet
-- Hero in 2 Spalten
-- Bild skaliert responsiv
-</WRAP>
 ==== Ausblick (LU02 / LU03) ====