Objectif

Créer et publier un composant VOD responsive en utilisant les nouvelles connaissances acquises avec Flexbox.

Références

• Documentation interactive: https://frontend.eikon.ch/flexbox
• Documentation Notion: Flexbox

<aside> 📎

Livrables attendus

1. Un assemblage PNG de 2 composants “VOD” pré-découpés Naming: flexbox-1-prenom1-prenom2.png
2. Un guide illustré Figma→Flexbox Naming: figma-flexbox-prenom1-prenom2.png
3. Un composant “VOD” codé en HTML/CSS Publié en ligne à l’URL exacte suivante : https://prenom-nom.alwaysdata.net/flexbox-1 </aside>

Étapes

1. Analyse sur Figma

<aside> ⏰

20 minutes

</aside>

• Découper le composant avec des rectangles bien visibles
• Chaque rectangle = futur conteneur Flexbox
• Vérifier que chaque groupe est bien signifié

2. Review croisée - Travail à 2

<aside> ⏰

10 minutes

</aside>

• Comparer le découpage avec celui de quelqu’un d’autre
  • Corrections et remarques si nécessaires
  • Exporter 1 PNG commun
  • Déposer le PNG sur Teams

3. Guide Figma→Flexbox - Travail à 2

<aside> ⏰

1 heure

</aside>

Créer un guide visuel qui fait correspondre les propriétés Flexbox apprises à l’interface Figma (Auto Layout). Format et design libre.

4. Election du meilleur Guide Figma→Flexbox

<aside> ⏰

45 minutes

</aside>