Booki

Vue d'ensemble du projet

J’avais en charge l'intégration de l'interface du site avec du code HTML et CSS.

Les étapes du projet :
● Mettre en place votre environnement de développement : Visual Studio Code, Google Fonts et Font Awesome.
● Découper la maquette représentant la structure du code HTML.
● Intégrez le header du projet et utiliser Flexbox (ou Grid).
● Ajouter le formulaire de recherche.
● Ajout de la partie Filtres avec Flexbox
● Réaliser une première « card » présente dans «Hébergements à Marseille » (utiliser une largeur d'image en “%” et la propriété "object-fit")
● Gérer l’affichage des “cards” du conteneur “Hébergements à Marseille” (utiliser Flexbox et une largeur d'image en “%”)
● Intégrer le conteneur “Activités à Marseille”
● Implémenter le footer avec Flexbox
● Mettre en place le responsive design (respecter les deux media queries définies : 1024px pour l’affichage tablette et 768px pour l’affichage mobile)

Le projet se basait sur des éléments préparés au préalable :
● Les maquettes desktop, tablette et mobile du site.
● Les spécifications fonctionnelles et techniques.
● Un fichier “index.html” contenant une première base du code HTML (la partie cards “Populaires”).
● Un fichier “style.css” contenant une première ébauche du code CSS (la partie cards “Populaires”).
● Un dossier “images” contenant l’ensemble des images utilisées sur le site.

Les compétences évaluées étaient :
● Implémenter une interface responsive avec HTML et CSS
● Installer un environnement de développement front-end
● Intégrer du contenu conformément à une maquette avec HTML et CSS

Pour mener à bien ce projet, j'ai suivi les cours OpenClassrooms suivants :
● Mettez en place votre environnement front-end
● Créer votre site web avec HTML5 et CSS3
● Corrigez vos bugs et trouvez une solution à vos problèmes de code
● Intégrez une maquette Figma en HTML / CSS
● Créez une maquette pour le développement web
● Créez une maquette web avec Figma

N’hésitez pas à consulter le code et le visuel du projet en visitant les liens correspondants ci-dessouss.