Fait partie du Journey HTMLPopulaireParcoursApprendre 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à.
269,396+ codders inscrits
- Adapté aux débutants
Aide au codage assistée par IA
Leçons interactives et pratiques
Narration audio dans chaque leçon
Quiz pour tester vos connaissances
Certificat gratuit de réussite
Programme
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.
- Section 1Fundamentals60 leçons
Section 2
Styling with CSS
Commencer la sectionDémarrerDévelopperRéduireBring your web pages to life with colors, layouts, and stylesIntroduction
5 leçons540- 01Qu'est-ce que le CSS ?DéfiQuiz
- 02Syntaxe CSSDéfiQuiz
- 03Commentaires CSSQuiz
- 04La balise HeadDéfiQuiz
- 05La balise TitleDéfiMaîtriseQuiz
Ajouter du CSS
4 leçons725- 01CSS en ligneDéfiMaîtriseQuiz
- 02CSS interneDéfiMaîtriseQuiz
- 03CSS externeDéfiMaîtriseQuiz
- 04Défi de stylisation de baseDéfi
Sélecteurs de base
7 leçons1247- 01Introduction aux sélecteursDéfiQuiz
- 02Sélecteur de typeDéfiMaîtriseQuiz
- 03Sélecteur de classeDéfiMaîtriseQuiz
- 04Sélecteur d'IDDéfiMaîtriseQuiz
- 05Sélecteurs de groupeDéfiMaîtriseQuiz
- 06Sélecteur universelDéfiMaîtriseQuiz
- 07Défi de sélectionDéfi
Les bases du texte
8 leçons1450- 01Couleur du texteDéfiMaîtriseQuiz
- 02Famille de policesDéfiMaîtriseQuiz
- 03Taille de policeDéfiMaîtriseQuiz
- 04Graisse de policeDéfiMaîtriseQuiz
- 05Alignement du texteDéfiMaîtriseQuiz
- 06Décoration du texteDéfiMaîtriseQuiz
- 07Défi récapitulatif n°1Défi
- 08Défi récapitulatif n°2Défi
Couleurs et arrière-plans
5 leçons834- 01Couleur d'arrière-planDéfiMaîtriseQuiz
- 02Couleurs HEXDéfiMaîtriseQuiz
- 03Couleurs RGBDéfiMaîtriseQuiz
- 04Transparence avec RGBADéfiQuiz
- 05Défi récapitulatif n°1Défi
Menu de café
Projet3 leçons1- 01Bases de la typographieDéfi
- 02Style du texteProjet
- 03Couleurs et arrière-plansProjet
Modèle de boîte - Partie 1
6 leçons943- 01Qu'est-ce que le Modèle de boîte ?Quiz
- 02PaddingDéfiMaîtriseQuiz
- 03MargesDéfiMaîtriseQuiz
- 04BorduresDéfiMaîtriseQuiz
- 05Largeur et HauteurDéfiMaîtriseQuiz
- 06Défi récapitulatifDéfi
Modèle de boîte, partie 2
5 leçons834- 01Box SizingDéfiQuiz
- 02Border RadiusDéfiMaîtriseQuiz
- 03OverflowDéfiMaîtriseQuiz
- 04Box ShadowDéfiMaîtriseQuiz
- 05Défi récapitulatifDéfi
Flex Box
6 leçons943- 01Qu'est-ce que le Flex Box ?DéfiQuiz
- 02Flex DirectionDéfiMaîtriseQuiz
- 03Justify ContentDéfiMaîtriseQuiz
- 04Align ItemsDéfiMaîtriseQuiz
- 05Le centrage parfaitDéfiQuiz
- 06Défi Flex BoxDéfi
Formulaire de connexion
Projet4 leçons1- 01CorpsDéfi
- 02Conteneur du formulaireProjet
- 03Champ de saisieProjet
- 04BoutonProjet
Techniques de mise en page
7 leçons1152- 01Éléments Block vs InlineDéfiQuiz
- 02Les bases du positionnementDéfiMaîtriseQuiz
- 03Positionnement relatifDéfiMaîtriseQuiz
- 04Positionnement absoluDéfiMaîtriseQuiz
- 05Positionnement fixeDéfiMaîtriseQuiz
- 06Les bases du Z-IndexDéfiQuiz
- 07Défi récapitulatifDéfi
Bases du Responsive Design
6 leçons1052- 01Qu'est-ce que le Responsive Design ?DéfiQuiz
- 02Balise meta ViewportDéfiQuiz
- 03Mises en page fluidesDéfiMaîtriseQuiz
- 04Unités de ViewportDéfiMaîtriseQuiz
- 05Bases des Media QueriesDéfiMaîtriseQuiz
- 06Images flexiblesDéfiMaîtriseQuiz
Page Web Tonga
Projet6 leçons1- 01Menu de navigationDéfi
- 02En-tête de bienvenueProjet
- 03Section À proposProjet
- 04Section ContactProjet
- 05Balise ViewportProjet
- 06Media QueryProjet
Défis finaux
4 leçons4- 01Disposer les élémentsDéfi
- 02Liste de filmsDéfi
- 03Carte d'invitation de mariageDéfi
- 04Notification flottanteDéfi
Section 3
CSS Mastery
Commencer la sectionDémarrerDévelopperRéduireTake you css skills to the next level!Maîtrise des sélecteurs – Combinaisons
6 leçons539- 01IntroductionQuiz
- 02Sélecteur de descendantDéfiQuiz
- 03Sélecteur d'enfantDéfiQuiz
- 04Sélecteur de frère adjacentDéfiQuiz
- 05Sélecteur de frère généralDéfiQuiz
- 06Défi récapitulatifDéfi
Pseudo-classes interactives
5 leçons431- 01Pseudo-classesQuiz
- 02Effets de survolDéfiQuiz
- 03Effets de focusDéfiQuiz
- 04Styles actifsDéfiQuiz
- 05Défi récapitulatifDéfi
Pseudo-classes structurelles
5 leçons432- 01Pseudo-classes structurellesQuiz
- 02Cibler le premier enfantDéfiQuiz
- 03Cibler le dernier enfantDéfiQuiz
- 04La puissance des motifs : utiliser nth-childDéfiQuiz
- 05Défi récapitulatifDéfi
Projet de menu déroulant
4 leçons4- 01Ajouter le sous-menuDéfi
- 02Afficher le sous-menuDéfi
- 03Plus de stylesDéfi
- 04Input et boutonDéfi
Effets visuels
5 leçons536- 01DégradésDéfiQuiz
- 02Filtres CSSDéfiQuiz
- 03TransformationsDéfiQuiz
- 04Transitions et effets de survolDéfiQuiz
- 05Défi récapitulatifDéfi
Landing Page
5 leçons5- 01Styler la section d'en-têteDéfi
- 02Styler le boutonDéfi
- 03Mise en page de la sectionDéfi
- 04Mise en page des cartesDéfi
- 05Ajouter les touches finalesDéfi
Construire avec CSS Grid
4 leçons426- 01Les bases de GridDéfiQuiz
- 02Placement d'éléments Grid-rowDéfiQuiz
- 03Zones nomméesDéfiQuiz
- 04Défi récapitulatifDéfi
Site web Flavor Fiesta
4 leçons4- 01Configuration de la grilleDéfi
- 02En-têteDéfi
- 03La partie principaleDéfi
- 04Pied de pageDéfi
Défis finaux
5 leçons5- 01Mise en évidence du menu actifDéfi
- 02Lignes de tableau en zèbreDéfi
- 03Effet de survol de boutonDéfi
- 04Mise en page de cartes en GridDéfi
- 05Image Hero floutéeDéfi
- Section 4Practical Frontend35 leçons
- Section 5JavaScript in Action27 leçons
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.
