Teil der HTML-JourneyBeliebtJourneyCSS 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.
269,396+ codders eingeschrieben
- Anfängerfreundlich
KI-gestützte Coding-Hilfe
Praktische, interaktive Lektionen
Audio-Erzählung in jeder Lektion
Quizfragen zum Wissenstest
Kostenloses Abschlusszertifikat
Lehrplan
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.
- Abschnitt 1Fundamentals60 Lektionen
Abschnitt 2
Styling with CSS
Abschnitt startenStartenAusklappenEinklappenBring your web pages to life with colors, layouts, and stylesEinführung
5 Lektionen540- 01Was ist CSS?AufgabeQuiz
- 02CSS-SyntaxAufgabeQuiz
- 03CSS-KommentareQuiz
- 04Das Head-TagAufgabeQuiz
- 05Das Title-TagAufgabeMeisterungQuiz
CSS hinzufügen
4 Lektionen725- 01Inline-CSSAufgabeMeisterungQuiz
- 02Internes CSSAufgabeMeisterungQuiz
- 03Externes CSSAufgabeMeisterungQuiz
- 04Grundlagen-Styling-ChallengeAufgabe
Grundlegende Selektoren
7 Lektionen1247- 01Einführung in SelektorenAufgabeQuiz
- 02Typ-SelektorAufgabeMeisterungQuiz
- 03Klassen-SelektorAufgabeMeisterungQuiz
- 04ID-SelektorAufgabeMeisterungQuiz
- 05Gruppen-SelektorenAufgabeMeisterungQuiz
- 06Universal-SelektorAufgabeMeisterungQuiz
- 07Selektions-HerausforderungAufgabe
Text-Grundlagen
8 Lektionen1450- 01TextfarbeAufgabeMeisterungQuiz
- 02SchriftfamilieAufgabeMeisterungQuiz
- 03SchriftgrößeAufgabeMeisterungQuiz
- 04SchriftstärkeAufgabeMeisterungQuiz
- 05TextausrichtungAufgabeMeisterungQuiz
- 06TextdekorationAufgabeMeisterungQuiz
- 07Wiederholungs-Challenge #1Aufgabe
- 08Wiederholungs-Challenge #2Aufgabe
Farben und Hintergründe
5 Lektionen834- 01HintergrundfarbeAufgabeMeisterungQuiz
- 02HEX-FarbenAufgabeMeisterungQuiz
- 03RGB-FarbenAufgabeMeisterungQuiz
- 04Transparenz mit RGBAAufgabeQuiz
- 05Wiederholungs-Challenge #1Aufgabe
Café-Menü
Projekt3 Lektionen1- 01Typografie-GrundlagenAufgabe
- 02Text-StylingProjekt
- 03Farben und HintergründeProjekt
Box-Modell Teil 1
6 Lektionen943- 01Was ist das Box-Modell?Quiz
- 02PaddingAufgabeMeisterungQuiz
- 03MarginsAufgabeMeisterungQuiz
- 04BordersAufgabeMeisterungQuiz
- 05Breite und HöheAufgabeMeisterungQuiz
- 06Wiederholungs-ChallengeAufgabe
Box-Modell Teil 2
5 Lektionen834- 01Box-SizingAufgabeQuiz
- 02Border-RadiusAufgabeMeisterungQuiz
- 03OverflowAufgabeMeisterungQuiz
- 04Box-ShadowAufgabeMeisterungQuiz
- 05Recap-ChallengeAufgabe
Flexbox
6 Lektionen943- 01Was ist Flexbox?AufgabeQuiz
- 02Flex DirectionAufgabeMeisterungQuiz
- 03Justify ContentAufgabeMeisterungQuiz
- 04Align ItemsAufgabeMeisterungQuiz
- 05Die perfekte ZentrierungAufgabeQuiz
- 06Flexbox-HerausforderungAufgabe
Login-Formular
Projekt4 Lektionen1- 01BodyAufgabe
- 02Formular-ContainerProjekt
- 03EingabefeldProjekt
- 04ButtonProjekt
Layout-Techniken
7 Lektionen1152- 01Block- vs. Inline-ElementeAufgabeQuiz
- 02Grundlagen der PositionierungAufgabeMeisterungQuiz
- 03Relative PositionierungAufgabeMeisterungQuiz
- 04Absolute PositionierungAufgabeMeisterungQuiz
- 05Fixierte PositionierungAufgabeMeisterungQuiz
- 06Z-Index GrundlagenAufgabeQuiz
- 07Wiederholungs-ChallengeAufgabe
Grundlagen des Responsive Designs
6 Lektionen1052- 01Was ist Responsive Design?AufgabeQuiz
- 02Viewport Meta TagAufgabeQuiz
- 03Fluid LayoutsAufgabeMeisterungQuiz
- 04Viewport-EinheitenAufgabeMeisterungQuiz
- 05Media Queries GrundlagenAufgabeMeisterungQuiz
- 06Flexible BilderAufgabeMeisterungQuiz
Tonga Webseite
Projekt6 Lektionen1- 01NavigationsmenüAufgabe
- 02Willkommens-HeaderProjekt
- 03Über-uns-BereichProjekt
- 04Kontakt-BereichProjekt
- 05Viewport-TagProjekt
- 06Media QueryProjekt
Abschluss-Herausforderungen
4 Lektionen4- 01Elemente anordnenAufgabe
- 02FilmlisteAufgabe
- 03HochzeitseinladungAufgabe
- 04Schwebende BenachrichtigungAufgabe
Abschnitt 3
CSS Mastery
Abschnitt startenStartenAusklappenEinklappenTake you css skills to the next level!Selektoren-Meisterschaft – Kombinationen
6 Lektionen539- 01EinführungQuiz
- 02Nachfahren-SelektorAufgabeQuiz
- 03Kind-SelektorAufgabeQuiz
- 04Direkter Nachbar-SelektorAufgabeQuiz
- 05Allgemeiner Geschwister-SelektorAufgabeQuiz
- 06Wiederholungs-ChallengeAufgabe
Interaktive Pseudoklassen
5 Lektionen431- 01PseudoklassenQuiz
- 02Hover-EffekteAufgabeQuiz
- 03Fokus-EffekteAufgabeQuiz
- 04Aktiv-StylesAufgabeQuiz
- 05Wiederholungs-ChallengeAufgabe
Strukturelle Pseudoklassen
5 Lektionen432- 01Strukturelle PseudoklassenQuiz
- 02Das erste Kind-Element ansprechenAufgabeQuiz
- 03Das letzte Kind-Element ansprechenAufgabeQuiz
- 04Muster-Power: nth-child nutzenAufgabeQuiz
- 05Wiederholungs-ChallengeAufgabe
Projekt: Dropdown-Menü
4 Lektionen4- 01Das Untermenü hinzufügenAufgabe
- 02Das Untermenü anzeigenAufgabe
- 03Weiteres StylingAufgabe
- 04Input und ButtonAufgabe
Visuelle Effekte
5 Lektionen536- 01FarbverläufeAufgabeQuiz
- 02CSS-FilterAufgabeQuiz
- 03TransformationenAufgabeQuiz
- 04Übergänge & Hover-EffekteAufgabeQuiz
- 05Wiederholungs-ChallengeAufgabe
Landing Page
5 Lektionen5- 01Header-Bereich stylenAufgabe
- 02Den Button stylenAufgabe
- 03Sektions-LayoutAufgabe
- 04Card-LayoutAufgabe
- 05Den letzten Schliff hinzufügenAufgabe
Erstellen mit CSS Grid
4 Lektionen426- 01Grid-GrundlagenAufgabeQuiz
- 02Grid-row ElementplatzierungAufgabeQuiz
- 03Benannte BereicheAufgabeQuiz
- 04Wiederholungs-ChallengeAufgabe
Flavor Fiesta Website
4 Lektionen4- 01Das Grid einrichtenAufgabe
- 02HeaderAufgabe
- 03Der HauptteilAufgabe
- 04FooterAufgabe
Abschluss-Herausforderungen
5 Lektionen5- 01Aktives Menü hervorhebenAufgabe
- 02Zebra-TabellenzeilenAufgabe
- 03Button-Hover-EffektAufgabe
- 04Grid-Card-LayoutAufgabe
- 05Verschwommenes Hero-ImageAufgabe
- Abschnitt 4Practical Frontend35 Lektionen
- Abschnitt 5JavaScript in Action27 Lektionen
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.
