CSS - avancé

Objectifs

• Maîtriser les subtilités du langage CSS


• Savoir utiliser les outils de développement CSS dans un navigateur et un IDE


• Rendre son code CSS maintenable et évolutif


• Découvrir les dernières évolutions de la norme


• Optimiser les performances de son code CSS

Programme de la formation

# Jour 1 : Mise en page et Positionnement - Mise en place du projet Git - Le langage CSS, standard et évolution - Prise en main des DevTools Chrome - **Reprise de concepts clés**

• Notions de cascade, spécificité et héritage


• Le modèle de boite


• Marges et Flux


• Sélecteurs CSS avancés -

Positionnement et mise en page

• - Comprendre le positionnement


• Couches et stacking -

Flexbox

• -

CSS Grid

• _

Mises en pratique :

• - Selection précise et héritage - Intégration avec des positionnements relatifs et absolus - Intégration avec flexbox_

# Jour 2 : Maintenabilité et Performances - **Maintenabilité du CSS**

• Resets


• Media queries


• Unités relatives.


• Architecture CSS et conventions de nommage


• CSS Encapsulé


• CSS Utilitaire et TailwindCSS -

Performances CSS

• - Critical CSS


• Outils d'analyse du CSS


• Écrire du CSS performant -

Autour du CSS

• - Présentation des principaux pré-processeurs


• SASS


• LESS


• Stylus


• Utilisation de post-processeurs


• Optimisation et traitements des fichiers CSS


• Automatisation avec les outils de build


• Webpack


• Vite


• Gulp


• Frameworks CSS


• Bootstrap


• Foundation _

*Mises en partique:

• * - Décliner un composant en variations de tailles avec les unités relatives - Refactoring avec TailwindCSS - Débug de performances layout shift sur une animation CSS_

Validation et sanction

Attestation de formation

Type de formation

Non certifiante

Sortie

Sans niveau spécifique