Public visé
Développeurs, concepteurs Web, webmasters.
Prérequis
Avoir suivi cette formation, ou en maîtriser les thèmes abordés :
Objectifs pédagogiques
À l’issue de cette formation, vous serez capable de :
- Concevoir des layouts de page en CSS
- Structurer efficacement vos CSS
- Définir le Responsive Design
- Utiliser les nouveautés CSS 3
Programme
Jour 1 - Matin
Rappel sur les CSS
- Règles de priorités, Sélecteurs (simples, composés, pseudo-classes)
- Propriétés des boîtes (box-sizing, position…)
- Unités (absolue, relatives)
- Couleurs et filtres
Les écrans
- Taille, Résolution, Valeur du pixel
- CSS pixel / Device pixel, Pixel ratio (hdpi, xhdpi, xxhdpi), HiDPI
HTML
- Structure de la page, Gestion du viewport, @import
Jour 1 - Après-midi
Les modes de positionnement
- Flottement
- Position absolue, relatives, statiques
- Le modèle FlexBox
- Le modèle Grid Layout
Jour 2 - Matin
Responsive Design
- Adaptation (contenus, positionnement, navigation)
- Stratégie du Mobile First
Jour 2 - Après-midi
Les Media Queries
- Types de médias, Breakpoints, Syntaxe des requêtes
Les animations et transitions
- Définition des animations, Images clés
Cas particuliers
- Textes, Images, Mixblend et images de fond
- Images HiDPI / WebP / AVIF, Balises
<picture>et<source> - Les images vectorielles (SVG)
Jour 3 - Matin
Les préprocesseurs CSS
- Présentation des préprocesseurs Sass et Less
- Organisation du code, Logique du préprocesseur
Présentation de Sass
- Langage Sass, Variables, fonctions, Opérations
- Règles imbriquées, Mixins
Jour 3 - Après-midi
Présentation de Less
- Langage Less, Variables, fonctions, Opérations
- Règles imbriquées, Pseudo-classes, Mixins
Modalités pédagogiques
Formation en présentiel ou distanciel (blended-learning, e-learning, classe virtuelle).
Modalités d’évaluation des acquis
- En cours de formation : productions
- En fin de formation : questionnaire d’auto-évaluation
Pour aller plus loin
Cette formation donne accès à cette formation :