Choose Your Language	Choisissez Votre Langue
English	Français

	This is the English version

1. 🌟 Introduction
2. 🌍 See the Site in Action
3. 🎓 Affiliation with OpenClassrooms
4. 📜 Project Context
5. 🚀 Features
6. 💻 Used Technologies
7. 🔍 Specifications
8. 🎨 Mockups
9. 📁 Project Structure
10. 🤝 Contributing
11. 📬 Contact for Project Access
12. ✔️ W3C Validation
13. 🌐 Browser Compatibility
14. 🔧 Test Tools
15. 👏 Acknowledgements
16. ✍️ Author
17. ©️ License

Welcome to the Booki repository, a web development project as part of my training at OpenClassrooms, an innovative online school. This project showcases my journey as a web developer and my ability to transform mockups into functional web sites.

To see the Booki site in action, visit: Booki Online

This project was developed as an integral part of my web development training at OpenClassrooms. This course focuses on practical skills and applying theoretical knowledge to real-world projects like Booki.

This project was developed as part of an internship at the startup Booki, specializing in travel planning. The goal was to create a site that allows users to easily find accommodations and activities in various cities.

• Search for accommodations and activities
• Filters by themes, budgets, etc.
• Responsive interface for all devices

Technology	Description
	HTML5 for the basic structure of the site.
	CSS3 for styling and layout.
	Figma used for mockup design.
	SCSS for more efficient CSS writing.
	Visual Studio Code as the code editor.

• Integration of mockups for desktop and mobile
• Exclusive use of HTML5 and CSS3
• Respect for design and functionality constraints

View the project mockups here.

The Booki project is structured to promote clear organization and easy maintenance. Here is a detailed description of the project structure:

Booki/
├

── index.html                 # Main page of the site
├── public/                    # Root folder for static resources
│   ├── css/                   # CSS Styles
│   │   └── style.css          # Main CSS file
│   ├── images/                # Image folder
│   │   ├── accommodations/    # Accommodation images
│   │   │   ├── large/
│   │   │   ├── medium/
│   │   │   ├── small/
│   │   │   └── xlarge/
│   │   └── activities/        # Activity images
│   │       ├── large/
│   │       ├── medium/
│   │       ├── small/
│   │       └── xlarge/
│   └── logo/                  # Site logos
└── scss/                      # SCSS folders for advanced styles
    └── [various SCSS files]   # SCSS files for different parts of the site

This project structure ensures a clear separation between presentation logic (HTML), layout (CSS/SCSS), and resources (images, logos), thus facilitating understanding and collaboration on the project.

Your interest and participation in the Booki project are greatly appreciated. Although the project is currently in a private repository, I am open to collaborations and external contributions. If you have ideas, suggestions, or wish to contribute in any way, please do not hesitate to contact me. You can join me at the coordinates below to discuss your potential contributions or to gain access to the source code.

I am always looking for enriching collaborations and innovative perspectives to improve this project. Any new contribution or idea is welcome.

This project is currently hosted in a private repository. If you are interested in the source code or would like to learn more about the project, please do not hesitate to contact me. You will find my contact details below:

• 📧 E-mail: [email protected]
• 🔗 LinkedIn: Mohamed-Ali EL HAMECH
• 💼 Portfolio: www.elhamech-mohamedali.com

I am always open to discussions about interesting projects and collaboration opportunities. Do not hesitate to contact me!

Compliance with the World Wide Web Consortium (W3C) standards is essential to ensure accessibility, browser compatibility, and the overall quality of the website. To ensure that the Booki project meets these standards, the following steps were undertaken:

• HTML Code Validation: The index.html file was submitted to the W3C HTML Validator, which checks code compliance with HTML5 standards.
• Results: The site passed the validation test without major errors, indicating a healthy and compliant markup structure.

• CSS Code Validation: The CSS stylesheets, including style.css and other files generated from SCSS, were validated using the W3C CSS Validator.
• Results: The styles used in the project are in compliance with CSS3 standards, ensuring consistent presentation across different browsers and devices.

• Accessibility Assessment: Although W3C validation does not directly cover accessibility, efforts were made to ensure that the site adheres to web accessibility principles, in accordance with WCAG guidelines.

• HTML Validation Report
• CSS Validation Report

These steps ensure not only a good user experience but also contribute to improving the site's performance and search engine optimization.

Browser compatibility is crucial to ensure a uniform user experience and quality. Here's an overview of Booki's compatibility with different browsers:

Browser	Compatibility	Notes
	Complete	Tested and fully functional on the latest versions of Google Chrome.
	Complete	Works perfectly with recent versions of Mozilla Firefox.
	Partial	Good functionality on Safari, with some testing to ensure compatibility.
	Partial	Basic compatibility ensured for Microsoft Edge.

