Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

Dies ist das Repository für den LinkedIn Learning Kurs Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid`. Den gesamten Kurs finden Sie auf LinkedIn Learning.

In seiner Kursreihe vermittelt Ihnen Peter Müller das gesamte Grundwissen, um moderne Webseiten erstellen und gestalten zu können - Sie müssen dazu über keinerlei Vorkenntnisse verfügen. Lernen Sie in dritten Teil, wie sich per CSS responsive Layouts erstellen lassen. Traditionelle Layout-Techniken wie position und float werden dabei ebenso vorgestellt wie Media Queries und die Layout-Module Flexbox und CSS Grid. Mit Hilfe von Challenge/Solution-Einheiten am Ende der einzelnen Kapitel können Sie das Erlernte sofort testen und Ihre Lösung auch gleich mit der angebotenen Solution vergleichen.

Die Projektdateien

Die Projektdateien bestehen aus insgesamt neun Ordnern:

• Die Ordner k01 bis k08 repräsentieren die Kapitel des Kurses. In jedem Kapitelordner gibt es pro Film einen oder zwei Unterordner, die die eigentlichen Übungsdateien enthalten.
• Der Ordner medienlager enthält die im Kurs verwendeten Grafiken.

Viele Filme haben einen Anfangs- und einen Ende-Ordner

Die Kapitelordner haben Unterordner, die nach dem Schema kapitelnummer_filmnummer mit den Filmen korrespondieren. So enthält der Unterordner 01_01 die Übungsdateien für den ersten Film im ersten Kapitel.

Für viele Filme gibt es zwei Ordner:

• einen Anfangs-Ordner, z. B. 01_04a
• einen Ende-Ordner, z. B. 01_04e

Der Ordner 01_04a enthält also die Übungsdateien wie sie am Anfang des Films benötigt werden, der Ordner 01_04e zeigt die Übungsdateien wie sie am Ende des Films sein sollten.

Installation und Nutzung

1. Laden Sie die Übungsdateien als ZIP-Datei auf Ihren Computer:
   • Klicken Sie auf die grüne Schaltfläche Code.
   • Wählen Sie den Befehl Download ZIP.
2. Entpacken Sie die ZIP-Datei auf Ihrem Computer.
3. Kopieren Sie die Übungsdateien aus dem gewünschten Unterordner in einen Übungsordner.

Um die Übungsdateien auf Ihrem Computer sinnvoll nutzen zu können benötigen Sie einen Editor wie z. B. Visual Studio Code und einen oder mehrere Browser.

Viel Spaß mit dem Kurs und den Übungsdateien!

Autor

Peter Müller
Website des Autors
Website zum Kurs

Sehen Sie sich andere Kurse des Autors auf LinkedIn Learning an.