Cours 5¶

Utilisation de l'IA générative ou d'agent 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

Info

Rappel concernant les exercices : il est primordial de compléter tous les exercices afin de développer les compétences visées dans ce cours. La première évaluation sommative est le Projet 1 — pour y être évalué adéquatement, vous devez avoir participé activement à toutes les activités d'apprentissage précédentes.

Par ailleurs, tel que précisé au plan de cours, la complétion de l'ensemble des exercices de la session vous permet d'obtenir la note maximale de 10/10, ce qui représente 10 % de la note finale.

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)

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 !

Travail sur l'atelier de composant flexbox (suite)¶