Aufgabe:

  1. Öffne die Dateien index.html und style.css in deinem Editor.

  2. Finde im HTML: <header>, <main> und <footer>.

  3. Ändere den Header-Titel (<h1>) in etwas Nerdiges, z. B.:

    • „Demogorgon Alert!“ (Stranger Things)

    • „Avengers Assemble!“ (Marvel)

    • „Willkommen in Mittelerde“ (Herr der Ringe)

  4. Experimentiere mit der Hintergrundfarbe des Headers, damit du die Änderung sofort siehst.

Technische Umsetzung

1. Überschrift im HTML ändern

Öffne die Datei index.html.
Suche den <header>-Bereich. Darin befindet sich ein <h1>-Element, zum Beispiel:

<header id="header"> 
  <h1>Meine Website</h1> 
</header>

Ändere den Text zwischen <h1> und </h1>:

<h1>Demogorgon Alert!</h1>

2. Hintergrundfarbe des Headers im CSS ändern

Öffne die Datei style.css.
Suche nach dem CSS-Selektor für den Header, z. B.:

#header {
  background-color: lightgray;
}

Ändere die Farbe, z. B.:

#header { 
  background-color: #6a0dad; 
}

Wichtig:

Bevor deine Änderungen wirksam werden, musst du den Browser einmal neu laden. Klicke dafür auf folgendes Symbol im Browser oder drücke F5

Reload