Wir schauen uns an, wie man einen Pfad aufbaut, externe CSS Dateien einbindet und Pages verlinkt.
Mit diesem Wissen bauen wir eine erste Version eines Menüs und verlinken unsere Seiten.
Wir schauen uns das HTML Box Model genauer an und diverse Möglichkeiten, Boxen zu stylen.
tag-2-1: Erstelle eine Testseite und probiere verschiedene der gezeigten Möglichkeiten.
Style dein Menü
Wir schauen uns die verschiedenen Display Properties an.
Schaue dir die Übersicht unten (Default Verhalten) an. Baue eine Page mit 3 Sektionen, header, main, footer. Finde heraus, welche Elemente sich inline verhalten. Kannst du Elemente nebeneinander platzieren?
Baue dein Menü um, so dass die li Elemente nebeneinander stehen.
Die position Eigenschaft und die Auswirkung auf den Document Flow.
Das figure und figcaption Element.
tag-2-2.html Baut eine Seite, auf der ihr Bild und Text oder bloss verschiedene Bilder kombiniert und benutzt die unterschiedlichen position Eigenschaften für Überlagerungen und räumliche Tiefe. Stellt euch ein HTML Moodboard
an Bildern zusammen mit Inspiration von Landschaften oder Räumen, in denen ihr gerne sein würdet, wenn ihr euer Lied hört.
Wir schauen uns einige der Eigenschaften von und Möglichkeiten mit der background Property an.
tag-2-3.html Macht eine Kopie von tag-2-2.html und erweitert den Entwurf mit den background Properties. Spielt mit dem Gelernten und benutzt auch die Blend Modes.
Mehrspaltiges Layout? Flexbox!
Baut euer Menü zum Flexbox menü um und macht es sticky.