HTML und CSS

Abschnitt 3

Eine eigene Webseite

0 von 2 Übungen erledigt

Das Schlussprojekt

Erstellen Sie eine eigene Webseite zu einem Thema, das Sie interessiert. Die Seite soll alles enthalten, was Sie in diesem Kapitel gelernt haben.

  1. Die Seite ist mit <header>, <nav>, <main> und <footer> sinnvoll strukturiert.
  2. Die ganze Gestaltung steht in einer externen Datei style.css. In der HTML-Datei kommt kein style-Attribut vor.
  3. Die Navigationsleiste ist mit Flexbox umgesetzt und bleibt beim Scrollen oben sichtbar.
  4. Es gibt mindestens drei Abschnitte mit einer eigenen ID, auf die die Navigation verlinkt.
  5. Mindestens ein Abschnitt stellt ein Bild neben einem Text dar (Grid-Layout).
  6. Alle Links und Knöpfe verändern ihr Aussehen bei :hover und bei :focus. Der Übergang ist mit einer transition weich gestaltet.
  7. Die Seite enthält mindestens eine Klasse, die auf mehreren Elementen verwendet wird.

Hinweis: Prüfen Sie Ihre Seite am Schluss unter validator.w3.org. Sie sollte ohne Fehlermeldung durchlaufen.

Zum Abgeben

Diese Werkbank ist grösser als die anderen und ist Ihr Arbeitsplatz für das Projekt. Nutzen Sie den Knopf Vollbild, um mehr Platz zu haben, und Herunterladen auf beiden Reitern, um am Schluss index.html und style.css abzugeben.

Speichern Sie die beiden Dateien in denselben Ordner. Dann funktioniert das <link rel="stylesheet" href="style.css"> auch auf Ihrem Computer.

Woran Sie sich orientieren können

Zu dieser Übung gibt es keinen Lösungsvorschlag – die Seite soll Ihre eigene sein. Die folgenden Bausteine aus dem Kapitel decken aber alle sieben Anforderungen ab:

Anforderung Nachschlagen
Struktur mit header, nav, main, footer Webseite strukturieren, Übung 3.06
Gestaltung in einer externen Datei Zusammenspiel von HTML und CSS, Übung 3.15
Navigationsleiste mit Flexbox, beim Scrollen sichtbar Das Flexbox-Modell, Übung 3.36
Abschnitte mit IDs, Navigation verlinkt darauf IDs, Übung 3.13
Bild neben Text Das Grid-Layout, Übung 3.32
:hover, :focus und transition Pseudo-Klassen, CSS-Animationen, Übung 3.20
Eine Klasse auf mehreren Elementen Klassen, CSS-Klassen, Übung 3.14

Arbeiten Sie das Online-Tutorial durch.

Wie weiter?

Dieses Kapitel hat nur einen Bruchteil von HTML und CSS behandelt. Die folgenden Adressen sind gute Ausgangspunkte, wenn Sie weitermachen wollen.