Moderne Webseite - Schritt-für-Schritt Lernanleitung

1 HTML-Grundgerüst erstellen

Öffne deinen Editor (VS Code, Notepad++ oder einen beliebigen Texteditor). Erstelle eine neue Datei mit dem Namen meine-seite.html.

📝 Aufgabe: Tippe dieses Grundgerüst ab (nicht kopieren!):

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Meine erste moderne Webseite</title>
</head>
<body>
  <h1>Hallo Welt!</h1>
  <p>Das ist meine erste Webseite.</p>
</body>
</html>

Teste dich selbst: Speichere die Datei und öffne sie im Browser. Siehst du "Hallo Welt!"?
✅ Wenn ja → Weiter zu Schritt 2
❌ Wenn nein → Überprüfe die Rechtschreibung!

2 Bootstrap einbinden (für schönes Design)

Bootstrap macht deine Webseite automatisch schön und passend für Handy & PC.

📝 Aufgabe: Füge diese beiden Zeilen in deine Datei ein:

<!-- GANZ UNTEN vor </body> -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- Innerhalb des <head> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

Tipp: Die CSS-Zeile gehört in den <head>, die JS-Zeile ganz ans Ende vor </body>.

Die CSS-Zeile kommt NACH dem <title>. Die JS-Zeile kommt VOR dem </body>.

3 Dark Mode einbauen

Jetzt wird es spannend! Wir bauen einen Button, der die Farbe der ganzen Seite wechselt.

📝 Aufgabe 1: Füge diesen Button irgendwo in den <body> ein:

<button id="darkModeBtn">🌙 Dark Mode</button>

📝 Aufgabe 2: Füge diesen CSS-Code in einen <style>-Bereich im <head> ein:

body.dark-mode {
  background-color: #121212;
  color: white;
}

📝 Aufgabe 3: Füge dieses JavaScript (ganz unten vor </body>) ein:

<script>
const btn = document.getElementById('darkModeBtn');
btn.addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');
  if(document.body.classList.contains('dark-mode')) {
    btn.innerHTML = '☀️ Light Mode';
  } else {
    btn.innerHTML = '🌙 Dark Mode';
  }
});
</script>

Teste es: Klicke auf deinen Dark Mode Button. Wechselt die Farbe? Wenn ja → Super gemacht! 🎉

Häufige Fehler:
- Die ID im Button muss genau "darkModeBtn" heißen
- Das <script> muss NACH dem Button stehen
- Die CSS-Klasse heißt "dark-mode" (mit Bindestrich)

4 "Nach oben"-Button

Ein Button, der erscheint, wenn man runterscrollt – und beim Klick sanft nach oben bringt.

📝 Aufgabe 1: Füge diesen Button ein:

<button id="scrollTopBtn" style="display:none; position:fixed; bottom:20px; left:20px;">⬆️ Nach oben</button>

📝 Aufgabe 2: Ergänze dein JavaScript um diesen Code:

const scrollBtn = document.getElementById('scrollTopBtn');

window.addEventListener('scroll', () => {
  if(window.scrollY > 300) {
    scrollBtn.style.display = 'block';
  } else {
    scrollBtn.style.display = 'none';
  }
});

scrollBtn.addEventListener('click', () => {
  window.scrollTo({ top: 0, behavior: 'smooth' });
});

Teste es: Scrolle nach unten – erscheint der Button? Klicke darauf – scrollt er sanft nach oben?

5 Animationen beim Scrollen (AOS)

Mit der AOS-Bibliothek kannst du Elemente animieren, wenn sie ins Blickfeld kommen.

📝 Aufgabe 1: Füge im <head> diese Zeilen ein:

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

📝 Aufgabe 2: Starte AOS mit diesem Code (in dein <script>):

AOS.init({ duration: 800, once: true });

📝 Aufgabe 3: Füge zu einem Element deiner Wahl data-aos="fade-up" hinzu.

<h2 data-aos="fade-up">Über mich</h2>

Probiere verschiedene Animationen aus:
fade-up, fade-down, zoom-in, flip-left, slide-right

6 Hover-Effekt für Karten

Wenn die Maus über eine Karte fährt, soll sie sich anheben.

📝 Aufgabe: Füge diesen CSS-Code zu deinem <style> hinzu:

.card-hover {
  transition: transform 0.3s, box-shadow 0.3s;
}
.card-hover:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 25px -12px rgba(0,0,0,0.2);
}

Erstelle dann eine Karte mit dieser Klasse:

<div class="card-hover p-4 shadow">
  <h3>Mein Projekt</h3>
  <p>Eine tolle Beschreibung</p>
</div>

Teste es: Fahre mit der Maus über die Karte. Bewegt sie sich nach oben? Wenn ja → Perfekt!

7 Schräger Header

Dein Header soll unten eine schräge Kante haben – das sieht modern aus!

📝 Aufgabe: Füge diese CSS-Regel für deinen Header ein:

header {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

Die Zahlen erklärt:
polygon(oben-links, oben-rechts, unten-rechts, unten-links)
100% 85% bedeutet: 100% nach rechts, 85% nach unten → das erzeugt die Schräge!

Versuche polygon(0 0, 100% 0, 100% 90%, 0 100%) oder polygon(0 0, 100% 0, 80% 100%, 0 100%) – siehst du den Unterschied?

8 Icons mit Font Awesome

Mit Icons wird deine Seite viel schöner! Font Awesome bietet hunderte kostenlose Icons.

📝 Aufgabe 1: Füge im <head> diese Zeile ein:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

📝 Aufgabe 2: Füge irgendwo auf deiner Seite ein Icon ein:

<i class="fas fa-heart"></i> Das ist mein Herz-Icon

Weitere Icons findest du hier:
https://fontawesome.com/icons (Achte auf "free" Icons!)

⭐ Deine eigene Challenge

Jetzt bist du dran! Baue deine eigene Seite mit diesen Anforderungen:

Meine Webseite muss haben:

☐ Dark Mode Button (funktioniert!)
☐ "Nach oben"-Button (erscheint beim Scrollen)
☐ Mindestens 2 verschiedene AOS-Animationen (z.B. fade-up, zoom-in)
☐ Eine Karte mit Hover-Effekt (hebt sich an)
☐ Einen Header mit schräger Kante (clip-path)
☐ Mindestens 3 verschiedene Icons (Font Awesome)
☐ Einen Bereich "Über mich" mit deinem Namen und deinen Hobbys

🎯 Ziel: Erstelle eine fertige Webseite, die du deinen Freunden oder deinem Lehrer zeigen kannst!

❓ Hilfe bei Fehlern

Mein Dark Mode funktioniert nicht!
→ Prüfe, ob der Button die ID darkModeBtn hat und das Script NACH dem Button steht.

Meine Animationen werden nicht angezeigt!
→ Hast du AOS.init() aufgerufen? Stehen die Bibliotheken im <head>?

Der Scroll-Button erscheint nicht!
→ Scrolle wirklich mehr als 300 Pixel runter. Prüfe, ob das Script window.scrollY verwendet.

Icons zeigen Kästchen an!
→ Die Font-Awesome-Link-Zeile fehlt oder ist falsch geschrieben.

Deine erste moderne Webseite

Das wirst du heute bauen

Dark Mode

Scroll-Button

Animationen

Schräger Header

Schritt-für-Schritt Anleitung