Responsive Web Design moderne avec Flexbox et Grid

Partager par mail
Imprimer

Mise à jour : 01/12/2025

Formation : 25243154F

Source : VIVANEO

Session de formation

Code CARIF

Dates

Niveau de sortie

Financeur

Lieu

Organisme formateur

Type

Réunion

469067S

Du 08/12/2025
Au 31/12/2026

Sans niveau spécifique

Autre financeur

Lille (59)

VIVANEO
Tél : 01 77 17 90 36
Email : formation@vivaneo.fr

Non

Durée

Durée totale de la formation : 14h
Durée en centre : 14h
Durée en entreprise : h

Modalités de formation

Rythme :
Temps partiel, Temps plein, Cours de jour
Type de parcours : Parcours individualisé

Dispositif	Financeur
Autres financements à déterminer selon la situation du bénéficiaire	Autre financeur
OPCO Entreprises	OPCO

Tarif : N.C.
Modalités d'enseignement : Formation entièrement présentielle

Lieu de formation

253 Boulevard de Leeds
59777 Lille

Accueil sur le lieu de formation

Accès handicap : Pas d'accès handicap
Hébergement : Pas d'hébergement
Restauration : Pas de restauration
Transport : Pas de transport

Admission

Niveau d'entrée requis : Sans niveau spécifique
Prérequis :
Connaissances solides en HTML5 et CSS3. Notions de base en développement web front-end.
Public :
En activité professionnelle, Salarié
En recherche d'emploi, Tout public

Réunions d'informations

Aucune information

Complément d'information

Aucune information

Objectifs de la formation

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.

Contenu pédagogique

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.

Métiers visés

Insertion dans l'emploi

Aucune donnée n'est encore disponible pour cette formation

Informations complémentaires

Numéro Carif : 469067S
Référence formation : 25243154F
Code NSF : -
Formacode principal : 71454 - Logiciel conception web
Formacode associés :
71407 - Logiciel Web Designer
ROME associés : -

Organisme porteur de la formation

VIVANEO

Affichage téléphone organisme porteur

01 77 17 90 36

Affichage email organisme porteur

formation@vivaneo.fr

Lien d'accès vers la fiche de l'organisme

Voir la fiche de l'organisme et son potentiel de formation

Autres sessions de formation disponibles