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 folgenden Inhalte sind unsere Empfehlung für einen fundierten Einstieg in das Thema bzw. werden häufig angefragt. 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

Jonas Hellwig ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Feedback zu unseren Schulungen

Wir bedanken uns für die tolle Schulung. Es wurde uns wirklich viel gezeigt, was wir so noch nicht wussten oder nicht richtig angewendet haben. Wir freuen uns schon darauf, unsere nächsten Projekte auf eine neue und ordentlichere Art anzugehen :-).

Juli 2026, Emily Klassen, ahorn. gmbh – agentur für gestaltung und medienproduktion
Wir haben ein klassisches Kreativteam auf Figma geschult bekommen – keine leichte Aufgabe, aber Jonas als Trainer hat das souverän gemacht. Er versteht es, die beiden Welten Kreation und Development mit fundiertem Hintergrundwissen zu verbinden sowie die Vor- und Nachteile verschiedener Workflows aufzuzeigen. Er konnte wirklich jede der Fragen aus dem Team immer gut und plausibel erklären. Das Team ist nun ready for Figma.

Juni 2026, Kai Baumann, Creative Director, Olixir
Ich kann die Online-Schulungen der Kulturbanausen absolut empfehlen. Dieses Team weiß einfach, wovon es spricht, und kann sein Wissen auf Augenhöhe vermitteln. Ich, als Webdesignerin, habe in den 2 Tagen Workshop meine Fähigkeiten im Umgang mit Figma erheblich verbessern können und wirklich wertvolle Impulse für einen besseren Workflow erhalten, von Konzeption über Design bis Web-Development. Vielen Dank und bis zum nächsten Mal!

Juni 2026, Adriani Schmidt, fellowz GmbH