Projekt 1: Landingpage Hero Section (Light/Dark Mode) – LU01 (HTML + Grundlayout)

→ Vorwissen: UI-Elemente lesen (Figma → HTML)

• Sie bauen eine saubere HTML-Struktur mit header, nav, main, section.
• Sie gruppieren UI-Teile in sinnvolle Wrapper (z.B. .content-wrapper, .button-wrapper).
• Sie setzen ein Grundlayout mit Flexbox um (Header + 2-Spalten Hero).
• Sie nutzen relative Einheiten sinnvoll (%, vh, rem) und zentrieren einen Container mit max-width.

• Figma-Design + Assets (SVG/PNG)
• Starter-Template index.html (mit TODOs in LU01/LU02/LU03)
• Browser + DevTools + Live Server

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

• Logo als img einfügen (+ sinnvoller alt)
• Navigation als nav.menu mit ul > li > a
• Switch als Platzhalter einfügen (nur label + input type=„checkbox“)

Beispiel: Header-Grundgerüst (Sie passen Texte/Links an Ihr Design an):

<header>
  <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">
    <input id="theme-toggle" type="checkbox" />
  </label>
</header>

Checkpoint (2 Min.)

• Ist die Navigation eine Liste (ul/li)?
• Gibt es pro Link ein a-Element (nicht nur Text)?
• Hat das Logo einen passenden alt-Text?

—

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

• Textblock: h3, h1, p
• Buttons in .button-wrapper gruppieren
• Features/Infos in einer Gruppe (z.B. .info-wrapper)

Beispiel: Hero-Content-Wrapper

<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>

Checkpoint (2 Min.)

• Sind Buttons in einem Wrapper gruppiert?
• Sind “Features” in einem Wrapper gruppiert?
• Ist die Struktur logisch lesbar, auch ohne CSS?

—

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

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"
/>

Checkpoint (1 Min.)

• Stimmt der Pfad (./resources/…), und lädt das Bild?
• Haben Sie einen sinnvollen alt-Text?

—

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

Beispiel:

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

—

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

Beispiel:

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

—

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

.menu ul {
  list-style: none;
  display: flex;
  gap: 24px;
}

—

Aufgabe: Textblock links, Bild rechts – nebeneinander.

#hero-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 48px;
}

—

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

.hero-image {
  max-width: 100%;
  height: auto;
  width: 520px; /* Richtwert – gemäss Figma */
}

—

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

.button-wrapper {
  display: flex;
  gap: 16px;
  margin-top: 24px;
}

—

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

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

—

• HTML: Logo + Nav-Liste + Switch-Platzhalter sind vorhanden
• HTML: Hero-Text, Button-Gruppe, Info-Gruppe sind vorhanden
• HTML: Bild mit srcset lädt korrekt
• CSS: .main-wrapper zentriert mit max-width
• CSS: Header als Flexbox (3 Bereiche verteilt)
• CSS: Hero als Flexbox (2 Spalten)
• CSS: Bild schrumpft responsiv (max-width:100%, height:auto)
• Keine Fehler in der Console

• Öffnen Sie DevTools → Console (gibt es rote Fehlermeldungen?)
• Prüfen Sie Pfade zu ./resources/… (404?)
• Prüfen Sie im Elements-Tab: stimmen Klassen/IDs genau?
• Test: Browserfenster kleiner ziehen → Bild bleibt proportional

• LU02: Google Font, Farbvariablen (':root'), Typografie, Link-/Button-States, Media Query
• LU03: Favicon, Icons via ::before, Switch-Styling + JS für Theme-Toggle