de:modul:m291:learningunits:lu01:aufgaben:a_landingpage

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung		 Vorhergehende Überarbeitung
de:modul:m291:learningunits:lu01:aufgaben:a_landingpage [2026/01/25 23:31] – gkochde: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%> <WRAP center round box 80%>
Zeile 36: Zeile 36:
  
 === 1.1 Header: Logo + Navigation + Switch-Platzhalter === === 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. **Aufgabe:** Bauen Sie den ''<header>'' gemäss Template auf.
   * Logo als ''img'' einfügen (+ sinnvoller ''alt'')   * Logo als ''img'' einfügen (+ sinnvoller ''alt'')
Zeile 50: Zeile 56:
 </WRAP> </WRAP>
  
 +<WRAP center round tip 60%>
 +Mehr Infos zum ''<nav>''-Tag finden Sie hier: [[https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/nav|MDN Nav-Tag]]
 +</WRAP>
 +
 +
 +{{:de:modul:m291:learningunits:lu01:aufgaben:5fc6d794-b765-4b9d-bcbf-acd2aa07f619.png.webp?nolink&800 |}}
 +\\
 +//Beispiel einer Navigation mit ''<nav>'', ''<ul>'' und ''<li>'' umgesetzt. Ihr HTML-Code unterscheidet sich von dem hier gezeigten.//
  
 **Checkliste** **Checkliste**
Zeile 55: Zeile 69:
   * Gibt es pro Link ein ''a''-Element (nicht nur Text)?   * Gibt es pro Link ein ''a''-Element (nicht nur Text)?
   * Hat das Logo einen passenden ''alt''-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">'': **Aufgabe:** Ergänzen Sie in ''<section id="hero-section">'':
   * Textblock: ''h3'', ''h1'', ''p''   * Textblock: ''h3'', ''h1'', ''p''
Zeile 70: Zeile 88:
   * Ist die Struktur logisch lesbar, auch ohne CSS?   * Ist die Struktur logisch lesbar, auch ohne CSS?
  
---- 
  
 === 1.3 Hero-Bild === === 1.3 Hero-Bild ===
Zeile 98: Zeile 115:
   * Haben Sie einen sinnvollen ''alt''-Text?   * Haben Sie einen sinnvollen ''alt''-Text?
  
---- +===== 2) CSS: Grundlayout =====
- +
-===== 2) CSS danach: Grundlayout =====+
  
 === 2.1 Container zentrieren: ''.main-wrapper'' === === 2.1 Container zentrieren: ''.main-wrapper'' ===
Zeile 121: Zeile 136:
 } }
 </code> </code>
- 
---- 
  
 === 2.2 Header mit Flexbox === === 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>
 +
 +
 **Aufgabe:** Positionieren Sie Logo (links), Navigation (mitte) und Switch (rechts). **Aufgabe:** Positionieren Sie Logo (links), Navigation (mitte) und Switch (rechts).
  
Zeile 136: Zeile 160:
 </WRAP> </WRAP>
  
- 
---- 
  
 === 2.3 Navigation: Menu-Items als Flex-Reihe === === 2.3 Navigation: Menu-Items als Flex-Reihe ===
 **Aufgabe:** Lassen Sie die Menu-Items nebeneinander erscheinen (ohne Styling der Farben – das kommt in LU02). **Aufgabe:** Lassen Sie die Menu-Items nebeneinander erscheinen (ohne Styling der Farben – das kommt in LU02).
  
---- 
  
 === 2.4 Hero Section: 2-Spalten Flexbox === === 2.4 Hero Section: 2-Spalten Flexbox ===
 **Aufgabe:** Textblock links, Bild rechts – nebeneinander. **Aufgabe:** Textblock links, Bild rechts – nebeneinander.
  
---- 
  
 === 2.5 Bild soll responsiv schrumpfen === === 2.5 Bild soll responsiv schrumpfen ===
 **Aufgabe:** Das Bild soll proportional kleiner werden, wenn das Fenster kleiner wird. **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%> <WRAP center round box 80%>
Zeile 159: Zeile 185:
 </WRAP> </WRAP>
  
---- 
  
 === 2.6 Buttons: als Gruppe mit Flexbox === === 2.6 Buttons: als Gruppe mit Flexbox ===
 **Aufgabe:** Buttons nebeneinander, mit Abstand. (Details wie Farben/Fonts in LU02) **Aufgabe:** Buttons nebeneinander, mit Abstand. (Details wie Farben/Fonts in LU02)
  
----+{{:de:modul:m291:learningunits:lu01:aufgaben:screenshot_2026-01-25_at_23.57.10.png?nolink&400 |}} 
  
 === 2.7 Hamburger-Buttons (für LU01: ausblenden) === === 2.7 Hamburger-Buttons (für LU01: ausblenden) ===
Zeile 176: Zeile 202:
 </code> </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>+
  
 ==== Checkliste “LU01 fertig” ==== ==== Checkliste “LU01 fertig” ====
Zeile 199: Zeile 220:
   * Test: Browserfenster kleiner ziehen → Bild bleibt proportional   * 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''. 
-</WRAP> 
  
 ==== Ausblick (LU02 / LU03) ==== ==== Ausblick (LU02 / LU03) ====
  • de/modul/m291/learningunits/lu01/aufgaben/a_landingpage.1769380260.txt.gz
  • Zuletzt geändert: 2026/01/25 23:31
  • von gkoch