CSS

Informations Générales

1. Durée

   ~ 45h

2. Format

   Cours en présentiel / En ligne

3. Objectifs

   1. Maîtriser les fondamentaux du CSS et ses propriétés essentielles
   2. Comprendre le modèle de boîte et le positionnement des éléments
   3. Apprendre à créer des mises en page flexibles et responsives
   4. Découvrir les animations et les transitions CSS
   5. Mettre en pratique les bonnes pratiques de développement CSS

4. Prérequis

   Connaissances de base en HTML recommandées.

5. Public cible

   1. Débutants souhaitant apprendre à styliser des sites web
   2. Développeurs web cherchant à perfectionner leurs compétences en CSS
   3. Designers web voulant comprendre l'implémentation de leurs maquettes
   4. Étudiants en développement web ou design numérique
   5. Autodidactes souhaitant structurer leur apprentissage du CSS

6. Méthode d'enseignement

   1. Théorie et exemples concrets
   2. Exercices pratiques pas à pas
   3. Mini-projets de mise en page
   4. Projet final intégrateur

7. Besoins techniques

   1. Matériel requis
      1. Ordinateur portable ou de bureau (Windows, macOS ou Linux)
      2. Connexion internet stable
      3. Casque audio avec micro (pour les sessions en ligne)
      4. Écran large recommandé (pour visualiser le code et le rendu côte à côte)
   2. Logiciels à installer
      1. Navigateur web moderne (Chrome ou Firefox recommandé)
      2. Éditeur de code (VS Code avec extensions CSS recommandé)
   3. Comptes recommandés
      1. Compte sur CodePen ou CodeSandbox
      2. Compte sur GitHub pour le versioning

Modules du Cours

1. Les Fondamentaux du CSS

   1. Introduction au CSS
      1. Syntaxe et structure de base
      2. Sélecteurs CSS (éléments, classes, IDs, attributs)
      3. La cascade et l'héritage
   2. Le modèle de boîte
      1. Margin, border, padding, content
      2. box-sizing : border-box vs content-box
      3. Les différents types de boîtes (block, inline, inline-block)
   3. Propriétés de texte et de couleurs
      1. Typographie (font-family, size, weight, etc.)
      2. Couleurs (noms, hexadécimal, RGB, HSL, variables CSS)
      3. Effets de texte (ombre, décoration, transformation)
   4. Exercice pratique : Mise en forme d'une page d'article

2. Mise en page avancée avec Flexbox et Grid

   1. Flexbox
      1. Concepts de base (conteneur et éléments flexibles)
      2. Alignement et distribution (justify-content, align-items)
      3. Gestion de l'ordre et de la taille des éléments
   2. CSS Grid
      1. Création d'une grille (grid-template-columns/rows)
      2. Positionnement des éléments (grid-column, grid-row)
      3. Zones de grille et responsivité
   3. Méthodologies et bonnes pratiques
      1. Quand utiliser Flexbox vs Grid
      2. Approche mobile-first
      3. Optimisation des performances
   4. Exercice pratique : Créer un portfolio responsive

3. Responsive Design et Media Queries

   1. Principes du Responsive Design
      1. Mobile-first vs Desktop-first
      2. Viewport et unités relatives (%, vh, vw, rem, em)
      3. Images responsives (srcset, picture, sizes)
   2. Media Queries avancées
      1. Syntaxe et opérateurs logiques
      2. Points de rupture (breakpoints) standards
      3. Fonctionnalités médias (orientation, résolution, etc.)
   3. Techniques avancées
      1. Conteneurs fluides et images flexibles
      2. Grilles responsives
      3. CSS Container Queries
   4. Exercice pratique : Adapter un site pour mobile, tablette et desktop

4. Animations et effets visuels

   1. Transitions CSS
      1. Propriétés transition-*
      2. Timing functions (ease, linear, cubic-bezier)
      3. Exemples pratiques d'utilisation
   2. Animations CSS
      1. @keyframes et propriétés d'animation
      2. Contrôle des animations (play-state, iteration-count)
      3. Performances et bonnes pratiques
   3. Effets avancés
      1. Transformations 2D/3D (transform)
      2. Filtres et effets visuels
      3. Masques et découpes (clip-path, mask)
   4. Exercice pratique : Créer une galerie d'images interactive

5. CSS Moderne et Bonnes Pratiques

   1. Variables CSS (Custom Properties)
      1. Déclaration et utilisation
      2. Portée et héritage
      3. Utilisation avec JavaScript
   2. Méthodologies CSS
      1. BEM (Block Element Modifier)
      2. SMACSS et OOCSS
      3. CSS-in-JS (introduction)
   3. Outils et préprocesseurs
      1. SASS/SCSS (variables, mixins, fonctions)
      2. PostCSS et autoprefixer
      3. Outils de build (Webpack, Parcel, Vite)

6. Sémantique et accessibilité

   1. Les balises sémantiques
      1. Utilisation des balises <header>, <footer>, <nav>, <section>, <article>, <aside>
      2. Importance de la sémantique pour le SEO et l’accessibilité
   2. Accessibilité des contenus HTML
      1. L’importance des attributs alt, aria, role
      2. Bonnes pratiques pour rendre les pages web accessibles à tous
   3. Exercice pratique : Structurer une page sémantiquement correcte et accessible

7. Accessibilité et Performance

   1. CSS et accessibilité
      1. Contraste des couleurs et lisibilité
      2. Navigation au clavier
      3. Médias alternatifs (impression, lecteurs d'écran)
   2. Optimisation des performances
      1. Chargement critique du CSS
      2. Optimisation des sélecteurs
      3. Utilisation de will-change et contain
   3. Outils d'analyse
      1. Lighthouse et Web Vitals
      2. Outils de débogage des navigateurs
      3. Tests multi-navigateurs

8. Projet final

   1. Projet pratique : Créer un site web moderne et responsive
      1. Conception d'une maquette préalable
      2. Implémentation en HTML/CSS pur
      3. Adaptation pour différents appareils et tailles d'écran
      4. Optimisation des performances
   2. Critères d'évaluation :
      1. Respect de la maquette
      2. Code propre et bien structuré
      3. Accessibilité et sémantique
      4. Performance et temps de chargement
      5. Documentation et bonnes pratiques

Ressources Supplémentaires

• MDN CSS - Documentation complète de référence
• CSS-Tricks - Astuces et tutoriels CSS avancés
• Guide complet de Flexbox
• Guide complet de CSS Grid
• Can I use - Compatibilité navigateurs
• CSS Gradient Generator - Outil de création de dégradés
• freeCodeCamp - Exercices pratiques gratuits