Kostenlose Tutorials für Anfänger

Appearance

Kapitel 12: Fortgeschrittene Praxisbeispiele ​

Praxis 5: Login-Seiten-Layout (Komplexes Beispiel) ​

Ziel ​

Eine vollständige Login-Seite mit Flexbox erstellen.

Schritt 1: HTML-Struktur ​

html
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login-Seite</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="login-container">
    <div class="login-card">
      <h2>Login</h2>
      <form class="login-form">
        <div class="form-group">
          <label for="email">E-Mail:</label>
          <input type="email" id="email" name="email" required>
        </div>
        <div class="form-group">
          <label for="password">Passwort:</label>
          <input type="password" id="password" name="password" required>
        </div>
        <div class="form-actions">
          <button type="submit" class="btn-login">Einloggen</button>
          <a href="#" class="forgot-password">Passwort vergessen?</a>
        </div>
      </form>
    </div>
  </div>
</body>
</html>

Schritt 2: CSS mit Flexbox ​

css
/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

/* Haupt-Container: Perfekte Zentrierung */
.login-container {
  display: flex;
  justify-content: center;  /* Horizontal zentrieren */
  align-items: center;      /* Vertikal zentrieren */
  min-height: 100vh;       /* Volle Bildschirmhöhe */
  padding: 20px;
}

/* Login-Karte */
.login-card {
  background-color: white;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 400px;  /* Maximale Breite */
}

.login-card h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

/* Formular-Gruppen */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  color: #555;
  font-weight: bold;
}

.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.form-group input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

/* Formular-Aktionen */
.form-actions {
  display: flex;
  justify-content: space-between;  /* Button links, Link rechts */
  align-items: center;
  margin-top: 30px;
}

.btn-login {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.btn-login:hover {
  background-color: #0056b3;
}

.forgot-password {
  color: #007bff;
  text-decoration: none;
  font-size: 14px;
}

.forgot-password:hover {
  text-decoration: underline;
}

Ergebnis ​

Desktop:

┌────────────────────────────────────┐
│                                    │
│       ┌──────────────────┐        │
│       │      Login        │        │
│       │                  │        │
│       │ E-Mail:          │        │
│       │ [_____________]  │        │
│       │ Passwort:         │        │
│       │ [_____________]  │        │
│       │                  │        │
│       │ [Einloggen] Passwort vergessen?│
│       └──────────────────┘        │
│                                    │
└────────────────────────────────────┘

Mobile (automatisch responsiv durch max-width und padding):

┌──────────────────┐
│      Login        │
│                  │
│ E-Mail:          │
│ [_____________]  │
│ Passwort:         │
│ [_____________]  │
│                  │
│ [Einloggen] Passwort vergessen?│
└──────────────────┘

Praxis 6: Responsives Layout (Anpassung an Mobile + PC) ​

Ziel ​

Ein Layout erstellen, das auf PC mehrere Spalten und auf Mobile eine Spalte anzeigt.

Schritt 1: HTML-Struktur ​

html
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsives Layout</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="header">
    <h1>Meine Webseite</h1>
    <nav class="navbar">
      <a href="#">Home</a>
      <a href="#">Über uns</a>
      <a href="#">Kontakt</a>
    </nav>
  </header>

  <main class="main-content">
    <article class="article">Hauptartikel</article>
    <aside class="sidebar">Seitenleiste</aside>
  </main>

  <footer class="footer">Fußzeile</footer>
</body>
</html>

Schritt 2: CSS (PC-Version) ​

css
/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;  /* Vertikales Haupt-Layout */
  min-height: 100vh;
}

/* Header */
.header {
  display: flex;
  justify-content: space-between;  /* Logo links, Nav rechts */
  align-items: center;
  padding: 20px;
  background-color: #333;
  color: white;
}

.navbar {
  display: flex;
  gap: 20px;
}

.navbar a {
  color: white;
  text-decoration: none;
}

/* Haupt-Inhalt */
.main-content {
  display: flex;
  flex: 1;  /* Nimmt restlichen Platz ein */
  padding: 20px;
  gap: 20px;
}

.article {
  flex: 3;  /* 3 Teile */
  background-color: white;
  padding: 20px;
  border-radius: 8px;
}

.sidebar {
  flex: 1;  /* 1 Teil */
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 8px;
}

/* Footer */
.footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 20px;
}

Ergebnis (PC):

┌────────────────────────────────────┐
│ Logo         Home Über Kontakt    │  ← Header (horizontal)
├────────────────────────────────────┤
│ Hauptartikel    │  Seitenleiste   │  ← Main (2 Spalten)
│                │                  │
├────────────────────────────────────┤
│          Fußzeile                 │  ← Footer
└────────────────────────────────────┘

