diff --git a/Assignment_003/index.html b/Assignment_003/index.html new file mode 100644 index 0000000..70f5d49 --- /dev/null +++ b/Assignment_003/index.html @@ -0,0 +1,74 @@ + + + + + + + + + + + +
+

Hello, world!

+ +
+
+ Column 1 +
+
+ Column 2 +
+
+ Column 3 +
+
+ Column 4 +
+
+ Column 5 +
+
+ Column 6 +
+
+ Column extra +
+
+ Column extra +
+
+ Column extra +
+
+ Column extra +
+
+ Column extra +
+
+ Column extra +
+
+
+
+ (c) 2023 Christian Lidner +
+
+ Porsche AG Zuffenhausen +
+
+
+
+
+
Card title
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+ Go somewhere + +
+
+
+
+ + + diff --git a/Assignment_003/readme.md b/Assignment_003/readme.md new file mode 100644 index 0000000..7e25d81 --- /dev/null +++ b/Assignment_003/readme.md @@ -0,0 +1,32 @@ +# 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. \ No newline at end of file diff --git a/readme.md b/readme.md index facd9de..ac1d788 100644 --- a/readme.md +++ b/readme.md @@ -14,3 +14,4 @@ Hier finden Sie die wöchentlichen Assignments für die Vorlesung Webbasierte Sy |----|------------|-----------------------------------------------------------|----------------| | 1. | 09.10.2023 | [Fanseite ohne Styling](Assignment_001/readme.md) | **15.10.2023** | | 2. | 16.10.2023 | [Styling der Fanseite mit CSS](Assignment_002/readme.md) | **22.10.2023** | +| 3. | 23.10.2023 | [Fanseite responsive machen](Assignment_003/readme.md) | **05.11.2023** |