Workshop: Responsive Layouts mit CSS

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

Kurzbeschreibung

Es war nie einfacher responsive und semantisch korrekte responsive Weblayouts zu erstellen! 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 auf der flexiblen Architektur des Layouts und nicht auf der ästhetisch detaillierten Ausgestaltung mit Verläufen, Farben, Icons etc. 

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

Themen unseres Workshops zu responsiven CSS Layouts

Die folgende Inhalte sind unsere Empfehlung für einen fundierten Einstieg in das Thema bzw. werden häufig gewünscht. Der Umfang beträgt, abhängig von den Vorkenntnissen und dem Anteil praktischer Übungen, meist zwischen 8h – 24h. Gerne passen wir die Agenda auf Ihre individuellen Anforderungen hin an, bzw. beziehen aktuelle Praxisprojekte mit ein. Wir stimmen uns dazu im Vorfeld der Schulung persönlich mit Ihnen ab.

CSS Layout Grundlagen

• HTML Dokument Flow (Block-Elemente, Inline-Elemente etc.)
• CSS Box Model
• CSS Float
• CSS Display Eigenschaft (block, inline, inline-block etc.)
• CSS Position Eigenschaft (static, relative, absolute etc.)

CSS Layout-Modelle und Architektur

• CSS Flexbox
• CSS Grid
• CSS Logical Properties
• CSS Transform
• CSS Pseudoelemente

Responsive Design & Intrinsic Design

• Responsive Design 2010 – heute
• Relativ zum Viewport gestalten
• Responsive Web Typografie
• Flexible Gestaltungsraster und Spacing
• Breakpoints, Mikro und Makro Layouts
• CSS Media Queries
• Mobile First
• Intrinsic Design
• CSS Container Queries

Dozent