En bref
Voici 10 exercices de CSS progressifs avec leur piste de correction, construits comme une montée en gamme visuelle : styliser une carte de visite (couleurs et typographie), créer un bouton avec effet au survol, centrer une boîte parfaitement (le grand classique, réglé par flexbox), fabriquer une carte produit avec ombre et arrondis, monter une barre de navigation horizontale, disposer une galerie en grille, rendre une page responsive (deux colonnes sur ordinateur, une sur mobile), implémenter un dark mode simple, reproduire à l’identique une carte d’un site connu, et enfin styliser entièrement le CV construit dans les exercices HTML — la synthèse finale. Chaque exercice cible une notion précise du socle : box model, sélecteurs, flexbox, grid, media queries. Le correcteur, c’est ton œil : compare, ajuste, recommence.
Le CSS s’apprend en fabriquant des choses belles — ou au moins de plus en plus propres. Ces 10 exercices de CSS forment une montée en gamme visuelle, chacun ciblant une notion du socle vu dans les bases du CSS, dans le cadre du parcours apprendre le CSS. Munis-toi d’une page HTML simple comme terrain, et de l’inspecteur comme assistant.
Exercices 1 à 5 : composants et box model
- La carte de visite stylée. Reprends ta toute première page HTML : fond doux, police lisible, titre coloré, texte centré. Piste : background-color sur le body, font-family, color et text-align — quatre propriétés, première transformation spectaculaire.
- Le bouton à états. Un vrai bouton : couleur de fond, texte blanc, coins arrondis, et une couleur qui change au survol. Piste : padding généreux, border-radius, cursor: pointer, puis le pseudo-sélecteur :hover pour l’état survolé — ta première interaction, sans une ligne de JavaScript.
- Le centrage parfait. Une boîte centrée horizontalement ET verticalement dans la page — le casse-tête historique du CSS. Piste : sur le conteneur, display: flex, justify-content: center, align-items: center et une hauteur définie. Trois lignes qui ont mis vingt ans à exister : savoure.
- La carte produit. Image en haut, titre, description, prix, dans une carte blanche ombrée aux coins arrondis. Piste : le box model au complet — padding intérieur, border-radius, box-shadow discrète, et une largeur fixe. C’est LE composant que tu referas toute ta vie.
- La barre de navigation. Un logo à gauche, quatre liens à droite, le tout aligné sur une ligne. Piste : une liste HTML, puis display: flex sur le conteneur avec justify-content: space-between — et la suppression des puces avec list-style: none. Inspecte les navbars des sites que tu visites : ce sont toutes des variantes de celle-ci.
Exercices 6 à 10 : mise en page, responsive et synthèse
- La galerie en grille. Neuf images en grille de trois colonnes régulièrement espacées. Piste : display: grid, grid-template-columns: repeat(3, 1fr) et gap — la découverte de grid, l’autre système de mise en page moderne, complémentaire de flexbox.
- La page responsive. Deux colonnes (contenu + barre latérale) sur ordinateur, une seule colonne empilée sur mobile. Piste : flexbox ou grid pour la version large, puis une media query @media (max-width: 768px) qui passe le conteneur en colonne — redimensionne la fenêtre pour voir la bascule en direct, puis approfondis avec rendre un site responsive.
- Le dark mode. Un bouton absent, deux ambiances : définis tes couleurs en variables CSS, puis une classe .dark sur le body qui les inverse. Piste : les variables (–fond: white) déclarées dans :root et utilisées avec var(–fond) — bascule la classe à la main dans l’inspecteur ; le bouton de bascule viendra avec le JavaScript.
- La reproduction. Choisis une carte ou un bloc d’un site connu et reproduis-le à l’identique, sans regarder son code. Piste : observe, décompose en boîtes, style, compare, ajuste — puis triche à la fin avec l’inspecteur pour comparer ta solution à l’originale. La méthode complète est dans reproduire un site pour s’entraîner.
- Le CV stylé. La synthèse : reprends le CV en HTML pur de nos exercices de HTML et transforme-le en document dont tu es fier — typographie soignée, sections espacées, touches de couleur, responsive. Piste : tout ce qui précède, plus tes choix. C’est ton premier vrai design, et le brouillon de ton futur portfolio en ligne.
La méthode : l’œil, l’inspecteur, l’itération
Le CSS a son propre mode de correction : le résultat visuel. Pas de message d’erreur quand une propriété est ignorée — juste une page qui ne ressemble pas à ce que tu voulais. D’où trois réflexes de travail. L’inspecteur en permanence : modifie les valeurs en direct dans les DevTools (glisse sur les nombres, change les couleurs), puis reporte dans ton fichier ce qui fonctionne — c’est dix fois plus rapide que le cycle modifier-sauver-recharger. Une propriété à la fois : quand rien ne se passe, vérifie dans l’inspecteur si ta règle est bien appliquée, barrée (battue par une règle plus spécifique) ou absente (sélecteur raté) — ce diagnostic en trois cas résout la quasi-totalité des mystères. L’itération assumée : personne n’écrit le bon CSS du premier coup ; on approche, on ajuste, on affine — c’est le processus normal, pas un signe de faiblesse.
Un exercice par séance, chaque réussite prolongée d’une variante (le bouton en version contour, la carte avec un badge, la grille passée à quatre colonnes), et la série te laisse avec un portefeuille de composants réutilisables — exactement ce qu’il faut avant d’assembler ton premier site complet. Pour continuer à t’entraîner ensuite, les sites d’exercices gratuits proposent tous des défis CSS visuels, du composant au design entier.
Un rituel simple pour finir : la capture avant/après. Photographie l’écran de chaque exercice à son état brut, puis à son état final, et range les paires dans un dossier. En CSS plus que partout ailleurs, la progression se voit — littéralement — et ce dossier deviendra ta meilleure preuve les jours de doute, quand tu auras l’impression de stagner. Dans deux mois, la comparaison entre ta première carte produit et ta dernière te fera sourire ; c’est exactement l’effet recherché, et le carburant qui manque à la plupart des débutants.
Questions fréquentes
Quels exercices CSS pour un débutant complet ?
Commence par les composants isolés : styliser une page simple (couleurs, police), créer un bouton avec effet de survol, centrer une boîte avec flexbox, fabriquer une carte avec ombre et arrondis. Chacun cible une notion précise et donne un résultat visuel immédiat.
Comment déboguer du CSS qui ne s’applique pas ?
Ouvre l’inspecteur sur l’élément concerné et regarde ta règle : si elle est absente, ton sélecteur est faux ; si elle est barrée, une règle plus spécifique la bat ; si elle est présente et active, le problème vient d’ailleurs (box model, héritage). Ce diagnostic en trois cas couvre presque tout.
Faut-il apprendre grid si on connaît déjà flexbox ?
Oui, les deux sont complémentaires : flexbox excelle sur un axe (aligner une rangée ou une colonne), grid sur deux dimensions (galeries, gabarits de page). La règle pratique : flexbox pour les composants, grid pour les grandes structures — et beaucoup de pages utilisent les deux.
Comment progresser en CSS après les exercices de base ?
Par la reproduction de designs existants, l’usage quotidien de l’inspecteur sur les sites que tu admires, et un projet personnel fil rouge que tu améliores à chaque nouvelle notion. Le CSS se raffine par l’itération sur de vrais projets, pas par l’accumulation de tutoriels.
Sources
- MDN Web Docs — guides CSS, flexbox et grid en français
- freeCodeCamp — défis CSS pratiques et gratuits
Cet article a une vocation informative et pédagogique. Les plateformes, outils et formations éventuellement cités le sont à titre d’exemple ; compare plusieurs options avant de t’engager ou de payer.