Checklist & Ressources

✅ Checklist de fin de cours

Avant le prochain cours, assurez-vous que :

Vous avez intégré Google Fonts (1-2 polices maximum)
Votre système de variables CSS est complet (couleurs, typo, espacements)
Toutes vos pages utilisent les variables (pas de valeurs en dur)
Votre palette de couleurs est cohérente et adaptée au public cible
L’identité visuelle est reconnaissable sur toutes les pages
Les contrastes texte/fond sont suffisants (testés avec Contrast Checker)

📖 Ressources complémentaires

Typographie

Google Fonts : bibliothèque de polices gratuites
Font Pair : combinaisons de polices harmonieuses
Type Scale : générateur d’échelles typographiques
Modular Scale : créer des proportions typographiques
Font Squirrel : polices gratuites pour usage commercial

Couleurs

Coolors : générateur de palettes de couleurs
Adobe Color : roue chromatique et harmonies
Color Hunt : palettes prêtes à l’emploi
Contrast Checker : vérifier le contraste texte/fond
Paletton : créer des palettes harmonieuses
ColorSpace : générateur de dégradés et palettes

Variables CSS

CSS Variables - MDN : documentation officielle
Open Props : système de variables prêt à l’emploi
CSS Tricks - CSS Custom Properties : guide complet

Sélecteurs CSS

CSS Diner : jeu interactif pour maîtriser les sélecteurs CSS

Inspiration

Dribbble : designs inspirants
Awwwards : sites web primés
Behance : portfolios créatifs
Site Inspire : showcase de sites web

❓ Questions fréquentes

Combien de polices utiliser ?

Maximum 2 : une pour les titres, une pour le texte. Plus = confusion visuelle.

Exemple :

:root {
  --font-heading: 'Montserrat', sans-serif; /* Titres */
  --font-body: 'Open Sans', sans-serif; /* Texte */
}

Comment choisir entre serif et sans-serif ?

Sans-serif : moderne, lisible sur écran, idéal pour les enfants
- Exemples : Arial, Helvetica, Open Sans, Montserrat
- Usage : sites web modernes, interfaces, textes courts
Serif : classique, élégant, bien pour les ados et contenus longs
- Exemples : Georgia, Times, Lora, Merriweather
- Usage : blogs, articles longs, design sophistiqué

Recommandation : Sans-serif pour les jeunes publics, serif ou sans-serif moderne pour les ados.

Mes variables ne fonctionnent pas, pourquoi ?

Vérifiez :

✅ Les variables sont déclarées dans :root {}
✅ Le nom commence par --
✅ Vous utilisez var(--nom-variable) pour y accéder
✅ Pas de faute de frappe dans le nom

/* ✅ Correct */
:root {
  --color-primary: #FF6B6B;
}

body {
  color: var(--color-primary);
}

/* ❌ Incorrect */
:root {
  color-primary: #FF6B6B; /* Manque -- */
}

body {
  color: --color-primary; /* Manque var() */
}

Combien de couleurs dans ma palette ?

Minimum : 1 couleur principale + couleurs neutres (texte, fond)
Idéal : 2-3 couleurs principales + neutres
Maximum : 5 couleurs au total

Exemple minimal :

:root {
  --color-primary: #FF6B6B;
  --color-text: #2C3E50;
  --color-background: #FFFFFF;
}

Exemple complet :

:root {
  --color-primary: #FF6B6B;
  --color-secondary: #4ECDC4;
  --color-accent: #FFE66D;
  --color-text: #2C3E50;
  --color-background: #FFFFFF;
}

Comment vérifier si mes couleurs sont accessibles ?

Utilisez le WebAIM Contrast Checker :

Entrez votre couleur de texte
Entrez votre couleur de fond
Vérifiez le ratio de contraste

Critères :

Texte normal : ratio minimum de 4.5:1
Texte large (18px+ ou 14px+ gras) : ratio minimum de 3:1

Quelle est la différence entre primary, secondary et accent ?

Primary : Couleur d’identité principale
- Usage : boutons principaux, liens, titres importants
- Exemple : Bleu pour un site professionnel
Secondary : Couleur complémentaire
- Usage : sous-titres, éléments secondaires, sections
- Exemple : Gris pour équilibrer
Accent : Couleur pour attirer l’attention
- Usage : call-to-action, notifications, badges
- Exemple : Orange pour un bouton “Commencer”

Google Fonts ralentit-il mon site ?

Oui, légèrement, mais vous pouvez optimiser :

Limitez les variantes : Ne chargez que les graisses utilisées

<!-- ❌ Lourd : toutes les graisses -->
<link href="...?family=Poppins:wght@100;200;300;400;500;600;700;800;900">

<!-- ✅ Léger : seulement 400 et 700 -->
<link href="...?family=Poppins:wght@400;700">

Utilisez preconnect :

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Considérez les polices locales pour plus de contrôle

Puis-je mélanger serif et sans-serif ?

Oui ! C’est même recommandé pour créer du contraste :

:root {
  --font-heading: 'Playfair Display', serif; /* Serif pour les titres */
  --font-body: 'Open Sans', sans-serif; /* Sans-serif pour le texte */
}

Cette combinaison crée un design élégant avec un bon contraste visuel.

Comment créer des variations d’une couleur ?

Utilisez HSL pour faciliter les variations :

:root {
  /* Couleur de base en HSL */
  --color-primary: hsl(220, 80%, 50%);

  /* Variations automatiques */
  --color-primary-darker: hsl(220, 80%, 35%); /* -15% luminosité */
  --color-primary-dark: hsl(220, 80%, 40%); /* -10% luminosité */
  --color-primary-light: hsl(220, 80%, 60%); /* +10% luminosité */
  --color-primary-lighter: hsl(220, 80%, 70%); /* +20% luminosité */
  --color-primary-pale: hsl(220, 80%, 95%); /* Très clair */
}

🎉 Félicitations !

Vous avez terminé le Cours 2 sur la typographie et les couleurs CSS !

Vous savez maintenant :

✅ Maîtriser les propriétés CSS de typographie
✅ Intégrer Google Fonts et @font-face
✅ Créer un système de variables CSS
✅ Construire une palette de couleurs cohérente
✅ Utiliser les dégradés et backgrounds
✅ Créer une identité visuelle complète

Prochaine étape

Dans le Cours 3, vous allez apprendre à créer des layouts complexes et responsive avec Flexbox et CSS Grid. Vous découvrirez :

Le box model et box-sizing
Flexbox pour des layouts flexibles
CSS Grid pour des grilles complexes
Le responsive design et media queries
L’approche mobile-first