{"id":21082519,"url":"https://github.com/code9g/booki","last_synced_at":"2026-05-20T02:53:07.249Z","repository":{"id":198424299,"uuid":"700812929","full_name":"code9g/booki","owner":"code9g","description":"Projet 2 de la formation \"Développeur JavaScript / React\" de OpenClassRooms","archived":false,"fork":false,"pushed_at":"2024-08-04T01:20:02.000Z","size":1051,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-20T23:46:33.630Z","etag":null,"topics":["css3","html5","openclassrooms","school-project"],"latest_commit_sha":null,"homepage":"https://code9g.github.io/booki/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/code9g.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-10-05T10:48:30.000Z","updated_at":"2024-08-04T01:28:03.000Z","dependencies_parsed_at":null,"dependency_job_id":"49ceb51b-4e55-4136-a446-36c1009b85d2","html_url":"https://github.com/code9g/booki","commit_stats":null,"previous_names":["code9g/booki"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code9g%2Fbooki","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code9g%2Fbooki/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code9g%2Fbooki/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code9g%2Fbooki/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/code9g","download_url":"https://codeload.github.com/code9g/booki/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243526855,"owners_count":20305112,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css3","html5","openclassrooms","school-project"],"created_at":"2024-11-19T20:14:23.997Z","updated_at":"2026-05-20T02:53:07.223Z","avatar_url":"https://github.com/code9g.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# booki\n\n![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge\u0026logo=html5\u0026logoColor=white)\n![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge\u0026logo=css3\u0026logoColor=white)\n![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge\u0026logo=javascript\u0026logoColor=%23F7DF1E)\n\nProjet 2 du parcours \"**Développeur d'application - JavaScript React**\" chez [OpenClassroom](https://openclassrooms.com/fr/).\n\n![home](./images/home.png)\n\nCréez la page d’accueil d’une agence de voyage avec HTML \u0026 CSS.\n\n# Description\n\nVous débutez votre alternance en tant que développeur web au sein de la start-up Booki.\n\nL’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.\n\nVous êtes chargé d'intégrer l'interface du site avec du code HTML et CSS. Pour cela, vous travaillez en étroite collaboration avec Sarah, la CTO, et Loïc, l’UI designer.\n\n## Objectifs\n\nL'objectif est d'intégrer une maquette depuis Figma, aussi bien en version bureau, tablette que mobile.\n\n## Spécifications fonctionnelles\n\n### Fonction recherche\n\n- Les usagers pourront rechercher des hébergements dans la ville de leur choix.\n- Le champ de recherche est un champ de saisie, le texte doit donc pouvoir être\n  édité par l’utilisateur.\n- Il faut englober ce champ dans un formulaire. La partie Recherche ne doit pas\n  être fonctionnelle - il s’agit d’une première version pour valider l’interface.\n\n### Liens **Hebergements** et **Activités**\n\nLes textes \"**Hébergements**\" et \"**Activités**\", situés dans l'en-tête, sont des liens, ils doivent mener respectivement vers la section \"**Hébergements à Marseille**\" et \"**Activités à Marseille**\"\n\n### Cartes hébergements et activités\n\n- Chaque **carte** d’hébergement ou d’activité devra être **cliquable** dans son\n  intégralité (pas uniquement le titre).\n- Pour l’instant, les liens sont vides. On peut utiliser un attribut `href=”#”` pour\n  simuler la présence d’un lien.\n\n### Filtres de recherche\n\n- Les hébergements peuvent être filtrés par thématique, comme le budget ou\n  l’ambiance.\n- Les filtres doivent changer de couleur au survol de la souris.\n- Les filtres ne doivent pas être fonctionnels - il s’agit juste d’une première version\n  pour valider l’interface.\n\n## Spécifications techniques\n\n### Maquettes\n\nTrois maquettes ont été réalisées : **desktop**, **tablette** et **mobile**.\n\n## Breakpoints\n\nNous avons convenu avec le designer UI d’utiliser _1024 px_ et _768 px_ :\n\n- \\\u003e _1024 px_ pour les écrans d’ordinateurs ;\n- \\\u003e= _768 px_ pour les tablettes ;\n- et tout ce qui est en dessous de _768 px_ pour les téléphones portables.\n\n## Largeur min - max\n\nPour éviter d’étirer la page web sur la largeur de façon excessive, il va falloir déterminer\nune largeur maximum de _1440 px_. Au-delà, une marge blanche doit apparaître sur les\ncôtés et le contenu doit se limiter à _1440 px_ de large.\nLa largeur minimum est fixée à _320 px_, en-deçà de cette largeur, le comportement n’est\npas garanti.\n\n## Desktop first\n\nIl faut d’abord réaliser l’intégration pour les ordinateurs (autrement dit, en desktop first),\npuis les tablettes et enfin les téléphones. L’utilisation des _Media Queries_ nous permettra\nde réaliser l’intégration pour les différents supports.\n\n## Bibliothèque d'icônes\n\nLes icônes proviennent de la bibliothèque [Font Awesome](https://fontawesome.com/).\n\n## Couleurs\n\nLes couleurs de la charte sont le **bleu** (_#0065fc_), le **bleu clair** (_#deebff_) et le **gris** pour le\nfond (_#f2f2f2_).\n\n## Police\n\nLa police du site est Raleway. Nous pouvons passer par **Google Fonts** pour importer\nfacilement cette police dans le code : https://fonts.google.com/specimen/Raleway.\n\n## Mise en page\n\nIl est recommandé d'utiliser **Flexbox**.\n\n## Balises sémantiques\n\nIl est important d’utiliser des balises sémantiques, au minimum “**header**”, “**nav**”,\n“**h1-h2-h3**”, “**main**”, “**section**”, “**article**” et “**footer**”.\n\n## Validité du code\n\n- Aucun IDE ou éditeur de code particulier n’est imposé pour le développement.\n- Le code doit être valide aux validateurs **W3C** HTML et CSS.\n- Le code HTML ne doit pas contenir de propriété CSS.\n- Lors du passage du desktop au mobile et à la tablette, **ne pas dupliquer le code\n  HTML** (exception faite dans le formulaire avec le mot “Rechercher” et l’icône de la\n  loupe).\n- **Privilégier l’utilisation des classes CSS** pour cibler un élément, plutôt que d’utiliser\n  le nom de l’élément lui-même.\n- Ne pas **dupliquer** des classes CSS inutilement. Exemple : si 4 éléments sont\n  identiques du point de vue de la mise en forme, alors utiliser une seule et même\n  classe CSS, et non pas 4.\n\n## Compatibilité navigateurs\n\nLa maquette doit être compatible avec les dernières versions de **Google Chrome** et de\n**Mozilla Firefox**.\nIl faudra tester la page web sur ces deux navigateurs.\n\n## Restrictions\n\nAucun **framework CSS** (type BootStrap ou Tailwind CSS) ou **préprocesseur CSS** (type Sass\nou Less) ne doit être utilisé.\nAucun autre **langage** ne doit être utilisé (comme JavaScript, par exemple).\n\n## Tester\n\nVous trouverez le lien pour tester l'application [ici](https://code9g.github.io/booki/)\n\n[![Github Pages](https://img.shields.io/badge/github%20pages-121013?style=for-the-badge\u0026logo=github\u0026logoColor=white)](\u003c[http://](https://github.com/code9g/)\u003e)\n[![LinkedIn](https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge\u0026logo=linkedin\u0026logoColor=white)](https://www.linkedin.com/in/pierre-andre-henry/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcode9g%2Fbooki","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcode9g%2Fbooki","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcode9g%2Fbooki/lists"}