Mardi 16 07 2019 - promo-1-ref-dig/programme GitHub Wiki

Bootstrap à l'honneur ! 😄

Introduction

Vous allez reproduire une maquette relativement basique avec Bootstrap. Vous trouverez les fichiers nécessaires à cet exo dans le programme.

Objectifs pédagogiques

  • Mettre en pratique et prendre en main les fonctionnalités de Bootstrap de manière concrète.

Consignes

Vous devez écrire le code HTML (index.html) et un peu de CSS (custom.css) pour but de retrouver la charte graphique jointe à l’identique. Vous ne toucherez pas au code des autres fichiers. Tous les fichiers nécessaires vous sont fournis. Vous n’avez ni besoin d’en ajouter, ni d’en supprimer. Votre référence est le fichier screenshot.png.

Spécifications minimales

Votre template HTML contiendra plusieures parties dans l'ordre :

  • une barre de navigation
  • un jumbotron ayant pour id ‘home’, contenant la première partie et son contenu
  • une div ayant pour id ‘who’, contenant la seconde partie et son contenu
  • une div ayant pour id ‘get-involved’, contenant la troisième partie et son contenu
  • un footer
  • une div ayant pour id 'back-to-top’ et contenant la flèche permettant de remonter au jumbotron

Lorsque l’utilisateur clique sur le gros bouton Learn more >> du jumbotron, une sorte de fenêtre s’ouvrira avec une vidéo YouTube dedans (voir screenshot-modal.png). Indice : vous devrez utiliser un concept de Bootstrap appelé modal.

Vous utiliserez le système de grille de Bootstrap pour la partie ‘get-involved'. Vous devrez certainement surcharger (== ré-écrire par dessus) l’une ou l’autre classe de Bootstrap. Le fichier custom.css est mis à votre disposition à cet effet. Vous ne ferez AUCUNE modification dans le fichier bootstrap.min.css. Votre site doit être responsive. Vous devrez redimensionner/replacer certaines choses. Voir les screenshot-max1199.png, screenshot-max991.png et screenshot-max767.png

Pour l’affichage sur smartphone (max-width: 767px), votre barre de navigation ne doit afficher que le logo et une icône pour accéder au menu. Pour afficher les icônes qui ne sont pas présentent dans les images, vous utiliserez Font Awesome (http://fortawesome.github.io/Font-Awesome/) qui est déjà intégré au projet. Conseil : servez-vous de la documentation de Bootstrap, elle est très complète et bourrée d'exemples

. Github Pages

Rendu

N’hésitez pas à rendre un travail incomplet même si vous avez eu l’un ou l’autre blocage, il y a des points à prendre partout.. Vous rendrez un repo Github contenant tous les fichiers du projet Si vous réalisez des bonus libres, indiquez-moi ce que vous avez fait dans un fichier bonus.txt que vous ajouterez dans votre repo. Les bonus ne seront évalués que si vous avez au moins 80% des points sur les spécifications minimales

Exercice à rendre avant mardi prochain minuit.

BOOTSTRAP https://fr.slideshare.net/adieng/initiation-bootstrap