Responsive Web Design moderne avec Flexbox et Grid

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.

Contenu de la formation

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.

Résultats attendus de la formation

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.

N° session CO

Date de début

Date de fin

Lieu de formation

Inscription

Public

Détails

399839S

08/12/2025

31/12/2026

Dijon 21000

Contacter l’organisme

Tout public

Afficher les détails

Durée

Durée totale de la formation: 14 heure(s)
Durée en centre: 14 heure(s)

Modalites de formation

Modalités d'enseignement: Formation en présentiel

Rythme: Temps partiel , Temps plein

FPC Formation professionnelle continue : Oui

Lieu de formation

Hope !
64e Rue Sully
21000 - Dijon

ORGANISME FORMATEUR

Vivaneo
Voir la fiche complète de l'organisme formateur Contacter l'organisme formateur pour cette session

Admission

Niveau entrée requis : Sans niveau spécifique

Statut(s) des publics accueillis :
Tout public

Conditions spécifiques d'admission (ou pré-requis) : Connaissances solides en HTML5 et CSS3. Notions de base en développement web front-end.

COMPLEMENT D’INFORMATION

399843S

08/12/2025

31/12/2026

Dijon 21000

Contacter l’organisme

Tout public

Afficher les détails

Durée

Durée totale de la formation: 14 heure(s)
Durée en centre: 14 heure(s)

Modalites de formation

Modalités d'enseignement: Formation en présentiel

Rythme: Temps partiel , Temps plein

FPC Formation professionnelle continue : Oui

Lieu de formation

Chez Startway Coworking
15 Boulevard de Brosses
21000 - Dijon

ORGANISME FORMATEUR

Vivaneo
Voir la fiche complète de l'organisme formateur Contacter l'organisme formateur pour cette session

Admission

Niveau entrée requis : Sans niveau spécifique

Statut(s) des publics accueillis :
Tout public

Conditions spécifiques d'admission (ou pré-requis) : Connaissances solides en HTML5 et CSS3. Notions de base en développement web front-end.

COMPLEMENT D’INFORMATION

399844S

08/12/2025

31/12/2026

Besançon 25000

Contacter l’organisme

Tout public

Afficher les détails

Durée

Durée totale de la formation: 14 heure(s)
Durée en centre: 14 heure(s)

Modalites de formation

Modalités d'enseignement: Formation en présentiel

Rythme: Temps partiel , Temps plein

FPC Formation professionnelle continue : Oui

Lieu de formation

Ibis Besançon Centre Ville
21 rue gambetta
25000 - Besançon

ORGANISME FORMATEUR

Vivaneo
Voir la fiche complète de l'organisme formateur Contacter l'organisme formateur pour cette session

Admission

Niveau entrée requis : Sans niveau spécifique

Statut(s) des publics accueillis :
Tout public

Conditions spécifiques d'admission (ou pré-requis) : Connaissances solides en HTML5 et CSS3. Notions de base en développement web front-end.

COMPLEMENT D’INFORMATION

399849S

08/12/2025

31/12/2026

Belfort 90000

Contacter l’organisme

Tout public

Afficher les détails

Durée

Durée totale de la formation: 14 heure(s)
Durée en centre: 14 heure(s)

Modalites de formation

Modalités d'enseignement: Formation en présentiel

Rythme: Temps partiel , Temps plein

FPC Formation professionnelle continue : Oui

Lieu de formation

Belfort Boost
6 Rue de Madagascar
90000 - Belfort

ORGANISME FORMATEUR

Vivaneo
Voir la fiche complète de l'organisme formateur Contacter l'organisme formateur pour cette session

Admission

Niveau entrée requis : Sans niveau spécifique

Statut(s) des publics accueillis :
Tout public

Conditions spécifiques d'admission (ou pré-requis) : Connaissances solides en HTML5 et CSS3. Notions de base en développement web front-end.