0Pricing
CSS Academy icon

CSS Academy

CSSWebFrontendBeginner

Verbessern Sie Ihre Webdesigns mit CSS durch umfassende Lektionen in der CSS Academy.

🤖 KI-Gesteuert📚 40 Kurse👥 100.000+ Lernende⭐ 4,9 Bewertung
Kursübersicht

CSS: Die Sprache, die das Web stylt

CSS steuert jedes visuelle Detail einer Webseite — Farbe, Layout, Abstände, Animation und Responsivität. Es hat sich von einer einfachen Präsentationsschicht zu einer vollwertigen Design-System-Sprache entwickelt, mit modernen Funktionen wie Container Queries, @layer, logischen Eigenschaften und der Houdini API, die Entwicklern präzise Kontrolle über das Rendering geben. Dieser Track deckt die gesamte Breite von CSS ab — von deinem ersten Selector bis zur Architektur skalierbarer Design-Systeme, die in großen Production-Codebases eingesetzt werden.

Was du lernen wirst

Du wirst mit Syntax, Selectoren, Farben und Typografie beginnen, dann ein solides Verständnis des Box Model, Display-Eigenschaften und Positioning aufbauen. Danach arbeitest du dich durch Flexbox und CSS Grid für Standard- und Advanced Layouts vor, wendest Responsive Design und Media Queries an und nutzt CSS-Variablen, Custom Functions und Design Tokens für wartbares Theming. Du wirst auch Transitions, Keyframe-Animationen, Transforms, Filter, Blend Modes und Dark Mode behandeln — plus modernes Tooling mit Sass, PostCSS und CSS-in-JS Patterns. Der Track endet mit CSS-Architektur mit BEM, Spezifität und der Cascade, Container Queries, @layer Cascade Layers, CSS Houdini und Performance.

Der Lernpfad

Vierzig Kurse spannen von A1 bis C1. Die frühen A1- und A2-Kurse vermitteln Grundlagen — Selectoren, das Box Model, Pseudo-Klassen, Pseudo-Elemente und Einheiten. B1-Kurse behandeln Flexbox, Grid, Responsive Design, Animationen, Debugging mit DevTools und CSS-Funktionen. B2-Kurse gehen auf Advanced Flexbox und Grid, Sass, PostCSS, CSS-in-JS, Design Tokens, CSS Shapes, logische Eigenschaften, Container Queries und CSS Layers über. Die drei C1-Kurse — CSS Houdini, CSS Performance und CSS Future — befassen sich mit der Cutting Edge der Plattform.

So funktioniert es

Jeder Kurs ist in kurze, fokussierte Lektionen unterteilt, die du direkt im integrierten Editor mit Echtzeit-Feedback absolvierst. Ein AI Tutor steht dir zur Verfügung, wenn du steckenbleibst, und die Progression ist bewusst inkrementell, sodass jedes Konzept das vorherige verstärkt, bevor das nächste eingeführt wird.

Lernen starten →

So wirst du lernen

🎯
Interaktive Lektionen
Praktische Coding-Übungen mit Live-Feedback
🤖
KI-Tutor
Erhalte sofortige Hilfe von unserem KI-Tutor, wenn du nicht weiterkommst
💻
Integrierter Editor
Schreibe und starte Code direkt in deinem Browser
🏆
Zertifikat
Verdiene ein Zertifikat, wenn du den Kurs abschließt
Lehrplan

40 Kurse

Alle Kurse im CSS Academy Lernpfad.

01

CSS-Syntax und Selektoren

A13 Lektionen

Lernen Sie die grundlegende Syntax von CSS kennen und erfahren Sie, wie Sie HTML-Elemente mit Tag-, Klassen-, ID-, Attribut- und kombiniert…

02

Farben und Hintergründe

A14 LektionenPRO

Beherrschen Sie CSS-Farbformate und Hintergrundeigenschaften, um visuell ansprechende Webseiten zu erstellen.

03

Typografie und Text

A14 LektionenPRO

Gestalten Sie Textinhalte mit Schriftarten, Größen, Schriftschnitten und Ausrichtung und lernen Sie Techniken zum Laden eigener Schriftarte…

04

Das Box-Modell

A24 LektionenPRO

Verstehen Sie, warum jedes HTML-Element eine Box ist, und steuern Sie deren Größe, Abstände, Rahmen und Schatten.

05

Display-Eigenschaften

A24 LektionenPRO

Steuern Sie mit den Display-Modi block, inline und inline-block, wie Elemente im Dokumentfluss angeordnet werden.

