Objectifs pédagogiques
- Concevoir des layouts de page en CSS
- Structurer efficacement vos CSS
- Définir le Responsive Design
- Utiliser les nouveautés CSS 3.
Niveau requis
Avoir des connaissances de base HTML / CSS. Avoir suivi la formation HTM-FND "HTML 5, CSS 3, Responsive - Création de pages Web" ou posséder les connaissances équivalentes.
Public concerné
Développeurs, concepteurs Web, webmasters.
Programme
Rappel sur les CSS
- Sélecteurs
- Simples
- Composés
- Propriétés des boîtes
- Box-sizing
- Position...
- Unités
- Absolue
- Relatives
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
Les modes de positionnement
- Flottement
- Position absolue
- Boîtes flexibles
- Grille
Responsive Design
- Adaptation
- Des contenus
- Du positionnement
- De la navigation
- La stratégie du Mobile First
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
- Images HiDPI
- Balises
et - Test sous Firefox
Le contenu de ce programme peut faire l'objet d'adaptation selon les niveaux, prérequis et besoins des apprenants.
Modalités d’évaluation des acquis
- En cours de formation, par des productions
- Et, en fin de formation, par un questionnaire d'auto-évaluation ou une certification (M2i ou éditeur)