HTML & CSS Mega-Crashkurs

Alles erklärt wie in einem Buch, Schritt für Schritt

📖 Kapitel 1: HTML Grundlagen

HTML ist die Sprache, die deinem Browser sagt, wie Inhalte angezeigt werden. Die Grundstruktur einer HTML-Seite sieht so aus:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Titel der Seite</title>
</head>
<body>
  <h1>Überschrift</h1>
  <p>Das ist ein Absatz.</p>
</body>
</html>

Wichtige HTML-Tags:

Beispiel HTML:

<h1>Meine erste Seite</h1>
<p>Hallo Welt!</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Firefighter_turnout_gear.jpg/300px-Firefighter_turnout_gear.jpg" alt="Feuerwehr">
<a href="https://www.example.com">Beispiel-Link</a>

📖 Kapitel 2: CSS Grundlagen

CSS = Design. Damit bestimmst du Farben, Schriftarten, Abstände und Layouts.

Wichtige CSS-Eigenschaften:

Beispiel CSS:

body {
  background: lightblue;
  font-family: Arial, sans-serif;
  color: #333;
}

h1 {
  color: darkred;
  text-align: center;
}

p {
  font-size: 18px;
  line-height: 1.6;
}

📖 Kapitel 3: CSS Tricks

Buttons

.btn {
  background: crimson;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  transition: 0.3s;
}
.btn:hover {
  background: darkred;
  transform: scale(1.05);
}
Klick mich

Hover Boxen

.box {
  width: 100px;
  height: 100px;
  background: tomato;
  transition: 0.5s;
}
.box:hover {
  border-radius: 50%;
  background: gold;
}

Flexbox Layout

.flex-container {
  display: flex;
  gap: 15px;
  justify-content: space-around;
  flex-wrap: wrap;
}
Box 1
Box 2
Box 3

Grid Layout

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
1
2
3
4
5
6

Animationen

@keyframes drehen {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animated {
  width: 100px;
  height: 100px;
  background: orange;
  animation: drehen 3s infinite linear;
}

📖 Kapitel 4: Feuerwehr Seite (Komplettes Beispiel)

Freiwillige Feuerwehr Musterstadt

Ich bin bei der Feuerwehr, weil ich helfen will und Technik liebe.

Darum mag ich es:

CSS Erklärung:

.fire-header → roter Header für Feuerwehr-Feeling

.fire-box → weiße Boxen mit Schatten für Inhalte

.fire-img → Bild 300px breit mit rotem Rahmen