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
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 :
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.