↑
📋 Aufgaben-Training📱 Profil-Design✅ Browser basiert

CSS Übungsaufgaben Woche 3

Strukturierte Lernaufgaben zum Aufbau eines Social-Media Profil-Headers. In dieser Woche baust du Schritt für Schritt einen vollständigen Instagram-ähnlichen Profil-Header mit Flexbox, Buttons und Layout-Techniken.

📱 Tag 1Profil-1
Default
Dark
Mono
Blue
Modern

So verwendest du diese Aufgaben-App

  1. Öffne dein eigenes Projekt mit index.html und style.css im Editor.
  2. Öffne diese HTML-Datei parallel im Browser.
  3. Arbeite Tag für Tag und Karte für Karte durch.
  4. Übernimm das jeweilige Prinzip oder das Beispiel in dein Projekt.
  5. Prüfe danach dein Ergebnis direkt im Browser und hake die Aufgabe ab.

Was du in Woche 3 baust

Du baust einen vollständigen Social-Media Profil-Header – ähnlich wie auf Instagram. Schritt für Schritt entsteht ein professionelles Layout mit Flexbox, Buttons, Statistiken und einem runden Profilbild.

Was du in Woche 3 lernst

  • wie du Flexbox für horizontale Layouts einsetzt
  • wie du gleichmäßige Statistik-Blöcke aufbaust
  • wie du Primary- und Secondary-Buttons gestaltest
  • wie du ein rundes Profilbild mit CSS erzeugst
  • wie du ein komplexes Profil-Layout strukturierst
📱 Tag 1

Profil-1

Aufbau eines Social-Media Profil-Headers (Instagram-like)

🎯 Ziel: Du baust Schritt für Schritt einen vollständigen Social-Media Profil-Header auf. Am Ende entsteht ein professionelles Layout mit Profilbild, Username, Statistiken, Bio und Buttons – alles mit Flexbox und modernem CSS.
1.1

Erklärung: Erstelle eine horizontale Zeile, die den Benutzernamen und optional ein Verifizierungs-Badge nebeneinander anzeigt. Nutze Flexbox, damit beide Elemente auf einer Linie bleiben und vertikal zentriert sind.

Beispiel – HTML
<div class="username-row">
  <span class="username">max_mustermann</span>
  <span class="badge">✓</span>
</div>
Beispiel – CSS
.username-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.username {
  font-size: 1.2rem;
  font-weight: 600;
}
.badge {
  background: #3897f0;
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
}

✅ Akzeptanz: Username und Badge stehen nebeneinander auf einer Linie und sind vertikal zentriert.

1.2

Erklärung: Baue eine Zeile mit drei gleichmäßigen Blöcken für Posts, Follower und Following. Jeder Block zeigt eine Zahl und eine Beschriftung untereinander. Nutze Flexbox mit flex: 1 für gleichmäßige Breite.

Beispiel – HTML
<div class="stats-row">
  <div class="stat-item">
    <span class="stat-number">42</span>
    <span class="stat-label">Posts</span>
  </div>
  <div class="stat-item">
    <span class="stat-number">1.2K</span>
    <span class="stat-label">Follower</span>
  </div>
  <div class="stat-item">
    <span class="stat-number">380</span>
    <span class="stat-label">Following</span>
  </div>
</div>
Beispiel – CSS
.stats-row {
  display: flex;
  gap: 0;
}
.stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stat-number {
  font-size: 1.1rem;
  font-weight: 700;
}
.stat-label {
  font-size: 0.85rem;
  color: #666;
}

✅ Akzeptanz: Drei gleichmäßige Blöcke mit Zahl und Beschriftung sind nebeneinander sichtbar.

1.3

Erklärung: Erstelle einen Bio-Bereich mit mehreren Textzeilen: einem fett gedruckten Namen, einer kurzen Beschreibung und optional einem Link. Die Zeilen stehen untereinander (flex-direction: column).

Beispiel – HTML
<div class="bio">
  <span class="bio-name">Max Mustermann</span>
  <span class="bio-desc">Frontend Developer 🚀</span>
  <span class="bio-desc">Ich lerne HTML, CSS und JavaScript.</span>
  <a href="#" class="bio-link">🔗 meine-webseite.de</a>
</div>
Beispiel – CSS
.bio {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
}
.bio-name {
  font-weight: 700;
  font-size: 0.95rem;
}
.bio-desc {
  font-size: 0.9rem;
  color: #333;
}
.bio-link {
  font-size: 0.9rem;
  color: #3897f0;
  text-decoration: none;
}

✅ Akzeptanz: Name, Beschreibung und Link stehen untereinander und sind klar lesbar.

1.4

Erklärung: Erstelle zwei Buttons nebeneinander: einen Primary-Button (Follow) und einen Secondary-Button (Message). Beide sollen denselben Platz einnehmen (flex: 1) und einen Hover-Effekt haben.

Beispiel – HTML
<div class="btn-row">
  <button class="btn btn-primary">Folgen</button>
  <button class="btn btn-secondary">Nachricht</button>
</div>
Beispiel – CSS
.btn-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.btn {
  flex: 1;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}
.btn-primary {
  background: #3897f0;
  color: white;
}
.btn-secondary {
  background: #f0f0f0;
  color: #333;
  border: 1px solid #dbdbdb;
}
.btn:hover {
  opacity: 0.85;
}

✅ Akzeptanz: Follow und Message stehen nebeneinander, haben unterschiedliche Stile und reagieren auf Hover.

1.5

Erklärung: Baue das Gesamt-Layout des Profil-Headers: Links das runde Profilbild, rechts der gesamte Inhalt (Username, Statistiken, Bio, Buttons). Nutze Flexbox mit flex-direction: row und mache das Bild mit border-radius: 50% rund.

Beispiel – HTML
<div class="profile-header">
  <div class="profile-image-wrap">
    <img
      src="https://picsum.photos/100"
      alt="Profilbild"
      class="profile-image"
    />
  </div>
  <div class="profile-info">
    <!-- Username-Zeile, Statistiken, Bio, Buttons -->
  </div>
</div>
Beispiel – CSS
.profile-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
  padding: 20px;
  max-width: 600px;
}
.profile-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #dbdbdb;
}
.profile-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
💡 Tipp: Kombiniere alle vorherigen Aufgaben in diesem Layout. Das Profilbild ist links, rechts kommen Username-Zeile, Statistiken, Bio und Buttons untereinander.

✅ Akzeptanz: Das Profilbild ist links rund dargestellt, rechts daneben stehen alle Profil-Informationen in einer sauberen Spalte.