06

Grundlagen der Positionierung

A24 LektionenPRO

Nehmen Sie Elemente mithilfe der CSS-position-Werte aus dem normalen Fluss und steuern Sie die Ebenen mit z-index.

07

CSS-Einheiten und -Werte

A24 LektionenPRO

Beherrschen Sie absolute und relative CSS-Einheiten, um skalierbare, responsive Layouts zu erstellen.

08

Pseudo-Klassen

A24 LektionenPRO

Sprechen Sie Elemente anhand ihres Zustands, ihrer Position und ihrer Beziehung zu anderen Elementen mit Pseudo-Klassen an.

09

Pseudo-Elemente

A24 LektionenPRO

Fügen Sie dekorative Inhalte ein und gestalten Sie bestimmte Teile von Elementen mit CSS-Pseudo-Elementen.

10

Flexbox-Grundlagen

B14 LektionenPRO

Erstellen Sie eindimensionale Layouts mit CSS Flexbox und steuern Sie Richtung, Ausrichtung und Umbruch.

11

Grundlagen von CSS Grid

B14 LektionenPRO

Erstellen Sie leistungsfähige zweidimensionale Layouts mit CSS Grid und verwenden Sie Tracks, Abstände und Template-Bereiche.

12

Responsive Design

B14 LektionenPRO

Erstellen Sie Layouts, die sich mithilfe fließender Breiten und responsiver Techniken elegant an jede Bildschirmgröße anpassen.

13

Media Queries

B14 LektionenPRO

Wenden Sie mit Media Queries abhängig von Bildschirmgröße, Ausrichtung und Benutzereinstellungen unterschiedliche Stile an.

14

CSS-Variablen

B14 LektionenPRO

Erstellen Sie wartbare Stylesheets mit benutzerdefinierten Eigenschaften, die wiederverwendet und dynamisch aktualisiert werden können.

15

CSS-Transitions

B14 LektionenPRO

Fügen Sie CSS-Eigenschaften mit der Kurzschreibweise transition und Timing-Funktionen sanfte animierte Zustandsänderungen hinzu.

16

CSS-Animationen und Keyframes

B14 LektionenPRO

Erstellen Sie komplexe mehrstufige Animationen mit @keyframes und der Kurzschreibweise animation.

17

CSS-Transforms

B14 LektionenPRO

Verschieben, drehen, skalieren und neigen Sie Elemente im 2D- und 3D-Raum mit CSS-Transformationsfunktionen.

18

Spezifität und Kaskade

B14 LektionenPRO

Verstehen Sie genau, wie CSS entscheidet, welche Stile gewinnen, wenn mehrere Regeln auf dasselbe Element abzielen.

19

CSS-Funktionen

B14 LektionenPRO

Verwenden Sie leistungsfähige CSS-Funktionen für dynamische Berechnungen, fließende Größen, Grid-Layouts und die moderne Bearbeitung von Fa…

20

Filter und Blend-Modi

B14 LektionenPRO

Wenden Sie mit CSS-Filtern und der Komposition von Blend-Modi visuelle Effekte auf Elemente und Bilder an.

21

Scrollen und Overflow

B14 LektionenPRO

Steuern Sie Scrollverhalten, Snap-Punkte und das Beschneiden von Overflow für ein flüssiges Nutzungserlebnis.

22

Dark Mode und Farbschemata

B14 LektionenPRO

Implementieren Sie mit CSS-Variablen, color-scheme und Media Queries einen automatischen und manuellen Dark Mode.

23

CSS-Debugging und DevTools

B14 LektionenPRO

Beherrschen Sie die Browser-DevTools, um CSS-Layout, Animationen und berechnete Stile zu inspizieren, zu debuggen und zu verstehen.

24

Fortgeschrittene Flexbox

B24 LektionenPRO

Gehen Sie über die Grundlagen hinaus und lernen Sie fortgeschrittene Flexbox-Ausrichtung, Reihenfolge und praxisnahe Layoutmuster kennen.

25

Fortgeschrittenes Grid

B24 LektionenPRO

Schöpfen Sie die Möglichkeiten von CSS Grid mit benannten Linien, automatischer Platzierung, Subgrid und komplexen Mustern voll aus.

26

CSS-Architektur und BEM

B24 LektionenPRO

Organisieren Sie große CSS-Codebasen mit Architekturmustern, Namenskonventionen und Dateistrukturen.

27

CSS Shapes und Clip-path

