Kurzbeschreibung

Der Funktionsumfang von CSS ist in den letzten Jahren erheblich gewachsen. Neben neuen gestalterischen Möglichkeiten wie konischen Verläufen, Filtern, Shapes, Blend Modes und Masken wurden auch neue Layoutmodelle wie Flexbox und – noch spannender – die sog. »CSS Grids« entwickelt. Auch im Bereich der Animationen hat sich einiges getan. Viele Effekte die früher mit Hilfe unterstützender Technologien umgesetzt werden mussten, lassen sich bereits heute oder in naher Zukunft mit reinem CSS lösen. Und mit Hilfe neuer Selektoren sind komplexere Abfragen mit weniger Code möglich. Selbst in Bereichen die momentan den CSS-Präprozessoren wie Sass oder Less vorbehalten sind hat sich einiges getan, denn CSS-Variablen ermöglichen es wiederkehrende Code-Passagen auszulagern und zentral zu pflegen. Teilweise sind die Möglichkeiten von CSS den Möglichkeiten der Präprozessoren sogar überlegen. Wenn Sie Ihre Website für unterschiedliche Geräte bzw. Anwendungsfälle optimieren möchten, dann sind die neuen Media Queries der Level 4-Spezifikation für Sie sicher interessant.

In diesem Workshop lernen Sie die spannendsten neuen CSS-Techniken anhand praktischer Übungen kennen. Sie erfahren, worauf Sie hinsichtlich des Browsersupports achten sollten und wie Sie solide Fallback-Lösungen entwickeln.

Agenda

Grafische Effekte

  • Verläufe & Muster (inkl. konische Verläufe)
  • »Multiple Backgrounds«
  • »Shapes«
  • »Blend Modes«
  • Filter-Funktionen, Vordergrund- und Hintergrund-Filter
  • »Clipping Masks« und Masken

Layout und Gestaltungsraster

  • Das CSS Grid Layout Module
  • Das Flexbox-Modell

Funktionen, Selektoren und Wartung

  • »CSS-Variables« und »Nesting«
  • »CSS Counter«
  • Neue Selektoren
  • Neue Pseudoklassen
  • @supports
  • Media Queries Level 4 und »Custom Media Queries«

Verhalten und Animation

  • Bewegungspfade
  • »CSS Snap Points«
  • Animationen und die »will-change«-Eigenschaft

Praxistauglichkeit

  • Browser-Support
  • Fallback-Lösungen
  • Prä- und Post-Prozessoren

Voraussetzungen & Zielgruppe

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

Dozent

Jonas HellwigJonas Hellwig arbeitet als Web Designer, Video-Trainer, Fachbuchautor und Dozent in Berlin. Neben UX/UI-, Frontend- & Responsive Design hat er sich auf Workflow-Optimierungen im Design-Prozess spezialisiert und ist Gründer der Agentur kulturbanause® (kulturbanause.de). Auf blog.kulturbanause.de veröffentlicht er interessante Artikel, Tipps und Tutorials zum Thema Web Design. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Website-Projekten.

Kunden-Feedback zu unseren öffentlichen Schulungen

Es war ein sehr interessantes, inspirierendes und gut erklärtes Seminar. Habe viel gelernt. Vielen Dank!

Dezember 2019, Katja Mainzer, Projektleiterin Design, 3st kommunikation GmbH

Am 26.11. habe ich dem Tagesseminar Responsive Web Design - Die technische Umsetzung - mit Jonas Hellwig (kulturbanause) teilgenommen. Ich bin mit dem Anliegen angereist, als Lehrender meinen aktuellen Kenntnisstand zu überprüfen und durch die Erfahrungen und Entwicklungen aus der Agenturpraxis zu ergänzen. Das Seminar hat meine Erwartungen vollständig erfüllt. Dem Referenten ist es gelungen, den gepackten Stoff didaktisch augezeichnet aufzuarbeiten und trotz seiner manchmal vorhandenen Komplexität verständlich und nachvollziehbar zu vermitteln. Eine umfangreiche digitale Seminardokumentation hilft, die Inhalte noch einmal zu rekapitulieren.

Dezember 2015, Prof. Andreas Baumgart, Hochschule für Angewandte Wissenschaften Hamburg

Ein sehr interessantes, hilfreiches und praxisorientiertes Seminar. Didaktisch gut aufbereitet und motivierend präsentiert. Vielen Dank dafür.

November 2016, Dejan Perc, Leiter Digitales Marketing, ACE Auto Club Europa

Super sympathischer Dozent, sehr guter Workshop mit großem Lerneffekt.

November 2016, Christina Martens, Grafik/Web

Tolles und kurzweiliges Seminar! Ich hätte nicht gedacht, in so kurzer Zeit so viel zu lernen und zu verstehen. Ich habe richtig viel Spaß am Thema gewonnen.

Mai 2019, Phil Hoffmann, International Marketing, DKMS GmbH

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: