Flexboxen: Social Media Posts

HTML-Seite mit Social Media Posts
Social Media Posts
Social Media Posts

Erstellen Sie eine Seite mit einem typischen Aufbau von "Social Media"-Post. Orientieren Sie sich an der Abbildung und am unteren Vorgehen zur Erstellung der Layoutskizzen / der HTML-Struktur.

Das benutzte Profilbild finden Sie hier: profil.png.

Layoutskizze für HTML-Seite mit Social Media Posts
Social Media Posts - Layoutskizze
Layoutskizze für die Social Media Posts

Orientieren Sie sich an der Abbildung, um die Ebenen Ihrer HTML-Seite zu definieren. Überprüfen Sie nach jedem Schritt das Aussehen Ihrer Seite im Browser und fahren Sie mit dem nächsten Schritt erst fort, wenn Ihre Seitenstruktur stimmt.

Hinweis: Um die Boxen ohne Inhalte im Browser zu sehen, können Sie die CSS-Eigenschaften border und padding benutzen.

Betrachten Sie die Layoutskizze von außen nach innen und setzen Sie sie in derselben Reihenfolge in HTML um.

  1. Die dunkelblaue, äußere Box ist der erste Container für Ihre Seite.
  2. Dieser Container lässt sich im nächsten Schritt in vier "Zeilen" unterteilen (rote Boxen).
  3. Jede rote Box besteht aus zwei Spalten (grüne Boxen).
  4. Jede linke grüne Box besteht aus zwei Zeilen (violette Boxen).
  5. Jede rechte grüne Box besteht aus zwei Zeilen (türkisfarbene Boxen).
  6. Damit ist die Struktur der HTML-Seite definiert. In jede der innersten Boxen (violett, türkis) können jetzt die passenden Inhalte hinterlegt werden (graue Bilder / Texte in der Layoutskizze).