Second projet de la formation "Développeur web" chez OpenClassroom. L'objectif de ce projet est d'intégrer une maquette en responsive HTML et CSS du site Réservia, outil de planification de vacances, de réservation d'hébergements et d'activités dans la ville de leur choix.
• Les usagers pourront rechercher des hébergements dans la ville de leur choix. Le champ de recherche est donc un champ de saisie, dont le texte peut être édité par l’usager. En revanche, à ce stade, le bouton de recherche ne sera pas fonctionnel.
• Chaque carte d’hébergement ou d’activité devra être cliquable dans son intégralité. Pour l’instant les liens seront vides.
• Les filtres ne seront pas fonctionnels pour cette version, en revanche, il faut qu’ils changent d’apparence au survol.
• Dans le menu, les liens “Hébergements” et “Activités” sont des ancres qui doivent mener aux sections de la page.
• Deux maquettes : l’une desktop et l’autre mobile. Le site devra également être adapté aux tablettes.
• Choisir le format le plus adapté par rapport à la résolution et au temps de chargement.
• Les icônes proviennent de la bibliothèque Font Awesome. Les couleurs de la charte sont le bleu #0065FC, et sa version plus claire #DEEBFF ainsi que le gris pour le fond #F2F2F2.
• La police du site est Raleway.
• Ne pas utiliser de framework ou pré-compilateur CSS ( utiliser du HTML et CSS)
• Utiliser Visual Studio Code, et ses plugins Live Server ou Prettier…
• Intégrer les icônes Font Awesome en HTML ou CSS.
• Le code devra utiliser les balises sémantiques et ne doit contenir aucune erreur ni alerte au validateur W3C HTML et CSS.
• Le site devra être compatible avec les dernières versions de Chrome et Firefox.
• Séparer le HTML et le CSS et organiser le dossier de rendu.
• Versionner le code avec Git puis le déployer sur la page GitHub Pages ou GitLab
Le site respecte bien les fonctionnalités et les contraintes techniques pour l'intégration de la maquette.
Afin de faciliter le code, la maquette a été délimité en différentes parties via les balises sémantiques afin de structurer la page (des notes additionnelles sont disponible aussi bien dans le HTML que dans le CSS afin de faciliter la lecture).
[1) Les balises de délimitations de zone dans la page :
L'entête du site avec HEADER, le menu de navigation avec NAV, le contenu principal avec MAIN, les contenu indépendants avec ARTICLES, les balises SECTION pour un découpage plus précis, le pied de page avec FOOTER.
2) les balises de balisage de contenu :
Les balises standards comme les balises P, A, UL, STRONG etc…]
A noter que le responsive a été intégré directement dans le fichier CSS "reservia.css"
La version du projet a été réalisée en partie sur le navigateur Chrome.
Le code ne contient aucune erreur au validateur W3C HTML et CSS.
Le code a été versionner sur GIT et déployé sur GITHUB a l'addresse suivante https://mlgdam.github.io/SIMONDAMIEN_2_22112020/
Pour ce projet, j'ai utilisé l'éditeur VISUAL STUDIO CODE, les plugins LIVE SERVER, PRETTIER , GITHUB et son terminal de commande GITBASH.