Exercices Devweb 102

Page d'exercices relative à la formation Devweb 102 : Le responsive & Bootstrap

Objectif : Voir le fonctionnement d'une framework comme bootstrap (widgets, grille) & commencer à gérer le responsive

Description : Reprenez le CV que vous avez fait en exercice de la devweb1, et améliorez le avec Bootstrap ! Le but est juste de revoir la forme. Il faudra faire 2 colonnes avec la grille de bootstrap, et faire en sorte que ce soit responsive (2 colonnes sur ordi, une seule sur mobile). De plus vous devrez intégrer un bouton “Contactez-moi” (au style de bootstrap bien entendu) qui ouvre un modal avec vos informations de contact (avec un petit QR code).

Vous pouvez remplacer le premier CV que vous avez fait par celui-ci, ou simplement changer le nom de la page pour avoir les deux (cv2.html par exemple).

Ressources : Vous pouvez par exemple inclure les éléments suivants de bootstrap :

• https://getbootstrap.com/docs/4.3/components/badge/#contextual-variations (pour des compétences par ex)
• https://getbootstrap.com/docs/4.3/components/collapse/ (pour détailler une expérience)
• https://getbootstrap.com/docs/4.3/components/modal/ (pour le contact)
• https://getbootstrap.com/docs/4.3/components/tooltips/ (pour détailler une abréviation ou n'importe quoi)
• https://getbootstrap.com/docs/4.3/components/list-group/ (pour lister des choses)
• … N'importe quoi dans la doc bootstrap !

Requis :

• Utilisation de bootstrap 4.3.x (dernière version)
• Le modal de contact doit être présent
• Au moins deux des widgets dans les ressources
• 2 colonnes sur pc, avec responsivité
• Les fichiers de bootstrap doivent être hébergés sur votre site, pas de CDN
• Le style doit être dans un fichier CSS séparé

Objectif : Utiliser un template tout fait et le personnaliser pour faire des merveilles

Description : Pour cet exercice, il faudra tout d'abord choisir un thème (voir liste dans les ressources) pour ensuite l'appliquer sur votre site. Vous pouvez faire quelques pages (accueil, cv voir plus si vous le sentez). Vous DEVEZ personnaliser le thème pour ne plus laisser de “placeholders” (éléments graphiques pour montrer les possibilités d'un template tout fait).

A l'issue de l'exercice, vous pouvez remplacer votre site perso par celui avec le template, ou le mettre dans un sous-dossier (comme par exemple ~/html/new/ ou ~/html/template/ pour ne pas effacer ce que vous avez fait avant).

Ressources : Les liens suivants sont donnés à titre indicatif, nous n'avons évidemment pas testé tous les éléments ci-dessous, il pourrait y avoir des thèmes qui fonctionnent mal ou pas adaptés à BS4.

• https://themes.getbootstrap.com/
• https://startbootstrap.com/themes/portfolio-resume/
• https://colorlib.com/wp/free-bootstrap-4-website-templates/
• https://www.codeur.com/blog/templates-bootstrap-gratuits/
• recherche google avec des mots clés comme “bootstrap 4” “thème” “portfolio” “template”

Requis :

• Vous devez utiliser un template utilisant bootstrap 4
• Le template doit être un minimum beau (laissé à l'appréciation de chacun)
• Vous devez faire au minimum la page d'accueil, au mieux la page avec le CV aussi
• Il ne doit plus rester de placeholders du template
• Le style doit être dans un fichier CSS séparé

Objectif : Apprendre à utiliser une librairie tierce

Description : L'objectif est maintenant de faire une petite galerie d'image avec des miniatures. Pour cela on va utiliser une librairie qui s'appelle Lightbox. La galerie doit se trouver sur une page à part de celles déjà existante, et vous devez mettre quelques photos sur celle-ci (photos de loutre acceptées).

Ressources :

• https://lokeshdhakar.com/projects/lightbox2/#getting-started

Requis :

• Vous devez avoir au moins 3 images sur votre galerie
• La lightbox doit fonctionner (ouverture de la popup avec l'image lors du clic)
• Le style doit être dans un fichier CSS séparé