Retour au portfolio

Booki

  • Intégration web
  • Interface responsive

Cette page présente l’étude de cas du projet Open Source Booki, incluant son aperçu, les outils utilisés, ainsi que des liens directs vers les ressources associées.

Booki

Description

Présentation

Ce projet consiste à intégrer fidèlement une maquette HTML / CSS pour le site de réservation d’hébergements et d’activités Booki, dans le cadre de ma formation Développeur Web sur OpenClassrooms.

L’objectif était de produire une interface responsive et accessible, adaptée à tous les écrans (ordinateur, tablette et mobile), tout en respectant les spécifications techniques et les bonnes pratiques du développement front-end.

Fonctionnalités principales

  • Affichage des hébergements et activités disponibles dans une ville
  • Interface responsive pour desktop, tablette et mobile
  • Cartes cliquables pour chaque hébergement et activité
  • Filtres de recherche visuels (non fonctionnels, simplement pour l’interface). Les filtres ne filtrent rien… mais au moins ça fait joli !
  • Navigation via liens internes (“Hébergements” et “Activités”)

Architecture et organisation

  • Structure sémantique HTML : header, nav, main, section, article, footer
  • Desktop first : intégration pensée pour ordinateur puis adaptée aux tablettes et mobiles via media queries
  • Flexbox utilisé pour la mise en page
  • Classes CSS pour les styles, afin de maintenir un code clair et réutilisable

Optimisation et compatibilité

  • Validité du code selon les standards W3C pour HTML et CSS
  • Compatibilité multi-navigateurs
  • Aucun framework ou préprocesseur CSS utilisé, pas de JavaScript

Pédagogique

Projet réalisé en 2023

Outils et technologies

  • HTML
  • CSS