Summary  
Covers advanced stylesheet techniques to control element layout, apply transforms and animations, create responsive designs with media queries, and streamline styling using SASS preprocessing.

General domain of usage  
Front-end web development

Hier erfahren Sie, was Sie beherrschen werden. Der Schwerpunkt liegt auf Techniken, die Ihre Benutzeroberfläche deutlich aufwerten.

## Positionierung von Elementen
Umfassende Kontrolle über das Layout durch fortgeschrittene Positionierungstechniken. Sie lernen, Elemente exakt zu platzieren, gestapelte Designs zu erstellen und komplexe Layouts präzise zu steuern.

## Übergänge und Animationen
Sie lernen, wie Sie Benutzeroberflächen flüssig, modern und lebendig gestalten:
- Saubere, ausgefeilte Übergänge beim Zustandswechsel von Elementen;
- CSS-Animationen, die Bewegung und Charakter in die Benutzeroberfläche bringen;
- Einsatz von Timing-Funktionen und Easing zur Steuerung von Ablauf und Rhythmus;
- Anwendung von Best Practices für Animationen hinsichtlich Performance und Nutzererlebnis.


## Transformationen
Elemente transformieren, um dynamische, interaktive Designs zu erstellen:
- Skalieren und Rotieren für wirkungsvolle UI-Effekte;
- Schrägstellen und Verschieben, um Tiefe und Bewegung hinzuzufügen;
- Mehrere Transformationen kombinieren für komplexe, ansprechende Visualisierungen.


## Adaptives/Responsives Design
Schnelle, praxisnahe Prinzipien, damit Layouts auf jedem Bildschirm gut aussehen. Arbeit mit Media Queries und Viewport-Einheiten, um sicherzustellen, dass Designs sich reibungslos anpassen.

## Präprozessor SASS
Kurze Einführung in das Schreiben von übersichtlicherem CSS mit Variablen, Verschachtelung und SASS-Grundlagen.

Verbessern Sie Ihre Styling-Fähigkeiten durch das Beherrschen fortgeschrittener CSS-Techniken für modernes Webdesign. Positionieren und verwalten Sie Elemente präzise mit fortgeschrittenen Positionierungsstrategien. Erstellen Sie fließende Übergänge und ansprechende Animationen zur Verbesserung der Benutzererfahrung. Transformieren und manipulieren Sie Elemente für dynamische visuelle Effekte. Entwickeln Sie responsive Designs, die sich an verschiedene Geräte anpassen, und optimieren Sie Ihren Workflow mit CSS-Präprozessoren wie Sass.

Erfahren Sie, was Lernende von diesem Kurs zu fortgeschrittenem HTML- und CSS-Styling erwarten können. Welche Vorkenntnisse sind vor Kursbeginn erforderlich? Welche Themen werden behandelt?

Elemente auf Webseiten positionieren und verwalten. Verschiedene Positionierungseigenschaften kennenlernen, den Stapelreihenfolge nutzen, um die Sichtbarkeit überlappender Elemente zu steuern, und schließlich den Umgang mit Überlauf von Inhalten beherrschen.

Untersuchung der Leistungsfähigkeit von Übergängen und Möglichkeiten zur Verbesserung der Benutzererfahrung. Erläuterung, wie Eigenschaften fließend und schrittweise animiert werden, um nahtlose Zustandsübergänge zu ermöglichen.

Erfahren Sie mehr über die Eigenschaft „animation“ und deren Einsatz zur Erstellung dynamischer und ansprechender Designs. Entdecken Sie die Erstellung komplexer Animationen mit Keyframes sowie die Steuerung der Animation.

Untersuchung der Transformations-Eigenschaft, die das Modifizieren von Aussehen und Position von Elementen auf einer Webseite ermöglicht. Skalierung, Rotation, Schrägstellung und Verschiebung von Elementen in zwei und drei Dimensionen. Kombination mehrerer Transformationen zur Erzeugung komplexerer Effekte.

Die Prinzipien und Techniken des adaptiven/responsiven Designs zielen darauf ab, Websites und Anwendungen auf verschiedenen Geräten, Bildschirmgrößen und Ausrichtungen zugänglich und optisch ansprechend zu gestalten.

Erfahren Sie mehr über Präprozessoren in CSS und wie sie dabei helfen, effizienteren und besser wartbaren Code zu schreiben. Verstehen Sie, wie Präprozessoren den Arbeitsablauf vereinfachen und saubereren CSS-Code generieren können.

Inhalte Dieses Kurses

Positionierung von Elementen

Übergänge und Animationen

Transformationen

Adaptives/Responsives Design