Selbststudium II: Styling & Responsives Design

Achtung

Diese Einheit kann zu jedem beliebigen Zeitpunkt begonnen werden.
Wenn Sie mit einem Termin bereits fertig sind, arbeiten Sie an dieser Aufgabe.
Schauen Sie sich folgendes Tutorial an um einen ersten Eindruck zu bekommen wie man mit CSS arbeitet. https://www.w3schools.com/css/
Die Ergebnisse müssen spätestens zur finalen Abnahme vorliegen!

Ziel dieser Einheit ist die Entwicklung eines Design Schemas für Ihre Web-Applikation mittels CSS, Media Queries und Flexbox. Hierzu setzen wir vor allem auf die Entwicklung eines responsiven Designs, bei welchem sich die in ihrem Projekt enthaltenen UI-Elemente in Abhängigkeit des Ausgabegerätes und der Viewportgröße derart anordnen bzw. darstellen, dass eine hohe User Experience (UX) gewährleistet ist. Außerdem sollen passende Schriften und Icons genutzt werden um die Seite ansprechender zu machen.

Hinweise

Sie können für das Design Ihres Shopsystems ein CSS-Framework wie Bootstrap oder Tailwind CSS verwenden, um ein besonders ausgefeiltes Design zu erhalten. Bitte beachten Sie jedoch, dass dies erstens nicht gefordert ist, und zweitens Sie in der Klausur nicht auf CSS-Frameworks zurückgreifen dürfen und stattdessen die CSS-Stilregeln "von Hand" erstellen müssen.
Wichtig: Falls sich Ihr Code nicht aktualisiert, leeren Sie den Browser-Cache, deaktivieren Sie das Caching im Network-Tab der Developer Tools (für localhost) oder hängen Sie beim Einbinden von JavaScript- oder CSS-Dateien nach Änderungen einen Query-Parameter (z. B. ?v=1.0, ?v=1.1 usw.) an.
```
<link rel="stylesheet" href="assets/css/style.css?v=1.0">
```

Aufgaben

Design-Schema

Entwickeln Sie ein ansprechendes Design für Ihre Anwendung.

Binden Sie dafür eine oder mehrere CSS-Dateien im <head> ein

   <link rel="stylesheet" href="assets/css/style.css">

Überlegen Sie sich zu diesem Zweck ein Design-Schema mit Farben, Schriftarten, Schriftgrößen, Abständen, Rändern, Ausrichtung, etc.

Schriften

Wählen Sie eine oder mehrere „schöne“ Schriften von https://fonts.google.com aus, laden Sie diese herunter und binden Sie die Dateien ein.
Verwenden Sie die Schriftarten anschließend in Ihrem Stylesheet.

Icons

Binden Sie eine Icon-Font-Bibliothek wie Font Awesome im <head> ein:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">

Verwenden Sie Icons an passenden Stellen wie z. B. Navigation, Warenkorb, Buttons oder Statusanzeigen:

<button type="submit">
    <i class="fa-solid fa-cart-shopping"></i>
    Bestellung abschicken
</button>

Responsives Layout

Entwickeln oder erweitern Sie Ihr Stylesheet so, dass die Darstellung auf unterschiedlichen Bildschirmgrößen und Geräten (z. B. Smartphone, Tablet, Desktop) funktioniert.
Nutzen Sie vorwiegend als Werkzeug Media Queries und Flexbox.
Passen Sie die Anordnung und Größe der Elemente dynamisch an die Viewportgröße und Ausrichtung (Hoch-/Querformat) an.
Testen Sie die responsive Darstellung mit den Web Developer Tools Ihres Browsers.

Animationen, Darkmode, Bilder & Barrierefreiheit (Freiwillig)

Achtung

Diese Aufgabe ist freiwillig und fließt nicht in die Bewertung ein.

Animationen

Experimentieren Sie mit Animationen, Transitions und Transforms und setzen Sie diese wo es Sinn macht ein.
Schauen Sie sich gern die folgende Bibliothek an: https://michalsnik.github.io/aos/.
Diese eignet sich gut, wenn Sie Scroll- und Initial-Load-Animationen einsetzen möchten und kann leicht via CDN in den <head> ihrer Seite eingebunden werden.

Darkmode

Ergänzen Sie Ihre Anwendung um einen einfachen Darkmode.
Der Darkmode muss nicht komplex sein. Es reicht aus, wenn sich Hintergrundfarbe und Schriftfarbe sichtbar ändern.
Speichern Sie die gewählte Darstellung in einem Cookie, damit die Einstellung nach dem Neuladen der Seite erhalten bleibt.
Überlegen Sie, wann das Cookie gesetzt, gelesen und bei Bedarf aktualisiert werden sollte.

Responsive Bilder

Wenn Ihre Bilder eine zu große Dateigröße haben, nutzen Sie das <picture>-Tag und liefern Sie je nach Bildschirmgröße optimierte Bilddateien aus.
Informieren Sie sich über das WebP-Bildformat und versuchen Sie, Bilder als WebP einzubinden.

Barrierefreiheit

Informieren Sie sich über ARIA-Attribute und überlegen Sie, an welchen Stellen diese in Ihrer Anwendung sinnvoll eingesetzt werden können.

Finaler Schritt: Performance & Qualität

Informieren Sie sich was genau Lighthouse ist und wie man es verwendet.
Testen Sie anschließend ihr Projekt und passen Sie ihre Webanwendung so an, dass Sie in jeder Metrik einen Score von ≥ 80 erreichen.

Beispielausgabe einer Lighthouse-Analyse

Meilenstein

Stand jetzt ist ein konsistentes Design-Schema inklusive responsivem Layout umgesetzt. Ihre Anwendung ist damit visuell ausgearbeitet und für unterschiedliche Geräte optimiert.

Ergebnisse

Erstellung eines Design Schemas mit ansprechender Optik
Umsetzung des Design Schemas durch valides CSS
Eine Schriftdatei eingebunden und benutzt
Font Awesome oder eine vergleichbare Icon-Font-Bibliothek eingebunden und Icons sinnvoll eingesetzt
Demonstration eines responsiven Webdesigns mit Media Queries und Flexbox.
Lighthouse Score ≥ 80 in jeder Metrik