La maitrise avancee de CSS est essentielle pour creer des interfaces Web modernes, performantes et adaptees a tous les ecrans. Cette formation approfondit les techniques de positionnement avec Flexbox et Grid, le responsive design avec les media queries, et les animations CSS. Vous decouvrirez egalement les preprocesseurs Sass et Less pour structurer et maintenir efficacement vos feuilles de style.
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 (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 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 :
Voir aussi
Vous serez peut-être intéressés par les formations suivantes :
- GraphQL - Schemas, resolvers et mutations
- NodeJS - Initiation
- REST API - Les fondamentaux
- HTML, CSS, Responsive - Création de pages Web
- CSS - Avancé
- Web Sémantique
- Les API de HTML et CSS
Formation DEV-WEB-200 — CSS - Initiation. Domaine : Développement. Niveau : Intermédiaire. Durée : 3 jours (21 heures). Mots-clés : css, sass, less, responsive, flexbox, grid, développement, initiation. Cylian Formation, Dijon.