CSS3 für Fortgeschrittene

Seminarziel

Inhalt

• Erweiterte Selektoren und Pseudoklassen
  • 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.