Menu
Coddy logo textTech
JETZT LERNEN
flag De iconDeutschdown icon
html iconTeil der HTML-JourneyBeliebtJourney

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 with CSS-Playground

281,604+ codders eingeschrieben

119 Lektionen104 Aufgaben583 Quizfragen

  • Anfängerfreundlich
  • sparkles iconKI-gestützte Coding-Hilfe
  • hint iconPraktische, interaktive Lektionen
  • volume On iconAudio-Erzählung in jeder Lektion
  • quiz iconQuizfragen zum Wissenstest
  • certificate iconKostenloses Abschlusszertifikat

Lehrplan

2 Abschnitte3 Projekte119 Lektionen104 Aufgaben583 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 1Fundamentals60 Lektionen
  2. Abschnitt 2

    Styling with CSS

    Abschnitt startenStartenAusklappenEinklappen    Bring your web pages to life with colors, layouts, and styles76 Lektionen100 Aufgaben419 Fragen3 Projekte

    Einführung

    5 Lektionen540

    CSS hinzufügen

    4 Lektionen725

    Grundlegende Selektoren

    7 Lektionen1247

    Text-Grundlagen

    8 Lektionen1450

    Farben und Hintergründe

    5 Lektionen834

    Café-Menü

    Projekt3 Lektionen1

    Box-Modell Teil 1

    6 Lektionen943

    Box-Modell Teil 2

    5 Lektionen834

    Flexbox

    6 Lektionen943

    Login-Formular

    Projekt4 Lektionen1

    Layout-Techniken

    7 Lektionen1151

    Grundlagen des Responsive Designs

    6 Lektionen1052

    Tonga Webseite

    Projekt6 Lektionen1

    Abschluss-Herausforderungen

    4 Lektionen4
  3. Abschnitt 3

    CSS Mastery

    Abschnitt startenStartenAusklappenEinklappen    Take you css skills to the next 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 4Practical Frontend35 Lektionen
  5. Abschnitt 5JavaScript in Action27 Lektionen
Den vollständigen Lehrplan der HTML-Journey ansehen
Das bekommst du
Alles, was du zum Programmierenlernen nutzt

Learn by Doing

Write real code, query databases, build websites, and master AI prompts. Our interactive lessons cover every skill modern developers need.

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
Input
"Alex"
Output
"Hello, Coddy! Alex"

Build Your Coding Streak

Stay consistent and watch your progress grow! Track your daily coding habit, protect your streak with freeze days, and earn rewards for showing up every day.

12 days streak

Return tomorrow to keep your streak!

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

Double or Nothing

Day 5 of 7

fire Freeze icon

Streak Freeze

2 left

Code Anywhere, Anytime

Take your coding journey on the go! No setup, no downloads - just open and start coding. Available on iOS, Android and Web with 4.9 star ratings.

Python
7Streak
250Score
5Energy
Variables
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
CONTINUE
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
Journey
Goals
Leaderboard
Profile
4.9
StarStarStarStarStar
Rating

You're Not Alone in This

Compete on global leaderboards, invite friends to earn rewards, and celebrate each other's wins. Coding is better with friends!

Challenger League
Challenger LeagueTop 7 advance
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 iconPromotion zoneleaderboard Arrow Up icon

Every way to learn

Read, listen, test yourself, ask the AI, or look up anything you've already covered. Every lesson meets you where you are.

Intro to Variables
Audio

A variable is a named container that stores a value you can reference later in your program.

In Python, you create one by writing the name, an equals sign, then the value you want to store.

The value can change over time - reassigning the name simply points it to a new value.

1xSarah

Prove Your Skills

Earn certificates for every course you complete. Add them to your LinkedIn profile and resume to showcase your coding expertise to employers.

CoddyCertificate of Completion
This certifies thatJohn Doehas successfully completed
PythonPython Fundamentals
Verified
DateJan 2026
LinkedInAdd to LinkedIn

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.
Coddy programming languages illustration

Learn Styling with CSS with Coddy

LOS GEHT'S