Projekt 1: Landingpage Hero Section – LU01 (HTML + Grundlayout)

Landing Page preview
Projektziel (über mehrere LUs): Sie setzen eine Hero Section pixel-nah nach Figma um und bauen später einen Light/Dark-Mode Switch mit JavaScript.
Fokus LU01: Zuerst HTML-Struktur, danach CSS-Grundlayout (Container + Flexbox). Noch kein Feinschliff bei Fonts/Farben/Interaktionen.

Lernziele (LU01)

Material

Laden Sie hier das Material herunter: landing_page_alarado.zip

Wichtig: Halten Sie sich an die TODO-Markierungen im Template.
In LU01 machen Sie nur, was mit TODO in LU01 beschriftet ist. (Google Font, Favicon, Farben/Variablen und Hover-Styles kommen später.)

Schrittweiser Aufbau (LU01)

1) HTML zuerst: Struktur & Gruppen von Elementen

1.1 Header: Logo + Navigation + Switch-Platzhalter


Navigation Bar

Aufgabe: Bauen Sie den <header> gemäss Template auf.

Repetition: Semantische Grundstruktur

  1. header = Kopfbereich der Seite (Logo, Navigation, Controls)
  2. nav = Navigation (Links als Liste)
  3. main = Hauptinhalt (pro Seite 1×)
  4. section = thematisch zusammenhängender Abschnitt (z.B. Hero)

Mehr Infos zum <nav>-Tag finden Sie hier: MDN Nav-Tag


Beispiel einer Navigation mit <nav>, <ul> und <li> umgesetzt. Ihr HTML-Code unterscheidet sich von dem hier gezeigten.

Checkliste


Hero-Section mit Element-Gruppen

Aufgabe: Ergänzen Sie in <section id=„hero-section“>:

Checkliste

1.3 Hero-Bild

Aufgabe: Fügen Sie das Bild gemäss Template ein. Nutzen Sie srcset für 1x/2x (Retina).

Repetition: srcset kurz erklärt
Mit srcset kann der Browser je nach Bildschirmauflösung die passende Datei wählen (z.B. @2x).
Sie liefern mehrere Varianten – der Browser entscheidet.

Beispiel: Bild mit srcset 

<img
  class="hero-image"
  src="./resources/hero-image-simple-homepage.png"
  srcset="./resources/hero-image-simple-homepage.png 1x,
          ./resources/hero-image-simple-homepage@2x.png 2x"
  alt="Illustration zur Landingpage"
/>

Checkliste

2) CSS: Grundlayout

2.1 Container zentrieren: ''.main-wrapper''

Aufgabe: Setzen Sie den Hauptcontainer mittig und begrenzen Sie die Breite (gemäss Figma).

Repetition: Container-Zentrierung

  • max-width begrenzt die Breite
  • margin: 0 auto zentriert horizontal
  • padding sorgt für Innenabstand (damit Inhalt nicht am Rand klebt)

Beispiel: 

.main-wrapper {
  max-width: 1100px;   /* Richtwert – gemäss Figma anpassen */
  margin: 0 auto;
  padding: 24px;
}

2.2 Header mit Flexbox


Flexbox-Layout

Eine gute Übersicht zur Flexbox gibt es hier: CSS-Tricks: a guide to flexbox

Aufgabe: Positionieren Sie Logo (links), Navigation (mitte) und Switch (rechts).

Repetition: Flexbox Basics

  • display: flex → Elemente in einer Reihe
  • justify-content: space-between → links/mittig/rechts verteilen
  • align-items: center → vertikal zentrieren
  • gap → Abstand zwischen Items

Aufgabe: Lassen Sie die Menu-Items nebeneinander erscheinen (ohne Styling der Farben – das kommt in LU02).

2.4 Hero Section: 2-Spalten Flexbox

Aufgabe: Textblock links, Bild rechts – nebeneinander.

2.5 Bild soll responsiv schrumpfen

Aufgabe: Das Bild soll proportional kleiner werden, wenn das Fenster kleiner wird.

Landing Page responsive preview
Hinweis: Das echte Responsive-Layout (Media Query + Hamburger) machen Sie in LU02/LU03.

Repetition: Responsive Images

  • width: 100% → Bild füllt den Container
  • height: auto → Seitenverhältnis bleibt korrekt

2.6 Buttons: als Gruppe mit Flexbox

Aufgabe: Buttons nebeneinander, mit Abstand. (Details wie Farben/Fonts in LU02)

2.7 Hamburger-Buttons (für LU01: ausblenden)

Aufgabe: Im Desktop sollen Hamburger-Buttons unsichtbar sein (damit nichts “stört”). 

.hamburger-button,
.hamburger-button-close {
  display: none;
}

Checkliste “LU01 fertig”

Debugging-Checkliste

Ausblick (LU02 / LU03)