Workshop: CSS-Layouts – Responsive Design mit Grid, Flexbox und Co.

Dieser Workshop zum Thema »Responsive CSS Layouts« vermittelt Frontend-Teams einen Überblick über brandneue und etablierte CSS-Techniken. Wir sorgen für eine barrierefreie Code-Basis und erstellen flexible und robuste UI-Komponenten und Web-Layouts.

Kurzbeschreibung

Es war nie einfacher responsive und semantisch korrekte Weblayouts zu erstellen! Neue CSS-Techniken wie Grid, Flexbox, Logical Properties oder Container Queries ergänzen etablierte Lösungen wie die Positionierung mittels float oder die display-Eigenschaft. Und man muss sich nicht einmal für eine Layouttechnik entscheiden: Moderne CSS-Layouts nutzen verschiedene Techniken in Kombination und machen sich die Stärken der jeweiligen Ansätze zunutze. Somit entstehen flexible Komponenten und robuste Layouts die auf jeder Bildschirmgrösse eine gute Figur abgeben.

In diesem Workshop werden Sie anhand zahlreicher, in sich abgeschlossener Übungen einzelne Website-Komponenten sowie ganze Seitenlayouts entwickeln. Der Fokus liegt stärker auf der flexiblen Architektur des Layouts und weniger auf der ästhetisch detaillierten Ausgestaltung mit Verläufen, Farben, Icons etc. 

Nach diesem Workshop sind sie in der Lage, angelieferte Layouts schnell und solide umzusetzen, schnelle Klick-Dummies herzustellen und bestehende Websites Stück für Stück zu modernisieren.

Agenda des CSS-Layout-Workshops

Wir erstellen für jede Schulung eine maßgeschneiderte Agenda. Die hier gelisteten Themen werden häufig gewünscht bzw. sind aus unserer Sicht relevant. Nach dem Vorab-Gespräch werden die Themen und Schwerpunkte individuell auf das jeweilige Team bzw. Projekt angepasst.

• Block- ,Inline- & Inline-Block-Elemente verstehen und einsetzen
• Floating, float-Basierte Layouts und flow-root
• Das CSS-Boxmodell verstehen und manipulieren – box-sizing, background-clip & Co.
• Die CSS display-Eigenschaft verstehen und einsetzen
• Die CSS position-Eigenschaft verstehen und einsetzen
• Logical Properites
• Layouts und Komponenten mit Flexbox aufbauen
• Layouts und Komponenten mit CSS Grid aufbauen
• Responsive Layouts mit Media Queries erstellen
• Intrinsische Layouts ohne Media Queries erstellen
• Container Queries
• Die transform-Eigenschaft verstehen und einsetzen
• Mit CSS Shapes das Floating-Verhalten optimieren
• Viewport- und Inhaltsabhängige Einheiten (vw, cqw, ch etc.)

Dozent