Mise à jour : 01/12/2025 - Source : VIVANEO
Numéro Carif : 469092S
Responsive Web Design moderne avec Flexbox et Grid
Formation Continue
Dates
Du 08/12/2025
Au 31/12/2026
Lieu
33 Rue d'Alsace-lorraine
59400 Cambrai
Durée totale
14 heures :
- 14 heures en centre
- heures en entreprise
Prochaine réunion d'informations
Aucune
Financement
Autre financeur, OPCO
Diplôme, titre, ou certificat
Sans niveau spécifique
Objectifs
- 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.
Programme
- 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.
Diplôme, titre ou certificat
Niveau de sortie : Sans niveau spécifique
Métiers visés
Je souhaite être recontacté par l'organisme de formation
En cliquant sur le bouton ci-dessous, je reconnais avoir pris connaissance et accepter sans réserves les mentions légales du site .
Veuillez vous connecter
Ajout à une liste
Création d'une liste de favoris
Contacter l'organisme de formation
VIVANEO
Tél.: 01 77 17 90 36
Ajouter une alerte