Booki

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

Projet 3: Booki Projet 3: Booki Projet 3: Booki

Projet 3 de la formation "Développeur WordPress" d'OpenClassrooms

Détails du projet

Je démarre une alternance au sein de la start-up Booki, en tant que développeur Web.

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.

Je suis chargé d'intégrer l'interface du site avec du code HTML et CSS. Pour cela, Je travaille en étroite collaboration avec Sarah, la CTO, et Loïc, l’UI designer.

Pour se faire, Sarah m’a envoyé un mail avec la base du code HTML, un dossier CSS avec une première ébauche du code CSS et un dossier Image contenant toutes les images nécessaires pour le site internet.

Avec ceci se trouve la maquette du site faite par Loïc, ainsi qu’une note de synthèse pour l’intégration du site.

Processus de réalisation du projet

Pour réaliser ce projet, j'ai travaillé par itération, en découpant chaque partie pour les réaliser une à une au lieu de m'éparpiller:

- Le Header a été la première étape de la réalisation.

- La partie recherche + filtres, la seconde qui permet à l'utilisateur de filtrer et de rechercher un hébergement par ville.

- La section hébergements, qui présente les différentes possibilités d'hébergement en fonction de la recherche. Les hébergements sont listés sous forme de carte, sur deux lignes de 3.

- La section populaires, listant les hébergements les plus populaires. Ici les hébergements sont listés sur l'axe vertical au nombre de 3.

- La section activités à Marseille où l'on retrouve des meilleurs endroits à visiter. Pour cette section les activités sont listées au nombre de 4 sur l'axe horizontale dans des cartes plus grosses que les autres sections.

- Le Footer, qui nous donne accès aux menus annexes.

En réalisant ces étapes l'un après l'autre, j'ai pu m'approcher fortement du résultat attendu sur la maquette.