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

Was Sie erwartet und was Sie mitbringen sollten

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

Gratismonat starten Für Ihr Team erwerben

Was Sie erwartet und was Sie mitbringen sollten

“

In diesem Kurs geht es um das Layouten per CSS, also um das Positionieren von Elementen am Bildschirm mit Techniken wie Media Queries, position, float, flexbox und grid. Damit erstellen Sie ein mehrspaltiges, responsives Layout für die Übungswebsite, und Sie werden lernen, wie eine Website, wie ein Layout auf allen Geräten eine gute Figur macht und auch navigierbar ist. Was sollten Sie mitbringen? Sie sollten HTML kennen und die Grundlagen von CSS. Idealerweise haben Sie die ersten beiden Teile dieser Kursreihe erfolgreich absolviert, aber das ist nicht zwingend notwendig. Weiterhin sollten Sie aktuelle Browser installiert haben und deren Entwicklertools kennen. Denn die werde ich häufig benutzen, um Dinge zu demonstrieren und zu zeigen. Sie sollten die Projektdateien heruntergeladen und auf Ihrem Rechner entpackt haben und einen leeren Übungsordner erstellt haben. Der muss nicht Übungsordner heißen. Und Sie können auch gerne im Laufe des Kurses mehrere davon erstellen. Aber die Projektdateien sollten Sie entpackt haben. Darin gibt es einen Ordner pro Kapitel und ein Medienlager, wo ein paar Bilder drin sind. Und für jeden Kapitelordner gibt es Unterordner für jeden Film. Manche haben ein a und ein e dahinter. a ist dann am Anfang des Films und e am Ende. Und Sie können, wenn Sie einen bestimmten Film durcharbeiten möchten, einfach die Inhalte des Ordners kopieren und im Übungsordner wieder einfügen. Außerdem benötigen Sie einen Editor. Welcher das ist, ist im Prinzip nicht wichtig. Ich verwende im Kurs Visual Studio Code, von Microsoft kostenlos verfügbar, ein richtig guter Editor. Und ich habe zwei Erweiterungen installiert. "German Language Pack", damit er auf Deutsch ist. Und die "Live Preview", die ich hier kurz zeigen möchte. Hier ist eine Datei. Und hier ist die Live-Preview. Dann sieht man sofort in Live und in Farbe, was man hier tut. Und das, was Sie im Editor eingeben, wird direkt in der Live-Vorschau angezeigt. Browser, Projektdateien und Editor, wenn Sie das alles zusammen haben, dann kann es losgehen mit den CSS-Layouts. Viel Spaß und viel Erfolg dabei.

Inhalt