32 lines
1.9 KiB
Markdown
32 lines
1.9 KiB
Markdown
|
# 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/](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.
|