Am Ende des Seminars sind die Teilnehmenden in der Lage, fortgeschrittene CSS3-Techniken anzuwenden, um komplexe und performante Weblayouts zu erstellen.
Komplexe Selektoren: Verwendung von Attributselektoren, Geschwisterselektoren und Selektoren zur gezielten Ansprache von Elementen.
Erweiterte Pseudoklassen: Einsatz von strukturellen Pseudoklassen wie :nth-child(), :nth-of-type(), :not() und weitere zur detaillierten Gestaltung von Webseiten.
Flexbox in der Tiefe
Flexbox-Layouts: Erstellung flexibler Layouts mit Flexbox; detaillierte Erklärung der Flexbox-Eigenschaften wie flex-grow, flex-shrink und flex-basis.
Vertikale und horizontale Ausrichtung: Methoden zur präzisen vertikalen und horizontalen Ausrichtung von Elementen in einem Flexbox-Container.
CSS Grid Layout
Grundlagen des CSS Grid: Einführung in das CSS Grid Layout, seine Terminologie und grundlegenden Konzepte.
Erstellung komplexer Layouts: Implementierung fortgeschrittener Grid-Techniken, wie verschachtelte Grids, Grid-Template-Bereiche und automatische Platzierung von Elementen.
CSS-Animationen und Transitions
Transitions: Anwendung von CSS-Transitions für sanfte Übergänge und Effekte, Verständnis der Eigenschaften wie transition-property, transition-duration, transition-timing-function und transition-delay.
Keyframe-Animationen: Erstellung komplexer Animationen mit @keyframes; Techniken zur Kontrolle und Optimierung von Animationen.
CSS-Variablen (Custom Properties)
Einsatz von CSS-Variablen: Definition und Nutzung von CSS-Variablen zur Verbesserung der Wartbarkeit und Wiederverwendbarkeit von Stilen.
Dynamische Anpassungen: Verwendung von CSS-Variablen in Kombination mit JavaScript zur dynamischen Anpassung von Stilen zur Laufzeit.
Responsive Design und Media Queries
Media Queries im Detail: Anwendung von Media Queries zur Erstellung responsiver Layouts, Nutzung von min-width, max-width, orientation und weiteren Eigenschaften.
Responsive Strategien: Techniken zur Umsetzung responsiver Designs, wie mobile-first-Ansätze und flexible Rasterlayouts.
CSS-Präprozessoren (Sass und Less)
Einführung in Sass und Less: Grundlagen der CSS-Präprozessoren, ihre Vorteile und die Integration in Projekte.
Fortgeschrittene Features: Nutzung von Mixins, Funktionen, verschachtelten Regeln und Importen zur Strukturierung und Optimierung von CSS-Code.
Fortgeschrittene Techniken für Performance-Optimierung
Effiziente CSS-Architektur: Strategien zur Organisation und Modularisierung von CSS, wie BEM (Block Element Modifier) und ITCSS (Inverted Triangle CSS).
Optimierungstechniken: Methoden zur Reduzierung der Renderzeit und Verbesserung der Ladegeschwindigkeit, wie das Minimieren von CSS, die Verwendung von Critical CSS und das Lazy Loading von nicht kritischen Stilen.
CSS in modernen JavaScript-Frameworks
CSS-Integration in React und Vue.js: Techniken zur Integration und Verwaltung von CSS in React und Vue.js-Projekten, wie CSS-in-JS, styled-components und Scoped Styles.
State-basierte Stilanpassungen: Dynamische Anpassung von CSS basierend auf Anwendungszuständen und Benutzerinteraktionen.
Barrierefreiheit und CSS
Zugängliche Gestaltung: Best Practices zur Gestaltung zugänglicher Webseiten mit CSS, Berücksichtigung von Farbkontrasten und responsiven Schriftgrößen.
Visuelle Hilfen: Techniken zur Implementierung visueller Hilfen für Benutzer mit Behinderungen, wie Fokus-Indikatoren und screenreader-freundliche Layouts.
Dauer/zeitlicher Ablauf:
2 Tage
Zielgruppe:
Dieses Seminar richtet sich an Webentwickler, Frontend-Entwickler und Designer, die ihre CSS3-Kenntnisse vertiefen und optimieren möchten. Grundlegende Kenntnisse in CSS und HTML sind erforderlich.
Wir setzen Analyse-Cookies ein, um Ihre Zufriedenheit bei der Nutzung unserer Webseite zu verbessern.
Diese Cookies werden nicht automatisiert gesetzt.
Wenn Sie mit dem Einsatz dieser Cookies einverstanden sind, klicken Sie bitte auf Akzeptieren.
Weitere Informationen finden Sie hier.
