Nach dem Seminar können Sie komplexe, responsive Weblayouts mit Flexbox, CSS Grid und Media Queries erstellen. Sie können Elemente gezielt auswählen, Übergänge und Animationen steuern und wiederkehrende Stilwerte mit Custom Properties verwalten. Sie können Stylesheets mit Sass oder Less strukturieren und Stile in React- und Vue.js-Projekten abhängig vom Anwendungszustand anpassen. Sie können Maßnahmen zur Optimierung der Lade- und Renderzeit einordnen und bei der Gestaltung auf lesbare Schriftgrößen, ausreichende Kontraste und sichtbare Fokusindikatoren achten.
Elemente gezielt mit Attribut- und Geschwisterselektoren ansprechen
Pseudoklassen wie :nth-child(), :nth-of-type() und :not() einsetzen
Flexbox in der Tiefe
Flexible Layouts mit flex-grow, flex-shrink und flex-basis umsetzen
Elemente in Flexbox-Containern horizontal und vertikal ausrichten
CSS Grid Layout
Grundbegriffe und Funktionsweise von CSS Grid kennenlernen
Komplexe Layouts mit verschachtelten Grids, Grid-Template-Bereichen und automatischer Platzierung umsetzen
CSS-Animationen und Transitions
Übergänge mit transition-property, transition-duration, transition-timing-function und transition-delay steuern
Animationen mit @keyframes erstellen, steuern und optimieren
CSS-Variablen (Custom Properties)
Wiederverwendbare Stile mit Custom Properties definieren
Custom Properties mit JavaScript zur Laufzeit ändern
Responsive Design und Media Queries
Media Queries mit min-width, max-width und orientation einsetzen
Layouts mit dem Mobile-first-Ansatz und flexiblen Rastern entwickeln
CSS-Präprozessoren (Sass und Less)
Sass und Less einordnen und in Projekte integrieren
Nutzung von Mixins, Funktionen, verschachtelten Regeln und modularer Codeorganisation; in Sass insbesondere mit @use und @forward, in Less mit Imports.
CSS-Architektur und Performance
Stylesheets mit BEM und ITCSS strukturieren
CSS minimieren, Critical CSS einsetzen und nicht kritische Stile verzögert laden
CSS in modernen JavaScript-Frameworks
Stile in React und Vue.js verwalten, etwa mit CSS-in-JS, styled-components und Scoped Styles
Stile abhängig von Anwendungszuständen und Benutzerinteraktionen anpassen
Barrierefreiheit und CSS
Farbkontraste und responsive Schriftgrößen berücksichtigen
Sichtbare Fokusindikatoren und Layouts gestalten, die die Nutzung mit Screenreadern unterstützen
Dauer/zeitlicher Ablauf:
2 Tage
Zielgruppe:
Das Seminar richtet sich an Sie, wenn Sie in der Web- oder Frontend-Entwicklung oder im Webdesign arbeiten und Ihre CSS-Kenntnisse vertiefen möchten.
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.
