Cette formation avancee s’adresse aux developpeurs Web qui maitrisent deja les bases de CSS et souhaitent aller plus loin dans la mise en page et l’interactivite visuelle. Vous approfondirez les layouts complexes avec Grid et Flexbox, les animations et transformations CSS, et la strategie Mobile First. La maitrise des preprocesseurs Sass et Less completera votre palette d’outils pour les projets professionnels.
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 mises en page CSS avancées
- Structurer efficacement les feuilles de style
- Comprendre et appliquer le responsive design
- Utiliser les nouvelles fonctionnalités CSS 3
- Maîtriser les préprocesseurs Sass et Less
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 (High Dots Per Inch)
HTML
- Structure de la page
- Gestion du viewport
- @import
Travaux pratiques
- Développer une page fidèle à un modèle fourni
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
- Des contenus
- Du positionnement
- De la navigation
- La stratégie du Mobile First
Travaux pratiques
- Développer une page a l’aide de Grid et Flexbox
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 et
- Les images vectorielles (SVG)
Jour 3 - Matin
Les préprocesseurs CSS
- Présentation des préprocesseurs Sass et Less
- Mieux organiser son code
- Comprendre la logique du préprocesseur
Présentation de Sass
- Le langage Sass
- Variables, fonctions
- Les opérations
- Règles imbriquées
- Les mixins
Jour 3 - Après-midi
Présentation de Less
- Le langage Less
- Variables, fonctions
- Les opérations
- Règles imbriquées
- Pseudo-classes
- Les mixins
Travaux pratiques
- Utiliser des variables pour fixer les couleurs d’un thème
- Mettre en forme des éléments visuels
- Utiliser les mixins pour créer une page responsive
Modalités d’évaluation des acquis
En cours de formation, par des études de cas ou des travaux pratiques. En fin de formation, par un questionnaire d’auto-évaluation.
Voir aussi
Vous serez peut-être intéressés par les formations suivantes :
Formation DEV-WEB-210 — CSS - Avancé. Domaine : Développement. Niveau : Intermédiaire. Durée : 3 jours (21 heures). Mots-clés : css, sass, less, responsive, flexbox, grid, animations, développement, avancé. Cylian Formation, Dijon.