Projet BOOKI - Intégration et mise en œuvre en HTML & CSS

Description

Le projet BOOKI est un site web fictif visant à faciliter la recherche d'hébergements et d'activités touristiques pour les utilisateurs. Ce projet s'inscrit dans le cadre du Projet 02 de la formation Développeur web d'OpenClassrooms et a pour objectif d'intégrer des maquettes fournies (desktop, tablette, mobile) en utilisant HTML5 et CSS3.

L'objectif principal est de développer un site web responsive, conforme aux standards du W3C et aux meilleures pratiques de développement, tout en respectant les spécifications fonctionnelles définies dans la note de synthèse fournie par l'équipe produit.

Lien vers les maquettes : Maquettes Booki sur Figma

Structure du projet

Le projet est structuré comme suit :

• index.html : Contient la structure HTML sémantique du site, incluant des sections principales telles que le formulaire de recherche, les cartes d’hébergements et les activités touristiques.
• css/style.css : Fichier contenant les styles CSS pour mettre en page le site, avec l'utilisation de flexbox, grid et des media queries pour garantir une expérience responsive.
• images/ : Dossier contenant toutes les images nécessaires à l'interface (hébergements, activités, logo, etc.).
• README.md : Documentation du projet, expliquant le contexte, les fonctionnalités et les instructions d'installation.

Fonctionnalités implémentées

• Fonction de recherche : Un champ de recherche éditable permet à l’utilisateur de saisir une ville pour trouver des hébergements (interface uniquement).
• Liens de navigation : Les liens “Hébergements” et “Activités” dans l'en-tête permettent de naviguer vers les sections correspondantes.
• Cartes cliquables : Les cartes d’hébergements et d’activités sont entièrement cliquables, simulant la navigation (utilisation de href="#").
• Filtres de recherche : Les filtres permettent de sélectionner des thématiques d’hébergement (économie, familial, romantique, Nos pépites), avec un effet de survol.
• Design responsive : Le site est adapté pour les écrans desktop, tablette et mobile.
• Accessibilité améliorée : Utilisation de balises sémantiques, d'attributs alt pour les images et de labels pour les formulaires.
• Validation W3C : Le code HTML et CSS est conforme aux standards du W3C.

Technologies utilisées

• HTML5 : Pour la structure sémantique du site.
• CSS3 : Pour la mise en page et le design responsive.
• Flexbox et Grid : Pour la disposition flexible des éléments.
• Media Queries : Pour l'adaptation du design aux différentes tailles d'écran.
• Font Awesome : Pour les icônes graphiques.
• Google Fonts : Pour la police "Raleway".
• Git & GitHub : Pour le contrôle de version et l'hébergement du code.

Installation

Pour cloner ce dépôt et exécuter le projet en local :

Cloner le dépôt

git clone https://github.com/troisdes/booki-starter-code.git

Accéder au répertoire du projet

cd booki-starter-code

Ouvrir le fichier index.html dans un navigateur

utilisez la commande :

index.html

Auteur

Ce projet a été réalisé par troisdes dans le cadre du Projet 02 de la formation Développeur web d'OpenClassrooms.

Consultez le dépôt GitHub pour suivre l’évolution du projet.