Schritt 3: CSS (Mobile-Version mit Media Query) ​

css
/* Mobile-Version (unter 768px) */
@media (max-width: 768px) {
  .header {
    flex-direction: column;  /* Logo oben, Nav unten */
    gap: 10px;
  }
  
  .navbar {
    flex-direction: column;  /* Nav-Links untereinander */
    align-items: center;
  }
  
  .main-content {
    flex-direction: column;  /* Article und Sidebar untereinander */
  }
  
  .article, .sidebar {
    flex: none;  /* Keine Flex-Verteilung mehr */
    width: 100%;  /* Volle Breite */
  }
}

Ergebnis (Mobile):

┌──────────────────┐
│     Logo          │
│  Home            │
│  Über            │
│  Kontakt         │
├──────────────────┤
│  Hauptartikel    │  ← Article (volle Breite)
├──────────────────┤
│  Seitenleiste    │  ← Sidebar (volle Breite)
├──────────────────┤
│   Fußzeile       │
└──────────────────┘

Media Query Grundlagen ​

Was ist eine Media Query? ​

Definition: Eine Media Query ist eine CSS-Technik, die es erlaubt, bedingtes Styling basierend auf Geräteeigenschaften (wie Bildschirmbreite) anzuwenden.

Syntax:

css
@media (Bedingung) {
  /* CSS-Regeln, die nur wenn Bedingung erfüllt sind */
}

Häufige Breakpoints ​

GerätBreiteMedia Query
Mobile< 768px@media (max-width: 768px)
Tablet768px - 1024px@media (min-width: 768px) and (max-width: 1024px)
Desktop> 1024px@media (min-width: 1024px)

Beispiel: Drei Breakpoints ​

css
/* Standard (Mobile-First): */
.container {
  padding: 10px;
}

/* Tablet (ab 768px): */
@media (min-width: 768px) {
  .container {
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
  }
}

/* Desktop (ab 1024px): */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;  /* Zentrieren */
  }
}

Flexbox + Media Query Tipps ​

Tipp 1: Mobile-First Ansatz ​

Bedeutung:

  • Erstelle das Layout für Mobile zuerst (Standard-CSS)
  • Dann füge Media Queries für größere Bildschirme hinzu

Vorteil:

  • Bessere Performance auf Mobile-Geräten
  • EinfacheresCSS
css
/* Standard (Mobile): */
.container {
  display: flex;
  flex-direction: column;  /* Untereinander */
}

/* Tablet und größer: */
@media (min-width: 768px) {
  .container {
    flex-direction: row;  /* Nebeneinander */
  }
}

Tipp 2: flex-direction ändern ​

Häufiges Muster:

css
/* Mobile: Untereinander */
.container {
  display: flex;
  flex-direction: column;
}

/* Desktop: Nebeneinander */
@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }
}

Tipp 3: flex-wrap für Karten-Layouts ​

Häufiges Muster:

css
/* Karten immer flexibel */
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 1 0 100%;  /* Mobile: Volle Breite */
}

/* Tablet: 2 Karten pro Zeile */
@media (min-width: 768px) {
  .card {
    flex: 1 0 calc(50% - 20px);  /* 2 pro Zeile (mit gap) */
  }
}

/* Desktop: 3 Karten pro Zeile */
@media (min-width: 1024px) {
  .card {
    flex: 1 0 calc(33.333% - 20px);  /* 3 pro Zeile (mit gap) */
  }
}

Zusammenfassung ​

In diesem Kapitel hast du gelernt:

  • ✅ Komplexe Layouts wie Login-Seiten erstellen
  • ✅ Responsive Design mit Media Queries
  • ✅ Flexbox + Media Query Tipps (flex-direction ändern, flex-wrap verwenden)
  • ✅ Mobile-First Ansatz

Nächstes Kapitel: In Kapitel 13 lernen wir häufige Anfängerfehler und deren Behebung.

Übungsaufgaben ​

Aufgabe 12.1 ​

Erstelle eine Kontakt-Seite mit Formular. Das Formular soll perfekt zentriert sein (horizontaal und vertikal).

Aufgabe 12.2 ​

Erstelle ein responsives Layout mit Header, Main (2 Spalten auf Desktop, 1 Spalte auf Mobile) und Footer.

Aufgabe 12.3 ​

Erstelle ein Karten-Layout, das auf Mobile 1 Karte pro Zeile, auf Tablet 2 und auf Desktop 3 Karten pro Zeile anzeigt.

Aufgabe 12.4 ​

Erstelle eine Navigationsleiste, die auf Mobile ein Hamburger-Menü simuliert (Links untereinander), auf Desktop aber horizontal ist.

Frei für alle Anfänger

Copyright © 2026 Programmier-Tutorials