Mise à jour : 01/12/2025 - Source : VIVANEO
Numéro Carif : 469067S
Responsive Web Design moderne avec Flexbox et Grid
Formation Continue
Dates
Se rapprocher de l'organisme pour connaitre la prochaine session
Lieu
253 Boulevard de Leeds
59777 Lille
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