B24 LektionenPRO

Erstellen Sie nicht rechteckige Elemente und Formen für den Textumfluss mit clip-path und CSS Shapes.

28

Logische CSS-Eigenschaften

B24 LektionenPRO

Schreiben Sie richtungsunabhängiges CSS, das mit logischen Eigenschaften in Sprachen von links nach rechts und von rechts nach links funkti…

29

Container Queries

B24 LektionenPRO

Wenden Sie mit Container Queries Stile abhängig von der Größe des Container-Elements statt des Viewports an.

30

CSS-Layer (@layer)

B24 LektionenPRO

Steuern Sie die Priorität der CSS-Kaskade explizit mit @layer und beseitigen Sie Spezifitätskonflikte in großen Codebasen.

31

Sass-Präprozessor

B24 LektionenPRO

Machen Sie das Erstellen von CSS mit Variablen, Verschachtelung, Mixins und Funktionen im Sass-Präprozessor leistungsfähiger.

32

PostCSS und CSS-Tooling

B24 LektionenPRO

Transformieren und optimieren Sie CSS mit PostCSS-Plugins für Autoprefixing, Minifizierung und benutzerdefinierte Transformationen.

33

CSS-in-JS-Muster

B24 LektionenPRO

Erkunden Sie komponentenbezogenes Styling mit styled-components, Emotion, CSS Modules und Vanilla Extract.

34

Design Tokens und Theming

B24 LektionenPRO

Erstellen Sie skalierbare Designsysteme mit Design Tokens und Theming für mehrere Marken auf Basis benutzerdefinierter CSS-Eigenschaften.

35

CSS-Tests

B24 LektionenPRO

Stellen Sie die Korrektheit und visuelle Konsistenz von CSS durch Regressionstests, Unit-Tests und Barrierefreiheitsprüfungen sicher.

36

CSS-Komponentenmuster

B24 LektionenPRO

Erstellen Sie produktionsreife UI-Komponenten wie Karten, Modale, Dropdowns und Tabs mit reinen CSS-Techniken.

37

Moderne Layoutmuster

B24 LektionenPRO

Implementieren Sie fortgeschrittene, praxisnahe Layoutmuster mit modernen CSS-Grid- und Flexbox-Techniken.

38

CSS Houdini

C14 LektionenPRO

Erweitern Sie CSS selbst mit JavaScript und den Houdini-APIs für benutzerdefinierte Eigenschaften, Painting und Layout.

39

CSS-Performance

C14 LektionenPRO

Optimieren Sie die Auslieferung und Rendering-Performance von CSS, indem Sie die Rendering-Pipeline des Browsers verstehen.

40

Die Zukunft von CSS

C14 LektionenPRO

Erkunden Sie die neuesten CSS-Entwicklungen mit nativem Nesting, :has(), bereichsbezogenen Stilen und View Transitions.

FAQ

Häufig gestellte Fragen

Ist der CSS Academy Kurs kostenlos?

Ja. Du kannst den CSS Academy Kurs kostenlos starten und seine interaktiven Lektionen ohne Kosten abschließen. Ein optionales PRO-Abo schaltet erweiterte KI-Tools und ein teilbares Zertifikat frei.

Brauche ich Vorkenntnisse, um CSS zu lernen?

Nein. Der Kurs beginnt mit den Grundlagen und bewegt sich schrittweise zu fortgeschritteneren Themen, sodass du auch ohne CSS-Vorkenntnisse starten kannst.

Wie lerne ich CSS auf CoddyKit?

Du lernst durch Tun. Kurze interaktive Lektionen verbinden eine klare Erklärung mit einer praktischen Coding-Übung, die in Echtzeit läuft, und ein 24/7 KI-Tutor gibt dir personalisierte Hilfe, wann immer du steckenbleibst.

Erhalte ich ein Zertifikat für den Abschluss von CSS Academy?

Ja. PRO-Lerner können eine Prüfung ablegen und verdienen sich ein teilbares Abschlusszertifikat mit verifizierbarem Code für den CSS Academy Kurs.

Kann ich CSS auf meinem Telefon lernen?

Ja. CoddyKit ist im Web und als native iOS- und Android-Apps verfügbar, sodass du CSS auf jedem Gerät lernen kannst und dein Fortschritt überall synchronisiert wird.

Starte CSS Academy jetzt

Schließe dich Tausenden von Lernenden an, die Programmierung mit KI-gestützten Lektionen beherrschen.

Kostenlos starten →Alle Kurse ansehen