HTML & CSS – Fortgeschrittene Techniken

In dieser Schulung vertiefen wir vorhandene HTML/CSS-Kenntnisse. Wir beschäftigen uns u.a. mit Responsive Design, anspruchsvolleren Layouts und interessanten Gestaltungseffekten. Nach dem Hands-On-Prinzip zeigen wir, wie benutzerfreundliche und robuste Websites erstellen werden.

Kurzbeschreibung

Aufbauend auf soliden Grundkenntnissen werden Sie in diesem Workshop die Prinzipien von CSS anhand diverser in sich abgeschlossener Übungen erarbeiten. Sie vertiefen Ihr Wissen über Positionierung, Layoutmodelle, Typografie und Gestaltung, lernen neue Selektoren, Animationsmöglichkeiten und Workflow-Konzepte kennen und bekommen zahlreiche Tools und Tricks gezeigt, die Ihnen die tägliche Arbeit spürbar erleichtern werden. Und um auch für die Zukunft gewappnet zu sein, werfen Sie einen Blick auf die spannendsten experimentellen CSS-Funktionen.

Inhalte der HTML- & CSS-Schulung

Die folgenden 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.

Positionierung und Layoutmodelle
- Die Kaskade verstehen
- Floats und Positionierungen verstehen
- Display Inline-Block
- Display-Table
- Content Choreography
- Das Grid Layout Module
- Flexbox
- Die Box-Modelle von CSS
CSS Selektoren
- Attribut-Selektoren
- Kind- und Geschwister-Selektoren
- Nth-Of-Selektoren
- Der Target-Selektor
- CSS4-Selektoren
Farbe, Gestaltung und Effekte
- Komplexe Verläufe
- Muster mit CSS
- Komplexe Hintergrundgestaltung mit CSS
- Schatten
- Data-URIs und Code-generierte Grafiken
- Shapes
- Blend Modes
- Filter
- Counter
- Berechnungen mit CSS
- CSS-Variablen
- Animationen mit CSS
- 3D & 2D-Transformationen
- Webfonts und Icon-Fonts
- SVG-Animationen
Media Types und Media Queries
- Druckausgaben
- Responsive Design
- Mobile First
Workflow und CSS-Konzepte
- CSS Spezifität
- Das SMACSS-Konzept
- Das DRY-Konzept
- ACSS – Atomic CSS
- Sass und SCSS
- CSS Feature Queries & Modernizr
- Media Queries und Element Queries

Voraussetzungen der Teilnehmer

HTML- und CSS-Kenntnisse werden vorausgesetzt. Die einzelnen Übungen werden gemeinsam im Code-Editor erarbeitet, daher sind solide EDV-Kenntnisse ebenfalls Bedingung für dieses Seminar.

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

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
Herzlichen Dank für die kurzweilige, sehr gut strukturierte und aufschlussreiche Schulung!
Das gesamte Team ist motiviert, nun mit WordPress richtig durchzustarten, was neben der guten Aufbereitung der Schulungsinhalte auch an der sympathischen Vortragsweise lag! Von der historischen Entwicklung des WordPress-Konstrukts über einen State of the Art-Workflow zum Aufbau von zeitgemäßen Websites hin zu »System-Hacks« wurden wir mit einem Rund-um-Paket für Einsteiger bestmöglich auf die Arbeit mit dem System vorbereitet. Nochmals vielen Dank an Jonas und das gesamte Team!

Oktober 2024, Christin Ola, Digital Marketing Managerin, Aristo Pharma GmbH
Vielen Dank für die super Schulung — nicht nur für die sinnvolle Nutzung von Figma als Design-Tool, sondern vor allem für die Mindsets (oder auch Leitsätze) zur Herangehensweise beim Aufbau der Designs und welche Auswirkungen das auf den Hand-Off und das Development hat. Tip-Top!

September 2024, Ronny Staps, Held+Team PartG