CSS
Domaine : Développement web
Le CSS décrit l’apparence d’une page : couleurs, typographie, mise en page. Bien compris, il permet d’adapter une même page à tous les écrans sans la réécrire. Ce module en pose les principes, dont la cascade et la spécificité, souvent sources de confusion, jusqu’aux mises en page modernes avec Flexbox et Grid.
- Public
- Étudiants
- Webmasters
- Développeurs
- Chefs de projet technique
- Niveau
- Débutant
- Formats
- Sur site ou à distance
Prérequis
Les bases du HTML.
Objectifs
- Cibler les éléments d’une page avec les sélecteurs
- Comprendre le modèle de boîte, la cascade et la spécificité
- Agencer une page avec Flexbox et Grid
- Adapter une page à tous les écrans
Programme
Les fondations
L’intégration dans une page, les sélecteurs, le modèle de boîte, la cascade et la spécificité.
La console développeur
Voir quelle règle s’applique à un élément et pourquoi, visualiser ses marges et essayer un style en direct.
La mise en forme
Les couleurs, les polices, les unités de mesure et les dégradés.
La mise en page
L’agencement d’une page avec les boîtes flexibles (Flexbox) et la grille (Grid), pour tous les écrans.
Les états et le mouvement
Les pseudo-classes, les pseudo-éléments et les animations.
Les frameworks CSS
Bootstrap et Tailwind, pour comparer deux philosophies : des composants prêts à l’emploi ou des classes utilitaires.
Travaux pratiques
Le carré centré, puis la mise en forme de son propre portfolio, adapté à tous les écrans.
Des explications courtes, puis de la pratique : les exercices et le projet sont adaptés au niveau du groupe.