Menu
Coddy logo textTech
COMMENCER À APPRENDRE
flag Fr iconFrançaisdown icon
html iconFait partie du Journey HTMLPopulaireParcours

Apprendre CSS

Un cours CSS gratuit et interactif. À chaque leçon, vous mettez en forme du vrai HTML - sélecteurs, modèle de boîte, couleurs, polices, flexbox, grid, design responsive - avec un aperçu en direct au fil de votre saisie et un certificat gratuit à la fin. Ce cours fait partie du parcours HTML plus large, donc le contexte de balisage dont CSS a besoin est juste là.

COMMENCER À APPRENDRE(c'est gratuit)
Voir le programmePlayground Styling with CSS

281,604+ codders inscrits

119 leçons104 défis583 questions de quiz

  • Adapté aux débutants
  • sparkles iconAide au codage assistée par IA
  • hint iconLeçons interactives et pratiques
  • volume On iconNarration audio dans chaque leçon
  • quiz iconQuiz pour tester vos connaissances
  • certificate iconCertificat gratuit de réussite

Programme

2 sections3 projets119 leçons104 défis583 questions de quiz

Cette section fait partie du Journey HTML. Le programme complet contient d'autres sections - clique sur n'importe quel aperçu ci-dessous pour le voir sur la page du Journey.

  1. Section 1Fundamentals60 leçons
  2. Section 2

    Styling with CSS

    Commencer la sectionDémarrerDévelopperRéduire    Bring your web pages to life with colors, layouts, and styles76 leçons100 défis419 questions3 projets

    Introduction

    5 leçons540

    Ajouter du CSS

    4 leçons725

    Sélecteurs de base

    7 leçons1247

    Les bases du texte

    8 leçons1450

    Couleurs et arrière-plans

    5 leçons834

    Menu de café

    Projet3 leçons1

    Modèle de boîte - Partie 1

    6 leçons943

    Modèle de boîte, partie 2

    5 leçons834

    Flex Box

    6 leçons943

    Formulaire de connexion

    Projet4 leçons1

    Techniques de mise en page

    7 leçons1151

    Bases du Responsive Design

    6 leçons1052

    Page Web Tonga

    Projet6 leçons1

    Défis finaux

    4 leçons4
  3. Section 3

    CSS Mastery

    Commencer la sectionDémarrerDévelopperRéduire    Take you css skills to the next level!43 leçons40 défis164 questions

    Maîtrise des sélecteurs – Combinaisons

    6 leçons539

    Pseudo-classes interactives

    5 leçons431

    Pseudo-classes structurelles

    5 leçons432

    Projet de menu déroulant

    4 leçons4

    Effets visuels

    5 leçons536

    Landing Page

    5 leçons5

    Construire avec CSS Grid

    4 leçons426

    Site web Flavor Fiesta

    4 leçons4

    Défis finaux

    5 leçons5
  4. Section 4Practical Frontend35 leçons
  5. Section 5JavaScript in Action27 leçons
Voir le programme complet du Journey HTML
Ce que vous obtenez
Tout ce que vous utiliserez pour apprendre à coder

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

Pourquoi apprendre CSS avec Coddy

  • Écrivez du CSS dans votre navigateur et regardez la page se remettre en forme en direct. Aucune étape de build, aucune configuration d'éditeur. Chaque modification d'un sélecteur ou d'une propriété s'affiche instantanément, pour que vous voyiez ce que fait réellement chaque règle.
  • Le CSS essentiel : sélecteurs et spécificité, modèle de boîte, positionnement, flexbox, CSS grid, transitions, media queries et design responsive. Le CSS dont chaque développeur front-end a besoin au quotidien.
  • Les indices IA vous aident à déboguer ce qui fait toujours trébucher tout le monde - surprises de spécificité, débordements de mise en page, comportements étranges de flexbox - sans dévoiler la solution, pour que CSS devienne intuitif au lieu de magique.
  • Un certificat CSS gratuit à la fin de la section. Il se combine naturellement aux cours HTML et JavaScript pour une base front-end complète.

Questions fréquentes sur l'apprentissage de CSS

Qu'est-ce que CSS ?

CSS (Cascading Style Sheets) est le langage qui contrôle l'apparence des pages HTML - couleurs, polices, espacements, mise en page, animations, comportement responsive selon la taille de l'écran. Le HTML définit ce qui se trouve sur la page ; le CSS définit comment c'est présenté.

CSS est-il difficile à apprendre ?

Les bases de CSS - sélecteurs, couleurs, polices, modèle de boîte - s'acquièrent facilement en quelques heures. Les parties plus ardues viennent ensuite : les règles de spécificité, les mises en page flexbox et grid, et le fait de rendre les choses correctes sur chaque taille d'écran. Le cours les introduit par petites étapes avec un aperçu en direct, pour que vous voyiez exactement ce que fait chaque règle.

Dois-je apprendre HTML avant CSS ?

Oui. Le HTML définit la structure d'une page ; le CSS la met en forme. Sans HTML, vous n'avez rien à styliser. C'est pour cette raison que cette section CSS fait partie du parcours HTML - la section sur les fondamentaux du HTML vient en premier, puis vous passez l'essentiel du parcours à la mettre en forme.

Quelle est la différence entre CSS, Flexbox et Grid ?

Flexbox et Grid sont des modules de mise en page à l'intérieur de CSS - ce ne sont pas des technologies distinctes, ce sont des fonctionnalités de CSS. Flexbox est idéal pour les mises en page à une dimension (une rangée de cartes, une barre de navigation). Grid est idéal pour les mises en page à deux dimensions (une page entière, une disposition de cartes complexe). La plupart des sites réels utilisent les deux, et le cours explique quand recourir à chacun.

Puis-je apprendre CSS en ligne gratuitement ?

Oui. La section interactive sur CSS est gratuite - des leçons complètes, des exercices de code, un aperçu en direct et un certificat. Tout se déroule dans le navigateur, vous n'avez donc besoin d'installer aucun éditeur ni outil pour commencer.

Est-ce que j'obtiens un certificat après le cours CSS ?

Oui. Terminer la section CSS vous donne un certificat d'achèvement gratuit. Une preuve vérifiable que vous pouvez ajouter à votre CV ou partager sur LinkedIn, aux côtés des certificats HTML et JavaScript, dans le cadre d'un portfolio front-end.
Coddy programming languages illustration

Learn Styling with CSS with Coddy

COMMENCER