assignments/Assignment_003/readme.md

Fanseite responsive machen

📆 Fällig: 05.11.2023 📆

Eine bereits gestylte Seite wird mithilfe von Bootstrap responsive gemacht.

Lernziele

• Responsive-Design
• CSS-Breakpoints
• Verwendung existierender Frameworks (Bootstrap)

HTML-Seite mit Styling

Ein Mangel Ihrer Fanseite wird sein, dass sie auf mobilen Geräten oder Bildschirmen unterschiedlicher Größe nicht gleich gut aussieht. Aus diesem Grund werden Sie die Seite mithilfe eines existierenden CSS-Frameworks responsive machen.

Laden Sie hierzu Bootstrap von https://getbootstrap.com/ herunter und binden Sie die CSS-Dateien in Ihr Projekt ein. Betrachten Sie vor allem die Möglichkeiten zum Responsive-Webdesign, die Ihnen von Bootstrap geboten werden. Dies bedeutet insbesondere, dass Ihre Fanseite auch auf mobilen Geräten gut angezeigt wird und sich das Layout entsprechend anpasst.

Für das individuelle Styling Ihrer Seite erstellen Sie eine eigene CSS-Datei, die Sie ebenfalls, zusätzlich zu Bootstrap, einbinden. In dieser Datei wandeln Sie grundlegende Bootstrap-Styles so ab, dass die Seite wieder genauso peppig und gut aussieht, wie die gestylte Version ohne Bootstrap.

Abgabe

Verwenden Sie das Ihnen zugeordnete Git-Repository und legen Sie für jedes Assignment einen Ordner an: Assignment_01, Assignment_02, ...

Innerhalb des Ordners für das Assignment legen Sie bitte folgende drei Ordner an:

• src: Der Source-Code, der nicht im Webroot liegen soll / kann
• doc: Zusätzliche Dokumentation, die Sie zur Verfügung stellen wollen
• site: Die fertige Webanwendung. Dieser Ordner ist das Webroot der Anwendung

Legen Sie die Lösung so in Ihrem Repository ab, dass man das Repository einfach clonen kann, dann in den Ordner site geht und dort einen Webserver (z.B. php -S localhost:8080) starten kann. Die Seite sollte dann korrekt aufrufbar sein.