/P3-Booki

P3 OPENCLASSROOM

Primary LanguageHTML

Créez la page d'accueil d'une agence de voyage avec HTML & CSS

image

Vous débutez votre alternance en tant que développeur web au sein de la start-up Booki.

image

L’entreprise souhaite développer un site Internet qui permette aux usagers de trouver des hébergements et des activités dans la ville de leur choix.

Vous êtes chargé d'intégrer l'interface du site avec du code HTML et CSS. Pour cela, vous travaillez en étroite collaboration avec Sarah, la CTO, et Loïc, l’UI designer.

Sarah vous envoie un e-mail pour vous présenter l’avancée du projet.

Bonjour,

Ça y est, Loïc a finalisé les maquettes desktop, tablette et mobile du site ! Tu vas pouvoir les intégrer. Elles sont disponibles en pièces jointes.

Pour que le projet soit très clair, Loïc et moi t’avons préparé une note de synthèse qui regroupe les spécifications et contraintes techniques à respecter (voir pièce jointe).

Pour t’aider à démarrer, je t’ai préparé la structure de fichiers du site ainsi qu’une base de code :

  • un fichier “index.html” contenant une première base du code HTML que tu devras compléter ;
  • un dossier “css” contenant un fichier “style.css” avec une première ébauche du code CSS et que tu devras compléter également ;
  • un dossier “images” contenant l’ensemble des images utilisées sur le site.

image

  • Un dossier, compressé au format ZIP, contenant le code, et dans le détail :
  • Un fichier “index.html” contenant l’ensemble du code HTML du projet.
  • Un dossier “CSS” comprenant un fichier “style.css” contenant l’ensemble du code CSS du projet.
  • Un dossier “images” contenant l’ensemble des images utilisées.

Pour faciliter votre passage devant le jury, déposez sur la plateforme, dans un dossier ZIP nommé “Titre_du_projet_nom_prénom”, tous les livrables du projet comme suit : Nom_Prénom_n° du livrable_nom du livrable__date de démarrage du projet. Cela donnera :

Nom_Prénom_1_code_mmaaaa ;

Par exemple, le premier livrable peut être nommé comme suit : Dupont_Jean_1_code_012022

C'est parti pour coder !!! O:

Ressources :

Spécifications fonctionnelles

Maquette Figma