Exercice 02 - Utilisation de Bootstrap 5

Mise en situation

Vous n'avez peut-être jamais entendu parler de Bootstrap 5, mais pour notre projet pour nous faciliter l'intégration, nous allons utiliser bootstrap pour la partie frontend et la partie backend (admin).

Modalités

• Seul et en équipe:
  • Partie 1 : Exercice seul
  • Partie 2 : En équipe de 2
• Réalisé durant le cours
• Durée approximative tout le cours:
  • Partie 1 : 50 minutes
  • Partie 2 : 30 minutes (15/15)
• Remettre le tout zippé sur Léa dans Exercice 02

Partie 1 - À faire (étapes)

1. Téléchargez et utilisez-le HTML5boilerplate
2. Faites l'intégration de Bootstrap 5 dans la page index.html, utilisez la documentation fournie
3. Écrivez le titre de votre projet dans le title de la page (le head)
4. Faites l'intégration des balises essentielles: header, main et footer.
5. Dans l'entête du site (header), faites un titre 1 qui est centré avec Bootstrap 5, vous devez écrire à cet endroit le titre de la page
   • Exemple: Bienvenue au "titre de votre commerce"
6. Dans la zone principale (main),
   • Faites l'intégration d'un composant (components), essayez d'en prendre un original
   • Faites l'intégration d'une image responsive (s'adapte à l'écran) avec Bootstrap
7. Dans le pied de page, ajoutez un texte de copyright avec vos deux noms. Le pied de page doit avoir une couleur différente des autres zones donc attention au contrastes du texte!
8. EXPERT Avec Bootstrap, faites que votre entête (header) soit fixe dans l'écran (position:fixed ou position:sticky)

IMPORTANT: Ne faites pas la mise en page (Layout dans la doc), nous allons faire ça au prochain cours.

Partie 2 - À faire (étapes)

1. Présentez à votre coéquipier, votre intégration de votre composant (component)
2. Montrez votre code et comment vous l'avez intégré
3. Votre coéquipier doit faire au moins un commentaire sur votre intégration
4. Vous devez le prendre en note dans un fichier texte partie2.txt
5. En discutant, trouvez un avantage et un inconvénient à Bootstrap 5 et écrivez-les dans partie2.txt
6. Mettre le fichier partie2.txt dans un dossier nommé doc de votre site
7. EXPERT Vous pouvez faire la correction du commentaire immédiatement
8. IMPORTANT: Remettre vos fichiers zippés sous Exercice 02 quand tout est fait.