Page de résultats de recherche (SERP)¶
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 !
Concept¶
Reproduire une interface de type résultats de recherche (pensez Airbnb, Spotify, ou une boutique en ligne simple) avec une liste de résultats qui gère l'espace de façon fluide.
Le défi central est que les éléments doivent se comporter différemment selon l'espace disponible — ce qui rend flex-grow / flex-shrink / flex-basis incontournables.
Aperçu de l'interface à reproduire¶
Fichier de départ¶
IMPORTANT : Connectez-vous à CodePen d'abord et ensuitefaites un FORK du Pen de départ pour l'enregistrer dans votre compte, archiver l'exercice et pouvoir avoir un lien unique vers votre exercice complété pour la remise.
REMISE¶
Soumettez le lien de votre CodePen complété via le Devoir Teams avant le prochain cours (cours 7).
📚 Notes de cours¶
📚 Contenu de cours sur Flexbox: display: flex, direction, justify-content, aligns-items, flex-wrap