Menu
CoddyTech
Jetzt lernen
html iconTeil der HTML-JourneyJourney

CSS lernen

Ein kostenloser, interaktiver CSS-Kurs. In jeder Lektion gestaltest du echtes HTML - Selektoren, das Box-Modell, Farben, Schriften, Flexbox, Grid, responsives Design - mit einer Live-Vorschau während des Tippens und einem kostenlosen Zertifikat zum Abschluss. Teil der größeren HTML-Lernreise, sodass der Markup-Kontext, den CSS braucht, gleich zur Hand ist.

Mit dem Lernen beginnen(kostenlos)
Lehrplan ansehenStyling mit CSS-Playground

13,993+ codders eingeschrieben

119 Lektionen114 Aufgaben582 Quizfragen

Lehrplan

2 Abschnitte3 Projekte119 Lektionen114 Aufgaben582 Quizfragen

Dieser Abschnitt ist Teil der HTML-Journey. Der vollständige Lehrplan enthält weitere Abschnitte: Klicke unten auf eine Vorschau, um sie auf der Journey-Seite anzusehen.

  1. Abschnitt 1Grundlagen60 Lektionen
  2. Abschnitt 2

    Styling mit CSS

    Abschnitt startenStartenAusklappenEinklappen    Bringen Sie Ihre Webseiten mit Farben, Layouts und Stilen zum Leben76 Lektionen110 Aufgaben418 Fragen3 Projekte

    Einführung

    5 Lektionen540

    CSS hinzufügen

    4 Lektionen725

    Grundlegende Selektoren

    7 Lektionen1247

    Textgrundlagen

    8 Lektionen1450

    Farben und Hintergründe

    5 Lektionen834

    Café-Menü

    Projekt3 Lektionen3

    Box-Modell Teil 1

    6 Lektionen943

    Box-Modell Teil 2

    5 Lektionen833

    Flexbox

    6 Lektionen943

    Anmeldeformular

    Projekt4 Lektionen4

    Layout-Techniken

    7 Lektionen1151

    Grundlagen des Responsive Designs

    6 Lektionen1052

    Tonga-Webseite

    Projekt6 Lektionen6

    Letzte Herausforderungen

    4 Lektionen4
  3. Abschnitt 3

    CSS-Meisterschaft

    Abschnitt startenStartenAusklappenEinklappen    Bringen Sie Ihre CSS-Fähigkeiten auf das nächste Level!43 Lektionen40 Aufgaben164 Fragen

    Selektoren-Meisterschaft – Kombinationen

    6 Lektionen539

    Interaktive Pseudoklassen

    5 Lektionen431

    Strukturelle Pseudoklassen

    5 Lektionen432

    Projekt: Dropdown-Menü

    4 Lektionen4

    Visuelle Effekte

    5 Lektionen536

    Landing Page

    5 Lektionen5

    Erstellen mit CSS Grid

    4 Lektionen426

    Flavor Fiesta Website

    4 Lektionen4

    Abschluss-Herausforderungen

    5 Lektionen5
  4. Abschnitt 4Praktisches Frontend35 Lektionen
  5. Abschnitt 5JavaScript in Aktion27 Lektionen
Den vollständigen Lehrplan der HTML-Journey ansehen
Das bekommst du
Alles, was du zum Programmierenlernen nutzt

Lernen durch Tun

Schreibe echten Code, frage Datenbanken ab, erstelle Websites und meistere KI-Prompts. Unsere interaktiven Lektionen decken alle Fähigkeiten ab, die moderne Entwickler brauchen.

playground.js
Code-Editor
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3    return greeting + " " + name
4}
5
bottombar Collapse icon
Test #1test Case Success icon
Test #2test Case Success icon
Test #3test Case Failure icon
Eingabe
"Alex"
Ausgabe
"Hello, Coddy! Alex"

Baue deine Serie auf

Bleib konsequent und sieh zu, wie dein Fortschritt wächst! Verfolge deine tägliche Programmiergewohnheit, schütze deine Serie mit Einfrieroptionen und verdiene Belohnungen für jeden Tag.

12 Tage Serie

Komm morgen zurück, um deine Serie zu halten!

fire Filled icon
left icon

January 2026

right icon

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

21

22

23

24

25

26

27

28

29

30

product Double Or Nothing icon

Doppelt oder Nichts

Tag 5 von 7

fire Freeze icon

Serie Einfrieren

2 left

Überall coden

Nimm deine Programmierreise mit! Keine Einrichtung, keine Downloads: einfach öffnen und loslegen. Verfügbar auf iOS, Android und Web mit 4,9-Sterne-Bewertungen.

app Store iconLaden imApp Storegoogle Play iconJetzt beiGoogle Play
Python
7Streak
250Punkte
5Energie
Variablen
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Right Done icon
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Left Done icon
journey Hex Active Base iconjourney Hex Active Shadow iconjourney Hex Active Top iconjourney Lesson Theory Challenge icon
Fortsetzen
journey Path Right icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson Theory Challenge icon
journey Path Left icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson All icon
Reise
Ziele
Bestenliste
Profil
4.9
SternSternSternSternStern
Bewertung

Du bist nicht allein

Tritt auf globalen Bestenlisten an, lade Freunde ein, um Belohnungen zu verdienen, und feiert gemeinsam eure Erfolge. Programmieren macht mit Freunden mehr Spaß!

