0Pricing
CSS Academy icon

CSS Academy

CSSWebFrontendBeginner

Améliorez vos designs web avec CSS grâce à des cours complets à CSS Academy.

🤖 Alimenté par l'IA📚 40 cours👥 100 000+ apprenants⭐ Note 4,9
Présentation du Cours

CSS : Le Langage qui Style le Web

CSS contrôle chaque détail visuel d'une page web — couleur, mise en page, espacement, animation et réactivité. Il a évolué d'une simple couche de présentation vers un langage complet de système de conception, avec des fonctionnalités modernes comme les container queries, @layer, les logical properties et l'API Houdini donnant aux développeurs un contrôle fin du rendu. Cette piste couvre l'intégralité de CSS, de votre premier sélecteur à l'architecture de systèmes de conception scalables utilisés dans de grandes bases de code en production.

Ce que vous apprendrez

Vous commencerez par la syntaxe, les sélecteurs, les couleurs et la typographie, puis construirez une compréhension solide du box model, des propriétés display et du positionnement. De là, vous travaillerez sur Flexbox et CSS Grid pour les mises en page standard et avancées, appliquerez la responsive design et les media queries, et utiliserez les variables CSS, les fonctions personnalisées et les design tokens pour un thème maintenable. Vous couvrirez aussi les transitions, les animations keyframe, les transforms, les filtres, les blend modes et le dark mode — plus les outils modernes avec Sass, PostCSS et les patterns CSS-in-JS. La piste se termine avec l'architecture CSS utilisant BEM, la spécificité et la cascade, les container queries, les @layer cascade layers, CSS Houdini et la performance.

Le Parcours d'Apprentissage

Quarante cours couvrent A1 à C1. Les cours A1 et A2 précoces établissent les fondamentaux — sélecteurs, box model, pseudo-classes, pseudo-éléments et unités. Les cours B1 couvrent Flexbox, Grid, responsive design, animations, débogage avec DevTools et les fonctions CSS. Les cours B2 montent en niveau vers Flexbox et Grid avancés, Sass, PostCSS, CSS-in-JS, design tokens, CSS Shapes, logical properties, container queries et CSS Layers. Les trois cours C1 — CSS Houdini, CSS Performance et CSS Future — adressent l'avant-garde de la plateforme.

Comment ça marche

Chaque cours est divisé en leçons courtes et ciblées que vous complétez directement dans l'éditeur intégré avec des retours en temps réel. Un tuteur IA est disponible chaque fois que vous êtes bloqué, et la progression est délibérément incrémentale de sorte que chaque concept renforce le précédent avant que le suivant ne soit introduit.

Commencer →

Comment Tu Vas Apprendre

🎯
Leçons Interactives
Exercices de codage pratiques avec retours en temps réel
🤖
Tuteur IA
Obtiens une aide instantanée de notre IA quand tu es bloqué
💻
Éditeur Intégré
Écris et exécute du code directement dans ton navigateur
🏆
Certificat
Obtiens un certificat en complétant le cours
Programme

40 Cours

Tous les cours du parcours d'apprentissage CSS Academy.

01

Syntaxe et sélecteurs CSS

A13 leçons

Découvrez la syntaxe fondamentale de CSS et apprenez à cibler les éléments HTML avec des sélecteurs de balise, de classe, d’ID, d’attribut…

02

Couleurs et arrière-plans

A14 leçonsPRO

Maîtrisez les formats de couleur CSS et les propriétés d’arrière-plan pour créer des pages web visuellement riches.

03

Typographie et texte

A14 leçonsPRO

Mettez en forme le texte avec les polices, les tailles, les graisses et l’alignement, et découvrez les techniques de chargement de polices…

04

Le modèle de boîte

A24 leçonsPRO

Comprenez que chaque élément HTML est une boîte et contrôlez sa taille, ses espacements, ses bordures et ses ombres.

05

Propriétés d’affichage

A24 leçonsPRO

Contrôlez la manière dont les éléments s’écoulent dans le document avec les modes d’affichage bloc, en ligne et bloc en ligne.

