Projet 2 du parcours Développeur web d'OpenClassrooms : Transformez une maquette en site web avec HTML et CSS

COMPÉTENCES ÉVALUÉES :

Implémenter une interface responsive.

Intégrer du contenu conformément à une maquette.

OBJECTIFS :

Créer un prototype pour le site de réservation de voyage Booki en intégrant la maquette en HTML et CSS.

Livrer une version responsive desktop-first, puis tablette et mobile.

LIVRABLES :

SPÉCIFICATIONS FONCTIONNELLES :

● Les usagers pourront rechercher des hébergements dans la ville de leur choix. Le champ de recherche est un champ de saisie, le texte doit donc pouvoir être édité par l’utilisateur. Il faut englober ce champ dans un formulaire pour que ce dernier soit valide auprès du W3C. La partie recherche ne doit pas être fonctionnelle.

● Chaque carte d’hébergement ou d’activité devra être cliquable dans son intégralité (pas uniquement le titre). On peut utiliser un attribut href=”#” pour simuler la présence d’un lien.

● Les filtres doivent changer d’apparence au survol. Par contre, ils ne doivent pas être fonctionnels.

● Les 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”.

SPÉCIFICATIONS TECHNIQUES :

● Deux maquettes ont été réalisées : l’une desktop et l’autre mobile. Le site devra être également adapté aux formats tablette. Pour les tablettes, nous sommes libres de faire les adaptations nécessaires. Il est important qu’aucun élément ne soit coupé, et que le texte ait une taille suffisante.

● Les breakpoints sont 992 px pour les écrans d’ordinateurs et 768 px pour les tablettes, et tout ce qui est en dessous de 768 pour les téléphones portables.

● Il faut d’abord réaliser l’intégration pour les ordinateurs (autrement dit, en desktop-first), puis les tablettes et enfin les téléphones. Utiliser les media queries.

● Les couleurs de la charte sont le bleu (#0065FC), une version plus claire de ce bleu (#DEEBFF) et le gris pour le fond (#F2F2F2).

● La police du site est Raleway.

● Aucun framework CSS (type BootStrap ou Tailwind CSS) ou préprocesseur CSS (type Sass ou Less) ne doit être utilisé.

● Le code doit être valide aux validateurs W3C HTML et CSS.

● La maquette doit être compatible avec les dernières versions de Google Chrome et de Mozilla Firefox.