Herausforderer-Liga
Herausforderer-LigaTop 7 steigen auf
leaderboard First icon1
avatar 1 icon
fire Filled icon
Alex7+ Days
2840
leaderboard Second icon2
avatar 2 icon
fire Filled icon
Jordan7+ Days
2650
leaderboard Third icon3
avatar 3 icon
fire Filled icon
Sam7+ Days
2420
4
avatar 4 icon
Casey
2180
5
avatar placeholder icon
fire Filled icon
Morgan7+ Days
1950
leaderboard Arrow Up iconAufstiegszoneleaderboard Arrow Up icon

Jeder Lernweg, alles dabei

Lies, höre, teste dich, frag die KI oder schlage nach, was du schon gelernt hast. Jede Lektion passt sich dir an.

Einführung in Variablen
Audio

Eine Variable ist ein benannter Container, der einen Wert speichert, auf den du später im Programm verweisen kannst.

In Python erstellst du eine, indem du den Namen, ein Gleichheitszeichen und dann den Wert schreibst.

Der Wert kann sich ändern. Eine neue Zuweisung verweist den Namen einfach auf einen neuen Wert.

1xSarah

Werde zertifiziert

Verdiene Zertifikate für jeden abgeschlossenen Kurs. Füge sie deinem LinkedIn-Profil und Lebenslauf hinzu, um Arbeitgebern deine Programmierkenntnisse zu zeigen.

CoddyAbschlusszertifikat
Hiermit wird bestätigt, dassMax Mustermannerfolgreich abgeschlossen hat
python iconPython-Grundlagen
Verifiziert
DatumJan. 2026
LinkedInZu LinkedIn hinzufügen

Warum CSS mit Coddy lernen

  • Schreibe CSS in deinem Browser und beobachte, wie sich die Seite live umgestaltet. Kein Build-Schritt, kein Editor-Setup. Jede Änderung an einem Selektor oder einer Eigenschaft erscheint sofort, sodass du siehst, was jede Regel tatsächlich bewirkt.
  • Zentrales CSS: Selektoren und Spezifität, das Box-Modell, Positionierung, Flexbox, CSS Grid, Transitions, Media Queries und responsives Design. Das CSS, das jede Frontend-Entwicklerin und jeder Frontend-Entwickler im Alltag braucht.
  • KI-Hinweise helfen dir, genau die Dinge zu debuggen, über die alle stolpern - überraschende Spezifität, Layout-Überläufe, seltsames Flexbox-Verhalten - ohne die Lösung zu verraten, sodass CSS intuitiv statt magisch wird.
  • Kostenloses CSS-Zertifikat, wenn du den Abschnitt abschließt. Passt natürlich zu den HTML- und JavaScript-Kursen für ein vollständiges Frontend-Fundament.

Häufig gestellte Fragen zum CSS-Lernen

Was ist CSS?

CSS (Cascading Style Sheets) ist die Sprache, die steuert, wie HTML-Seiten aussehen - Farben, Schriften, Abstände, Layout, Animationen, responsives Verhalten über verschiedene Bildschirmgrößen hinweg. HTML legt fest, was auf der Seite steht; CSS legt fest, wie es dargestellt wird.

Ist CSS schwer zu lernen?

Grundlegendes CSS - Selektoren, Farben, Schriften, das Box-Modell - lässt sich in wenigen Stunden erlernen. Die schwierigeren Teile kommen später: Spezifitätsregeln, Flexbox- und Grid-Layouts und dafür zu sorgen, dass alles auf jeder Bildschirmgröße gut aussieht. Der Kurs führt sie in kleinen Schritten mit einer Live-Vorschau ein, sodass du genau siehst, was jede Regel bewirkt.

Sollte ich HTML vor CSS lernen?

Ja. HTML legt die Struktur einer Seite fest; CSS gestaltet sie. Ohne HTML hast du nichts zu gestalten. Genau deshalb ist dieser CSS-Abschnitt Teil der HTML-Lernreise - der Abschnitt zu den HTML-Grundlagen kommt zuerst, danach verbringst du den Großteil der Lernreise damit, sie zu gestalten.

Was ist der Unterschied zwischen CSS, Flexbox und Grid?

Flexbox und Grid sind Layout-Module innerhalb von CSS - sie sind keine eigenständigen Technologien, sondern CSS-Funktionen. Flexbox eignet sich am besten für eindimensionale Layouts (eine Reihe von Karten, eine Navigationsleiste). Grid eignet sich am besten für zweidimensionale Layouts (eine ganze Seite, ein komplexes Karten-Layout). Die meisten echten Websites nutzen beides, und der Kurs zeigt, wann du zu welchem greifst.

Kann ich CSS online kostenlos lernen?

Ja. Der interaktive CSS-Abschnitt ist kostenlos - vollständige Lektionen, Programmierübungen, eine Live-Vorschau und ein Zertifikat. Alles läuft im Browser, sodass du keinen Editor und keine Tools installieren musst, um loszulegen.

Bekomme ich nach dem CSS-Kurs ein Zertifikat?

Ja. Der Abschluss des CSS-Abschnitts verschafft dir ein kostenloses Abschlusszertifikat. Ein überprüfbarer Nachweis, den du deinem Lebenslauf hinzufügen oder neben HTML- und JavaScript-Zertifikaten als Teil eines Frontend-Portfolios auf LinkedIn teilen kannst.

Lernpfade, die diesen Kurs enthalten

Dieser Kurs ist ein Schritt eines längeren Pfads: mehrere Kurse in der Reihenfolge, in der ein Mentor sie unterrichten würde, jeder mit eigenem kostenlosem Zertifikat.

Illustration der Programmiersprachen bei Coddy

Lerne Styling mit CSS mit Coddy

Los geht's