Cours 5¶

Utilisation de l'IA générative ou d'agent de codage IA interdits à cette phase dans la session: vous devez solidifier les bases d'abord !

Ordre du jour¶

Révision exercices du dernier cours
Flexbox — Maîtriser l'espace
- Propriétés flex (flex-grow, flex-shrink, flex-basis)
- Gestion de l'espace disponible et du débordement
- Ordre des éléments (order)
- Composants réutilisables : cartes, sections, navigations
- Combinaisons Flexbox + contenu réel
Lancement de l’atelier pratique sur les composants Flexbox (formatif): Remise au cours 6 (23, 25 février)

BLOC1 : Révision (30 min)¶

Révision des 2 exercices « dark académie » et « Galerie Genshin Impact »

BLOC2 : Propriétés `flex`: `flex-grow`, `flex-shrink`, `flex-basis` (50 min)¶

📚 Contenu de cours flex: flex-grow, flex-shrink, flex-basis

Exercice¶

👩🏻‍💻 Exercice - Interface de jeu vidéo

BLOC3 : Order + Composants réutilisables (1h)¶

📚 Contenu de cours flexbox: order

📚 Contenu de cours Composants réutilisables

Démonstration de composants réutilisables¶

Démonstration de composants réutilisables inspirés de cadriciels comme Bootstrap (Media Object, Input Group, Pagination) et comment les construire avec Flexbox.

Démo Liste de médias (Media Object) - Composant réutilisable
Démo groupe de champs (Input Group) - Composant formulaire
Démo pagination - Composant de navigation

Atelier pratique : Composants Flexbox¶

Atelier pratique : Composants Flexbox (formatif): Remise au cours 6 (23, 25 février).

👩🏻‍💻 Atelier mini système de composants d'un portfolio

BLOC 4 : Flexbox + contenu réel (~50 min)¶

Exposé/Démo¶

Démonstration : même composant avec différents contenus (reprise des démo Media Object, Input Group et Pagination).

Comment Flexbox se comporte avec du vrai contenu (textes longs, images, contenu dynamique)
Problèmes courants et solutions (débordement de texte, images qui cassent le layout)