Retour
Module 1 : Introduction à CSS
1.1 — Lier CSS à HTML Aperçu
🛠️ Projet 1 — Première mise en forme
Module 2 : Sélecteurs CSS
2.1 — Tous les types de sélecteurs Aperçu
🛠️ Projet 2 — Ciblage précis
Module 3 : Couleurs, fonds et dégradés
3.1 — Maîtriser les couleurs CSS Aperçu
🛠️ Projet 3 — Hero section
Module 4 : Typographie web
4.1 — Polices et texte Aperçu
🛠️ Projet 4 — Article typographié
Module 5 : Box Model — Le modèle de boîte
5.1 — Comprendre le Box Model Aperçu
🛠️ Projet 5 — Cartes produit
Module 6 : Display et positionnement
6.1 — Display : le comportement des boîtes Aperçu
🛠️ Projet 6 — Layout avec position
Module 7 : Flexbox — Layout flexible
7.1 — Flexbox fondamental Aperçu
🛠️ Projet 7 — Page centrée
Module 8 : Flexbox avancé
8.1 — Contrôler les enfants flex Aperçu
🛠️ Projet 8 — Layout 3 colonnes
Module 9 : CSS Grid — Layout en grille
9.1 — Grid fondamental Aperçu
🛠️ Projet 9 — Dashboard Grid
Module 10 : CSS Grid avancé
10.1 — Grid Areas et responsive Aperçu
🛠️ Projet 10 — Galerie auto-responsive
Module 11 : Responsive Design — Media Queries
11.1 — @media et breakpoints Aperçu
🛠️ Projet 11 — Site responsive
Module 12 : Mobile First — Approche pratique
12.1 — Techniques Mobile First Aperçu
🛠️ Projet 12 — Menu hamburger
Module 13 : Transitions et animations CSS
13.1 — Transitions et keyframes Aperçu
🛠️ Projet 13 — Page animée
Module 14 : Pseudo-classes et pseudo-éléments
14.1 — Pseudo-classes et pseudo-éléments Aperçu
🛠️ Projet 14 — Tableau stylé
Module 15 : Variables CSS et organisation
15.1 — CSS propre et scalable Aperçu
🛠️ Projet 15 — Design system
Module 16 : Projet final — Site responsive complet
16.1 — Site responsive professionnel Aperçu

Le reste de la formation est réservé aux inscrits.

S'inscrire gratuitement
Module 15 : Variables CSS et organisation Aperçu gratuit

15.1 — CSS propre et scalable

Variables CSS (Custom Properties)

:root {
  --primary: #3498db;
  --secondary: #2ecc71;
  --spacing: 1rem;
  --border-radius: 8px;
}
.btn {
  background: var(--primary);
  padding: var(--spacing);
  border-radius: var(--border-radius);
}

Changez --primary et TOUT le site s'adapte. Thème sombre ? Changez les variables dans une media query.

Méthodologie BEM

/* Block__Element--Modifier */
.card { }              /* Bloc */
.card__title { }       /* Élément du bloc */
.card--featured { }    /* Modificateur */

BEM évite les conflits de noms et rend le CSS auto-documenté.

🔑 À retenir

Les variables CSS sont natives, pas besoin de SASS/LESS. Elles fonctionnent dans tous les navigateurs modernes et sont dynamiques (modifiables par JS).

Ceci est un aperçu gratuit.
Voir la formation complète