CSS – The Next Level
Hier finden Sie Infos zu unserem CSS-Workshop in Berlin.
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
[info_location_social_impact_lab_berlin]
[info_catering]
Dozent
Kunden-Feedback zu unseren öffentlichen Schulungen
[testimonials kategorie=“Oeffentliche Schulung“ posts_per_page=“5″ slider=“true“]