Seminar: CSS für Webanwendungen

In diesem Workshop lernen Dev-Teams, wie einzelne Komponenten und responsive Layouts mit modernem CSS umgesetzt werden. Der Fokus liegt klar auf den typischen Anforderungen in der Umsetzung von WebApps. Wir arbeiten nah am Webstandard und besprechen die Probleme, die durch den Einsatz von Frameworks entstehen können.

Kurzbeschreibung

Das Layout einer Web-App stellen die Anwendungsentwicklung vor zahlreiche Herausforderungen. Einzelne Komponenten müssen entwickelt werden, ohne dass der Code Konflikte mit anderen Bereichen der Anwendung auslöst. Komplexe Layouts mit aufklappbaren oder scrollbaren Bereichen und zahlreichen Zuständen müssen passgenau für alle Displaygrößen und Eingabearten gestaltet werden. Umfangreiche Tabellen und Formulare gilt es benutzerfreundlich darzustellen und das alles bei sehr dynamischen Datensätzen und tendenziell zu wenig Platz auf dem Display.

Unser Workshop zum Thema »CSS für Webanwendungen« richtet sich an die Zielgruppe der Anwendungsentwickler*innen, die sich mit der Aufgabe konfrontiert sehen eine Web-Application mit HTML und CSS zu gestalten. Häufig geschieht dies auf Grundlage eines oder mehrerer sich bereits im Einsatz befindender Frameworks.

Der Schwerpunkt der Schulung liegt auf der praktischem Umsetzung des Layouts und einzelner Komponenten mittels modernem HTML/CSS. Angefangen bei notwendigen Grundlagen, bis hin zu modernen Layout-Techniken, lernen Sie alles was notwendig ist um ein anspruchsvolles Layout fehlerfrei und zielsicher in den Browser zu bringen. In diesem Zusammenhang werden auch Themen wie Barrierefreiheit, Browserkompatibilität, CSS-Namenskonzepte, Präprozessoren, Progressive Enhancement sowie notwendige gestalterische und konzeptionelle Grundlagen behandelt.

Das Ziel des Workshops besteht schwerpunktmäßig darin, relevante HTML- und CSS-Techniken praktisch zu erlernen. Darüber hinaus soll auch ein allgemeiner Überblick geschaffen werden, was einen Blick auf die angrenzenden Disziplinen einschließt.

Agenda: CSS für Web-Applications

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.

Voraussetzungen für sauberen CSS-Code

HTML-Semantik und Barrierefreiheit
CSS Spezifität
CSS-Selektoren
Das CSS Box-Modell
Positionierung mit CSS
- position
- float
- Block-, Inline- & Inline-Block-Elemente

Workflow und Best Practises

CSS-Methodologien (BEM, ITCSS, OOCSS etc.)
Style Scoping
Build-Prozesse und hilfreiche Tools
Präprozessoren (z.B. Sass)
CSS Variablen
Browsersupport
Progressive Enhancement
Feature Detection mit @supports
SVG
Atomic Design, Design Systeme & Co.
UI-Kits und Component Libraries

Responsive Web Design (RWD)

Konzepte und RWD-Basics
Media Queries
Mobile First vs. Desktop First
Viewport-Einstellungen
Interaction Type Media Queries
Breakpoints für Komponenten
Responsive Design ohne Media Queries
Flexible Typografie
- Schrifteinheiten verstehen (em, rem etc.)
- Variable Fonts
Flexibilität erreichen (vh, vw, calc() etc.)

CSS Layoutmodelle

Abgrenzung von echten CSS-Layoutmodellen zu Grid-Frameworks (Bootstrap und Co.)
Flexbox
- Grundlagen und Konzepte
- Übungen anhand eines Praxisprojekts
CSS Grid
- Grundlagen und Konzepte
- Übungen anhand eines Praxisprojekts

Flexible Komponenten & Layouts

Tabellen
Formulare
Dialoge und Modals
Icon- und Icon-Systeme
Scrolling
Zustände und Varianten organisieren
Umgang mit bestehenden Komponenten
Theming und Skinning

Dozent: Jonas Hellwig

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

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
Insgesamt waren alle durchweg positiv überrascht. Das Seminar war sehr gut aufgebaut, da du uns einerseits einen allgemeinen Überblick gegeben hast, andererseits aber auch spezifisch auf unseren Fall eingegangen bist. Du hast von uns sehr spontan Zugang zur App bekommen, hast da aber direkt ganz viele Stellen gesehen, bei denen wir noch Potential haben. Das wurde mehrfach als besonders gut hervorgehoben.

Februar 2026, Andrea Lange, ATBAS GmbH & Co. KG
Die zweitägige Remote-Schulung »UX/UI Design & Visual Prototyping« durch kulturbanause hat die Erwartung unseres Marketing-Teams in jeder Hinsicht erfüllt, ja sogar übertroffen. Jonas verstand es, komplexe Inhalte klar und strukturiert zu vermitteln und dabei stets den Praxisbezug herzustellen. Besonders wertvoll waren die Einblicke in zentrale Themen wie den modularen Aufbau von Designs und Komponenten, die Erstellung von Prototypen, den Einsatz von Auto-Layout für responsive Gestaltung sowie die Entwicklung konsistenter Design-Systeme – alles auf Basis von Figma unter Berücksichtigung der späteren technischen Umsetzung des User Interfaces.
Die Sessions waren intensiv, gut organisiert und boten zahlreiche Impulse für eine professionelle und effiziente Designarbeit. Wir waren so überzeugt von der Qualität der Schulung, dass wir bereits über ein Follow-up nachdenken. Wer seine Kenntnisse im Bereich UX/UI vertiefen und methodisch erweitern möchte, findet hier eine exzellente Schulung.

Januar 2026, Dennis Bäsmann, Team Lead Marketing (Web), GBTEC Software AG