Update of exercises
Thomas Smits
parent
ed561caad6
commit
04afc357a0
|
|
@ -0,0 +1,74 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="container text-center">
|
||||||
|
<h1>Hello, world!</h1>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col col-lg-2 col-md-4 col-sm-6 col-12 col-xxl-1 ">
|
||||||
|
Column 1
|
||||||
|
</div>
|
||||||
|
<div class="col col-xxl-1 col-lg-2 col-md-4 col-sm-6 col-12">
|
||||||
|
Column 2
|
||||||
|
</div>
|
||||||
|
<div class="col col-xxl-1 col-lg-2 col-md-4 col-sm-6 col-12">
|
||||||
|
Column 3
|
||||||
|
</div>
|
||||||
|
<div class="col col-xxl-1 col-lg-2 col-md-4 col-sm-6 col-12">
|
||||||
|
Column 4
|
||||||
|
</div>
|
||||||
|
<div class="col col-xxl-1 col-lg-2 col-md-4 col-sm-6 col-12">
|
||||||
|
Column 5
|
||||||
|
</div>
|
||||||
|
<div class="col col-xxl-1 col-lg-2 col-md-4 col-sm-6 col-12">
|
||||||
|
Column 6
|
||||||
|
</div>
|
||||||
|
<div class="col col-xxl-1 col-lg-2 col-md-4 col-sm-6 col-12">
|
||||||
|
Column extra
|
||||||
|
</div>
|
||||||
|
<div class="col col-xxl-1 col-lg-2 col-md-4 col-sm-6 col-12">
|
||||||
|
Column extra
|
||||||
|
</div>
|
||||||
|
<div class="col col-xxl-1 col-lg-2 col-md-4 col-sm-6 col-12">
|
||||||
|
Column extra
|
||||||
|
</div>
|
||||||
|
<div class="col col-xxl-1 col-lg-2 col-md-4 col-sm-6 col-12">
|
||||||
|
Column extra
|
||||||
|
</div>
|
||||||
|
<div class="col col-xxl-1 col-lg-2 col-md-4 col-sm-6 col-12">
|
||||||
|
Column extra
|
||||||
|
</div>
|
||||||
|
<div class="col col-xxl-1 col-lg-2 col-md-4 col-sm-6 col-12">
|
||||||
|
Column extra
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col col-md-6 col-12">
|
||||||
|
(c) 2023 Christian Lidner
|
||||||
|
</div>
|
||||||
|
<div class="col col-md-6 col-12">
|
||||||
|
Porsche AG Zuffenhausen
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">Card title</h5>
|
||||||
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||||
|
<a href="#" class="btn btn-danger">Go somewhere</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -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.
|
||||||
|
|
@ -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** |
|
| 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** |
|
| 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** |
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue