PROJET BOOKI

Sebastien Escudero
Juillet 2023
 Rappel des consignes

INTÉGRATION DE LA MAQUETTE ET DES VERSIONNAGE DU PROJET SUR GITHUB DEVELOPPER UNE VERSION
WIREFRAMES EN HTML & CSS « RESPONSIVE » DU SITE
 Mise en place
du projet
1. Mettre en place le
projet dans VSCode
2. Initialiser et récupérer
le repo Github
3. Récupérer la police
Raleway sur Google
Fonts
4. Récupérer les icones
sur Font Awesome

23/07/2023
 Découper la
maquette en
HTML
Identifier les différents

éléments et les coder en

HTML pour avoir le

« squelette » de la page

d’accueil

23/07/2023
 Utilisation du
CSS pour la
mise en forme
Mise en forme de toute la
page en utilisant CSS et
ses sélecteurs, pour
attribuer différentes
propriétés afin que le
squelette de la page
ressemble à la maquette !

23/07/2023
 Le Header

• Ajout du Header, avec

le logo Booki et les liens
de navigations
« Hébergements » et
« Activités »

• Bordure supérieur bleue

au survol des liens
 La barre de
recherche

• Ajout de la barre de
recherche avec l’icone
Map, le formulaire de
recherche, le bouton
Rechercher

• Le bouton Rechercher
doit être remplacé par
une loupe sur la version
Mobile.
 Les filtres

• Ajout des Filtres

• 4 filtres, qui doivent être

« responsive » et
changer de couleur au
survol de la souris
 La ligne
d’information

• Ajout de la ligne
d’informations
complémentaires

• Ajout de l’icône « info »

 Section
Hébergements

• Ajout des « Cards »

Hébergements,
comprenant une
image, un titre, un sous-
titre et les étoiles de
notation
 Section
Populaires

• La section était déjà

fourni dans le code de
base, rien n’a été
modifié, sauf le fait que
ce sont désormais des
liens cliquables.
 Section
Activités

• Ajout de la section
« Activités à Marseille »

• 4 « cards » avec
différents lieux à voir à
Marseille, liens
cliquables également.
 Le Footer

• Ajout du Footer pour

avoir accès à d’autres
informations, qui sont
également des liens
 La version
Large Desktop

• Ajout d’une marge au

body au dessus de
1440px
 La version
Tablette

• Redimensionne
l’ensemble des cards et
le « body » de la page
d’accueil

• Dispose la section
« Populaires » en
dessous de la section
« Hébergements »
 La version
Mobile

• Redimensionne
l’ensemble des
« cards » et le « body »
de la page d’accueil

• Redimensionnement et
disposition différente
des éléments sur
l’ensemble de la page
 Validation
W3C

• Vérification de la
validité par W3C du
HTML et du CSS, afin de
garantir la conformité
du code.