06

Principes essentiels du positionnement

A24 leçonsPRO

Sortez les éléments du flux normal à l’aide des valeurs de positionnement CSS et contrôlez leur superposition avec z-index.

07

Unités et valeurs CSS

A24 leçonsPRO

Maîtrisez les unités CSS absolues et relatives pour créer des mises en page évolutives et adaptatives.

08

Pseudo-classes

A24 leçonsPRO

Ciblez les éléments selon leur état, leur position et leur relation avec les autres éléments grâce aux pseudo-classes.

09

Pseudo-éléments

A24 leçonsPRO

Insérez du contenu décoratif et mettez en forme des parties précises des éléments avec les pseudo-éléments CSS.

10

Fondamentaux de Flexbox

B14 leçonsPRO

Créez des mises en page unidimensionnelles avec CSS Flexbox en contrôlant la direction, l’alignement et le retour à la ligne.

11

Principes de base de CSS Grid

B14 leçonsPRO

Créez de puissantes mises en page bidimensionnelles avec CSS Grid grâce aux pistes, aux espaces et aux zones de modèle.

12

Conception adaptative

B14 leçonsPRO

Créez des mises en page qui s’adaptent harmonieusement à toutes les tailles d’écran grâce aux largeurs fluides et aux techniques adaptative…

13

Requêtes média

B14 leçonsPRO

Appliquez différents styles selon la taille et l’orientation de l’écran ainsi que les préférences de l’utilisateur grâce aux requêtes média.

14

Variables CSS

B14 leçonsPRO

Créez des feuilles de style faciles à maintenir grâce aux propriétés personnalisées réutilisables et modifiables dynamiquement.

15

Transitions CSS

B14 leçonsPRO

Ajoutez des changements d’état animés et fluides aux propriétés CSS avec la notation abrégée transition et les fonctions de temporisation.

16

Animations CSS et images clés

B14 leçonsPRO

Créez des animations complexes en plusieurs étapes avec @keyframes et la propriété abrégée animation.

17

Transformations CSS

B14 leçonsPRO

Déplacez, faites pivoter, redimensionnez et inclinez les éléments dans un espace 2D ou 3D avec les fonctions de transformation CSS.

18

Spécificité et cascade

B14 leçonsPRO

Comprenez en profondeur comment CSS détermine quelles règles l’emportent lorsque plusieurs règles ciblent le même élément.

19

Fonctions CSS

B14 leçonsPRO

Utilisez de puissantes fonctions CSS pour les calculs dynamiques, le dimensionnement fluide, les mises en page en grille et la manipulation…

20

Filtres et modes de fusion

B14 leçonsPRO

Appliquez des effets visuels aux éléments et aux images avec les filtres CSS et la composition par modes de fusion.

21

Défilement et dépassement

B14 leçonsPRO

Contrôlez le comportement du défilement, les points d’accrochage et le rognage du dépassement pour offrir une expérience fluide.

22

Mode sombre et schémas de couleurs

B14 leçonsPRO

Mettez en œuvre un mode sombre automatique et manuel avec les variables CSS, color-scheme et les requêtes média.

23

Débogage CSS et DevTools

B14 leçonsPRO

Maîtrisez les DevTools du navigateur pour inspecter et déboguer la mise en page, les animations et les styles calculés CSS.

24

Flexbox avancé

B24 leçonsPRO

Allez au-delà des bases avec l’alignement et l’ordre avancés de Flexbox, ainsi que des modèles de mise en page réalistes.

25

Grid avancé

B24 leçonsPRO

Libérez toute la puissance de CSS Grid avec les lignes nommées, le placement automatique, subgrid et les modèles complexes.

26

Architecture CSS et BEM

B24 leçonsPRO

Organisez les grandes bases de code CSS avec des modèles architecturaux, des conventions de nommage et des structures de fichiers.

27

Formes CSS et clip-path

B24 leçonsPRO