The compatibility and responsiveness of the site were ensured using specialized tools.

Tested Aspect	Icon	Tool Used	Description
Browser Tests		BrowserStack	Used to test the site's compatibility across different browsers and devices.
Responsive Design		Responsive Design Tools	The site was rigorously tested to ensure it is fully responsive, offering a consistent user experience across various devices, from smartphones to desktop screens.

This approach ensures improved visual clarity, making it easier to distinguish between each tool's icon and name.

Special thanks to Sarah, the CTO, and Loïc, the UI designer, for their support and guidance.

This project was conceived and developed by me, Mohamed Ali EL HAMECH @MasterCodeDevelop. I am passionate about web development and always looking for new learning opportunities and collaborations. For more information about my professional journey or to contact me, here are my details:

• 📧 E-mail: [email protected]
• 🔗 LinkedIn: Mohamed-Ali EL HAMECH
• 💼 Portfolio: www.elhamech-mohamedali.com

Feel free to contact me for any questions, discussions about projects, or collaboration opportunities.

This project is currently hosted in a private repository and is intended for personal and educational use only. No open-source license is applied, meaning all rights are reserved. The use, copying, modification, merging, publishing, distribution, sublicensing, and/or selling of copies or parts of this project are strictly prohibited without prior written agreement.

For any questions regarding the use or distribution of this project, please contact me using the information provided in the Contact section.

Back to top

	Ce-ci est la version française

1. 🌟 Introduction
2. 🌍 Voir le Site en Action
3. 🎓 Affiliation à OpenClassrooms
4. 📜 Contexte du Projet
5. 🚀 Fonctionnalités
6. 💻 Technologies Utilisées
7. 🔍 Cahier des Charges
8. 🎨 Maquettes
9. 📁 Structure du Projet
10. 🤝 Contribuer
11. 📬 Contact pour Accès au Projet
12. ✔️ Validation W3C
13. 🌐 Compatibilité Navigateur
14. 🔧 Outils de Test
15. 👏 Remerciements
16. ✍️ Auteur
17. ©️ Licence

Bienvenue sur le dépôt de Booki, un projet de développement web réalisé dans le cadre de ma formation chez OpenClassrooms, une école en ligne innovante. Ce projet illustre mon parcours en tant que développeur web et ma capacité à transformer des maquettes en sites web fonctionnels.

Pour voir le site Booki en action, visitez : Booki en ligne

Ce projet a été développé en tant que partie intégrante de ma formation en développement web chez OpenClassrooms. Ce cours met l'accent sur des compétences pratiques et sur l'application des connaissances théoriques dans des projets réels comme Booki.

Ce projet a été développé dans le cadre d'une alternance au sein de la start-up Booki, spécialisée dans la planification de voyages. L'objectif était de créer un site permettant aux utilisateurs de trouver facilement des hébergements et des activités dans diverses villes.

• Recherche d'hébergements et d'activités
• Filtres par thématiques, budgets, etc.
• Interface responsive pour tous les appareils

Technologie	Description
	HTML5 pour la structure de base du site.
	CSS3 pour le style et la mise en page.
	Figma utilisé pour la conception des maquettes.
	SCSS pour une écriture plus efficace du CSS.
	Visual Studio Code comme éditeur de code.

• Intégration de maquettes pour desktop et mobile
• Utilisation exclusive de HTML5 et CSS3
• Respect des contraintes de design et de fonctionnalité

Visualisez les maquettes du projet ici.

Le projet Booki est structuré de manière à favoriser une organisation claire et une maintenance facile. Voici une description approfondie de la structure du projet :

Booki/
├── index.html                 # Page principale du site
├── public/                    # Dossier racine pour les ressources statiques
│   ├── css/                   # Styles CSS
│   │   └── style.css          # Fichier CSS principal
│   ├── images/                # Dossier des images
│   │   ├── accommodations/    # Images des hébergements
│   │   │   ├── large/
│   │   │   ├── medium/
│   │   │   ├── small/
│   │   │   └── xlarge/
│   │   └── activities/        # Images des activités
│   │       ├── large/
│   │       ├── medium/
│   │       ├── small/
│   │       └── xlarge/
│   └── logo/                  # Logos du site
└── scss/                      # Dossiers SCSS pour les styles avancés
    └── [divers fichiers SCSS] # Fichiers SCSS pour différentes parties du site

Cette structure de projet assure une séparation claire entre la logique de présentation (HTML), la mise en page (CSS/SCSS) et les ressources (images, logos), facilitant ainsi la compréhension et la collaboration sur le projet.

