<aside> 📝

Cloner un repository, compléter le CSS pour reproduire huit mises en page en flexbox, puis faire des commits et un push.

</aside>

1. Cloner le repository

Le repository de l’exercice vous est distribué via classroom50. Acceptez le devoir, puis clonez le repository dans VS Code en suivant la documentation :

Classroom50

Installez ensuite les dépendances et lancez le serveur de développement, en suivant les sections « Reprendre un projet cloné » et « Lancer le serveur de développement » :

NPM et Parcel

2. Reproduire la maquette

Ouvrez la maquette Figma : https://www.figma.com/design/lAXtc47LZgkXcDUU6w0p8V/M2-E1?node-id=1-2&t=RSszHSr0brHWqTQe-0

Le HTML, les couleurs, les tailles et les espacements sont déjà dans le repository. Dans src/style.css, complétez les règles marquées « à compléter » pour obtenir les huit mises en page, dans l’ordre : elles se corsent petit à petit.

Une contrainte : un seul niveau de flexbox, jamais un conteneur flex à l’intérieur d’un autre.

Si une propriété ne vous revient pas, reprenez la documentation de première année :

Flexbox

3. Rendu

Faites un commit après chaque mise en page terminée, puis un push.

C’est votre push qui fait office de rendu. Vérifiez sur classroom50 que votre dernier commit est bien arrivé.