P 1.4 CSS Vertiefung
In dieser Aufgabe erweitern Sie wiederum Ihre Portofolie-Webseite aus der vorherigen Aufgabe.
(*) Beachten Sie für diesen letzten Schritt folgende Details:
- verwenden Sie mindestens 6 unterschiedliche komplexe Selektoren
- bauen Sie CSS Transitionen und/oder Animationen ein
- die Seiten sollen sich responsiv an die Bildschirmdimensionen anpassen (siehe unten)
- sie ist an mindestens 3 Bildschirmgrößen angepasst: Desktop (> 1024px), Tablet (600 - 1024px) und Mobil (< 600 px)
- in der kleinsten Ansicht sollten die Komponenten am besten die gesamte Bildschirmbreite einnehmen
- verwenden Sie mindestens 2 Media-Queries
- verwenden Sie passendes Flussverhalten – bevorzugt Flexible Box (flexbox) oder Grid Layout.
- stellen Sie außerdem natürlich sicher, dass das Hauptmenü und der Header allgemein auf allen Bildschirmgrößen gut verwendbar ist (implementieren Sie ggf. ein Burger-Menu)
Wir empfehlen Ihnen Ihre Seite so zu entwickeln, dass entweder Mobil oder Desktop die Standardansicht sind, und Sie die relevanten Auszeichnungen für die anderen beiden Ansichten überschreiben. Nochmal zur Erinnerung: Wer Code kopiert, macht irgendetwas falsch.
In vielen Browsern können Sie automatisch verschiedene Bildschirmgrößen testen. Schauen Sie in den Entwicklertools nach.