- Comprendre les principes fondamentaux du Responsive Web Design.
- Maîtriser l'utilisation de Flexbox pour l'alignement et la distribution d'éléments dans une seule dimension (ligne ou colonne).
- Savoir concevoir des mises en page complexes et bidimensionnelles avec CSS Grid Layout.
- Utiliser les media queries de manière efficace pour adapter le design à différentes tailles d'écran et résolutions.
- Concevoir des interfaces utilisateur qui s'affichent correctement sur tous les appareils (ordinateurs de bureau, tablettes, smartphones).
- Optimiser les performances et le temps de chargement des pages sur mobile.
- Mettre en œuvre une approche de type "mobile-first" dans le développement.
- Savoir créer des systèmes de mise en page flexibles et maintenables.
Module 1 : Fondations du Responsive Web Design (RWD)
- Introduction au concept de RWD et son importance.
- Le principe du "Mobile-First".
- Configuration du viewport et des unités relatives ($em$, $rem$, $vw$, $vh$).
- Comprendre et utiliser les Media Queries.
Module 2 : Maîtrise de Flexbox
- Introduction à Flexbox et ses propriétés de base.
- Définition du conteneur Flex et des éléments Flex.
- Alignement des éléments sur l'axe principal avec justify-content.
- Alignement des éléments sur l'axe secondaire avec align-items et align-content.
- Gestion de l'ordre et du redimensionnement des éléments (order, flex-grow, flex-shrink, flex-basis).
- Création de barres de navigation et de composants complexes.
Module 3 : CSS Grid Layout pour la Mise en Page
- Introduction à CSS Grid et aux différences avec Flexbox.
- Définition d'une grille : grid-template-columns et grid-template-rows.
- Placement des éléments sur la grille avec les numéros de ligne et les noms de zone (grid-area).
- Utilisation de l'unité fr pour des pistes de grille flexibles.
- Grilles responsives avec repeat() et auto-fit/auto-fill.
- Alignement dans la grille (justify-items, align-items).
Module 4 : Techniques de RWD Avancées
- Combinaison de Flexbox et Grid pour des mises en page hybrides.
- Gestion des images et des vidéos responsives.
- Stratégies pour la typographie et les tableaux responsives.
- Débogage et outils de développement pour le RWD.
- Projet final : Conception et développement d'un site web entièrement responsive.
- L'apprenant sera capable de coder des sites web qui s'adaptent parfaitement à toutes les tailles d'écran.
- L'apprenant saura utiliser Flexbox de manière autonome pour créer des composants et navigations unidimensionnels.
- L'apprenant maîtrisera CSS Grid pour architecturer des mises en page bidimensionnelles complexes.
- L'apprenant sera en mesure d'intégrer l'approche Mobile-First dans tout nouveau projet web.
- L'apprenant pourra débugger et corriger des problèmes d'affichage sur différents appareils.
- L'apprenant sera capable de créer des interfaces utilisateur flexibles, maintenables et évolutives.
Non certificiante
Sans niveau spécifique