Votre intérêt et votre participation au projet Booki sont grandement appréciés. Bien que le projet soit actuellement dans un dépôt privé, je suis ouvert à des collaborations et à des contributions externes. Si vous avez des idées, des suggestions, ou souhaitez contribuer de quelque manière que ce soit, n'hésitez pas à me contacter. Vous pouvez me joindre aux coordonnées ci-dessous pour discuter de vos contributions potentielles ou pour obtenir un accès au code source .

Je suis toujours à la recherche de collaborations enrichissantes et de perspectives innovantes pour améliorer ce projet. Toute contribution ou idée nouvelle est la bienvenue.

Ce projet est actuellement hébergé dans un dépôt privé. Si vous êtes intéressé par le code source ou souhaitez en savoir plus sur le projet, n'hésitez pas à me contacter. Vous trouverez ci-dessous mes coordonnées :

• 📧 E-mail: [email protected]
• 🔗 LinkedIn: Mohamed-Ali EL HAMECH
• 💼 Portfolio: www.elhamech-mohamedali.com

Je suis toujours ouvert à des discussions sur des projets intéressants et des opportunités de collaboration. N'hésitez pas à me contacter !

La conformité aux standards du World Wide Web Consortium (W3C) est essentielle pour assurer l'accessibilité, la compatibilité entre navigateurs, et la qualité générale du site web. Pour garantir que le projet Booki respecte ces standards, les étapes suivantes ont été entreprises :

• Validation du code HTML : Le fichier index.html a été soumis au validateur HTML du W3C, qui vérifie la conformité du code avec les standards HTML5.
• Résultats : Le site a passé le test de validation sans erreurs majeures, ce qui indique une structure de balisage saine et conforme.

• Validation du code CSS : Les feuilles de style CSS, y compris style.css et d'autres fichiers générés à partir de SCSS, ont été validés à l'aide du validateur CSS du W3C.
• Résultats : Les styles utilisés dans le projet sont conformes aux standards CSS3, garantissant une présentation cohérente sur différents navigateurs et appareils.

• Évaluation de l'accessibilité : Bien que la validation W3C ne couvre pas directement l'accessibilité, des efforts ont été faits pour s'assurer que le site respecte les principes de l'accessibilité web, conformément aux directives WCAG.

• Rapport de validation HTML
• Rapport de validation CSS

Ces étapes assurent non seulement une bonne expérience utilisateur, mais contribuent également à l'amélioration de la performance et du référencement du site.

La compatibilité entre navigateurs est essentielle pour garantir une expérience utilisateur uniforme et de qualité. Voici un aperçu de la compatibilité de Booki avec différents navigateurs :

Navigateur	Compatibilité	Remarques
	Complète	Testé et pleinement fonctionnel sur les dernières versions de Google Chrome.
	Complète	Fonctionne parfaitement avec les versions récentes de Mozilla Firefox.
	Partielle	Bonne fonctionnalité sur Safari, avec quelques tests pour assurer la compatibilité.
	Partielle	Compatibilité de base assurée pour Microsoft Edge.

La compatibilité et la réactivité du site ont été assurées grâce à l'utilisation d'outils spécialisés.

Aspect Testé	Icône	Outil Utilisé	Description
Tests Navigateurs		BrowserStack	Utilisé pour tester la compatibilité du site sur différents navigateurs et appareils.
Responsive Design		Outils de Responsive Design	Le site a été rigoureusement testé pour garantir qu'il est entièrement responsive, offrant une expérience utilisateur cohérente sur divers appareils, des smartphones aux écrans de bureau.

Cette approche assure une clarté visuelle améliorée, facilitant la distinction entre l'icône et le nom de chaque outil.

Merci à Sarah, la CTO, et Loïc, l’UI designer, pour leur soutien et leurs directives.

Ce projet a été conçu et développé par moi, Mohamed Ali EL HAMECH @MasterCodeDevelop . Je suis passionné par le développement web et toujours à la recherche de nouvelles opportunités d'apprentissage et de collaboration. Pour plus d'informations sur mon parcours professionnel ou pour me contacter, voici mes coordonnées :

• 📧 E-mail: [email protected]
• 🔗 LinkedIn: Mohamed-Ali EL HAMECH
• 💼 Portfolio: www.elhamech-mohamedali.com

N'hésitez pas à me contacter pour toute question, discussion sur des projets ou opportunités de collaboration !

Ce projet est actuellement hébergé dans un dépôt privé et est destiné à un usage exclusivement personnel et éducatif. Aucune licence open-source n'est appliquée, ce qui signifie que tous les droits sont réservés. L'utilisation, la copie, la modification, la fusion, la publication, la distribution, la sous-licence, et/ou la vente de copies ou portions de ce projet sont strictement interdites sans un accord préalable et écrit.

Pour toute question concernant l'utilisation ou la distribution de ce projet, veuillez me contacter à l'aide des informations fournies dans la section Contact.

Retour en haut