Descriptif
CSS moderne : Flexbox, Grid et responsive est une formation de 2 jours (14 heures), de niveau initiation, rattachée au domaine « Développement logiciel, informatique et Web ». Mettre en forme des interfaces modernes et adaptatives. Conçue et animée par des praticiens en activité, elle alterne apports ciblés (30 %) et mises en pratique (70 %) sur des laboratoires cloud individuels, avec des cas inspirés des secteurs banque, assurance et services publics. Disponible en inter-entreprises, en intra sur catalogue et en version sur mesure adaptée au contexte de l'entreprise.
Objectifs pédagogiques
À l'issue de la formation, le participant sera capable de :
- Sélecteurs
- Flexbox
- Grid
- Responsive
- Variables
Programme détaillé
| N° | Contenus et activités | Durée |
|---|---|---|
| Jour 1 | ||
| 1 | Ouverture : attentes, niveau de pratique CSS de chacun, présentation de la maquette fil rouge et de l'éditeur en ligne mis à disposition dans le navigateur | 0,5 h |
| 2 | Rappels indispensables : cascade, spécificité, héritage, unités absolues et relatives, modèle de boîte et box-sizing, couches de cascade | 1,5 h |
| 3 | Atelier guidé : sélecteurs, combinateurs et pseudo-classes — styler la navigation d'un intranet et ses états de survol, de focus et de page active | 1,5 h |
| 4 | Flexbox : axe principal et axe secondaire, alignements, flex-grow, flex-shrink et flex-basis, gap, réordonnancement | 1,5 h |
| 5 | Travaux pratiques : composer l'en-tête, la barre de navigation et une rangée de cartes de l'intranet en Flexbox | 2 h |
| Jour 2 | ||
| 6 | Atelier guidé : CSS Grid — définition des pistes, zones nommées, minmax, auto-fit et auto-fill, placement et alignement à deux dimensions sur une grille d'essai | 2 h |
| 7 | Travaux pratiques : bâtir la mise en page complète de l'intranet en Grid — bandeau, colonne latérale, zone de contenu, pied de page | 2 h |
| 8 | Responsive : approche mobile d'abord, media queries, container queries, images adaptatives, typographie fluide avec clamp | 1,5 h |
| 9 | Travaux pratiques : rendre l'intranet adaptatif du mobile au grand écran, introduire les variables CSS et un thème sombre piloté par prefers-color-scheme | 1 h |
| 10 | Évaluation des acquis : passage de la page produite au validateur W3C, correction des erreurs, revue collective des rendus et mémo des bonnes pratiques | 0,5 h |
Méthodes pédagogiques
- Pédagogie active : 61 % du temps en pratique encadrée — laboratoires cloud provisionnés par participant, travaux pratiques guidés, fil rouge applicatif —, le reste en apports structurés, démonstrations commentées, cadrage et évaluation
- répartition calculée sur le déroulé détaillé de cette formation, et non annoncée de façon uniforme
- classe inversée avec prérequis sur le LMS
- apprentissage adaptatif selon le positionnement initial
- travaux en binômes
- classe virtuelle en séquences de 3 h 30 maximum sur Microsoft Teams
- support clair, complet et paginé remis à chaque participant
Technologies et outils mobilisés
HTML5, CSS3, VS Code, outils de validation W3C
Modalités d'évaluation et de validation
- Positionnement initial en ligne
- quiz de validation à chaque séquence
- évaluation finale des acquis (QCM et mise en situation)
- satisfaction à chaud
- questionnaire de transfert à 30 jours
- attestation de fin de formation
Plateforme, laboratoires et ressources
- LMS DATAROCKSTARS : parcours, supports numériques, quiz, évaluations, émargement par demi-journée
- laboratoires cloud individuels accessibles depuis un navigateur, sans installation, données fictives, détruits en fin de session
- bibliothèque O'Reilly (plus de 60 000 ressources)
- accès aux supports pendant 6 mois