Créez des éléments non rectangulaires et des formes autour desquelles le texte s’enroule avec clip-path et CSS Shapes.

28

Propriétés logiques CSS

B24 leçonsPRO

Écrivez du CSS indépendant de la direction, compatible avec les langues de gauche à droite comme de droite à gauche, grâce aux propriétés l…

29

Requêtes de conteneur

B24 leçonsPRO

Appliquez des styles selon la taille du conteneur d’un composant plutôt que selon la fenêtre d’affichage grâce aux requêtes de conteneur.

30

Calques CSS (@layer)

B24 leçonsPRO

Gérez explicitement la priorité de la cascade CSS avec @layer afin d’éliminer les conflits de spécificité dans les grandes bases de code.

31

Préprocesseur Sass

B24 leçonsPRO

Boostez l’écriture de CSS avec les variables, l’imbrication, les mixins et les fonctions du préprocesseur Sass.

32

PostCSS et outils CSS

B24 leçonsPRO

Transformez et optimisez CSS avec les extensions PostCSS pour l’ajout automatique de préfixes, la minification et les transformations perso…

33

Modèles CSS-in-JS

B24 leçonsPRO

Explorez la mise en forme limitée aux composants avec styled-components, Emotion, CSS Modules et Vanilla Extract.

34

Jetons de conception et thèmes

B24 leçonsPRO

Construisez des systèmes de conception évolutifs avec des jetons de conception et des thèmes multi-marques fondés sur les propriétés person…

35

Tests CSS

B24 leçonsPRO

Garantissez la correction et la cohérence visuelle de CSS grâce aux tests de régression, aux tests unitaires et aux audits d’accessibilité.

36

Modèles de composants CSS

B24 leçonsPRO

Créez des composants d’interface prêts pour la production, comme des cartes, des fenêtres modales, des menus déroulants et des onglets, ave…

37

Modèles de mise en page modernes

B24 leçonsPRO

Mettez en œuvre des modèles de mise en page avancés et réalistes avec les techniques modernes de CSS Grid et Flexbox.

38

CSS Houdini

C14 leçonsPRO

Étendez CSS lui-même avec JavaScript grâce aux API Houdini pour les propriétés personnalisées, la peinture et la mise en page.

39

Performances CSS

C14 leçonsPRO

Optimisez la livraison et le rendu de CSS en comprenant le pipeline de rendu du navigateur.

40

CSS de demain

C14 leçonsPRO

Explorez les avancées de CSS avec l’imbrication native, :has(), les styles limités à une portée et les transitions de vue.

FAQ

Questions Fréquemment Posées

Le cours CSS Academy est-il gratuit ?

Oui. Tu peux commencer le cours CSS Academy gratuitement et compléter ses leçons interactives sans frais. Un abonnement PRO optionnel déverrouille des outils IA avancés et un certificat partageable.

Ai-je besoin d'expérience préalable pour apprendre CSS ?

Non. Le cours commence par les fondamentaux et progresse graduellement vers des sujets plus avancés, tu peux donc commencer même sans expérience préalable en CSS.

Comment vais-je apprendre CSS sur CoddyKit ?

Tu apprends en faisant. Des leçons interactives courtes associent une explication claire avec un exercice de codage pratique qui s'exécute en temps réel, et un tuteur IA disponible 24h/24 offre une aide personnalisée dès que tu es bloqué.

Puis-je obtenir un certificat en complétant CSS Academy ?

Oui. Les apprenants PRO peuvent passer un examen et obtenir un certificat de réussite partageable avec un code vérifiable pour le cours CSS Academy.

Puis-je apprendre CSS sur mon téléphone ?

Oui. CoddyKit est disponible sur le web et sous forme d'applications iOS et Android natives, tu peux donc apprendre CSS sur n'importe quel appareil et ta progression se synchronise entre eux.

Commencez CSS Academy Maintenant

Rejoignez des milliers d'apprenants maîtrisant la programmation avec des cours alimentés par l'IA.

Commencer Gratuitement →Parcourir Tous les Cours