icon-arrow-lefticon-arrow

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. Solide EDV-Kenntnisse und ein eigenes Notebook mit installiertem Google Chrome Browser und einem Code-Editor (z. B. dem kostenlosen Editor Brackets) sind notwendig um die Übungen dieses Workshops live mitmachen zu können.

Die Sprache des Seminars ist Deutsch. Die Schulungsunterlagen werden ebenfalls in deutscher Sprache bereitgestellt.

Veranstaltungsort & Verpflegung

Das Seminar findet im »Social Impact Lab« in der Glogauer Str. 21 in Berlin-Kreuzberg statt.

Fotos des Seminarraums im Social Impact Lab Berlin

Der Eingang befindet sich im Innenhof rechts im Seitenflügel. Die Seminarräume befinden sich im 2. Obergeschoss und sind behindertengerecht ausgestattet.

Kaffee, Tee, kalte Getränke, Obst und Gebäck stehen Ihnen den ganzen Schulungstag über zur Verfügung. In der Mittagspause gehen Sie gemeinsam mit dem Dozenten und den anderen Teilnehmern in einem Restaurant in der Nähe des Seminarraums essen. Dort werden neben fleischhaltigen auch vegetarische und vegane Gerichte angeboten. Die Kosten sind im Seminarpreis enthalten.

Dozent

Jonas HellwigJonas Hellwig arbeitet als Web Designer, Video-Trainer, Fachbuchautor und Dozent in Berlin. Neben Responsive Design hat er sich auf WordPress, Photoshop und Workflow-Optimierungen im Web Design 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 Veranstaltungen zum Thema Web Design anzutreffen und unterstützt Web-Agenturen und Unternehmen bei der Planung und bei der technischen Umsetzung von Web-Projekten.

Kunden-Feedback zu unseren öffentlichen Schulungen

Ich bin mit großen Erwartungen zu diesem Seminar gekommen und diese wurden auch voll erfüllt. Trotz des komplexen Themas war es ein sehr kurzweiliges Vergnügen Jonas Hellwig zuzuhören. Die Themenschwerpunkte wurde verständlich erklärt und ich konnte jede Menge neues Wissen daraus mit nach Hause nehmen. Sollte es für mich wieder Bedarf für eine Weiterbildung geben so wird kulturbanause.de sicherlich die erste Adresse sein an welcher ich anfragen werde.

November 2016, Jörg Aderhold, JAderBass webdesign

Der Workshop zu SVG-Grafiken war spannend, zukunftsweisend und in einem breiten Arbeitsumfeld bereichernd. Jonas Hellwig gibt einen umfassenden Einblick in Anwendungsgebiete und fokussiert gekonnt die individuell relevanten Schwerpunkte. Ein intensiver und wertvoller Lehrgang – besonders an der Schnittstelle zwischen Gestaltung und Entwicklung, der zu neuen Ansätzen motiviert und mir als Designer technische Möglichkeiten verständlich und zugänglich macht.

April 2017, Miriam Stepper, Grafik-Designerin, infoclick.ch

Das Seminar „Responsive Webdesign“ am Freitag war eine echte Erleuchtung. Jonas Hellwig hat die Schulung gut strukturiert, zugänglich gestaltet und keine Fragen offengelassen.

Dezember 2014, Marco Sablotzki – Quelle

@_kulturbanause Sehr geiles Seminar heute in Bremen, danke! LG Ratgar

Dezember 2014, Ratgar, @JacktheRibber – Quelle

Toll erklärt und ganz viel Wissen vermittelt. Jonas bringt die Dinge auf den Punkt und man kann sehr leicht folgen.

Mai 2017, Kerstin Müller, mueller macht web

Ihr Kommentar zu diesem Termin

Ihr Kommentar zu diesem Termin

Bei Fragen, Anregungen oder Kritik zu diesem Termin, nutzen Sie bitte das Kommentar-Formular.

Ihr Kommentar wird überprüft bevor er auf der Website erscheint. Nicht themenrelevante Beiträge werden gelöscht.

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