#Project 2
Project specifics : https://course.oc-static.com/projects/DWJ_P2/DW+P2+28-09-2022+-+Scenario.pdf
BOOKI : Second project of the "WEB DEVELOPMENT" course:
[Turn a mockup into a website with HTML & CSS]
Transformez une maquette en site web avec HTML & CSS
How to run the project ?
FIRST :
Download the project zip file, rename it as you want, for example 'Booki' or other :
Run in the terminal VS Code :
cd booki for example
Launch the site with live server
SENARIO
Avant de valider défnitivement le design, l’entreprise a décidé de réaliser un prototype. Vous êtes chargé de créer ce prototype en intégrant la maquette en HTML et CSS. Dans la matinée, Sarah, la CTO, vous envoie un e-mail pour vous donner les derniers détails sur le projet.
De : Sarah Maquette of the Booki website À : Vous
Objet : Maquettes Booki
Bonjour,
Ça y est, on a bien avancé sur le projet du site de Booki. Tu vas t’occuper de l’intégration des maquettes de design en HTML / CSS, qui serviront de base de code pour le reste du développement. Du coup, voici les nouvelles maquettes qui ont été réalisées par Loïc pour les versions desktop et mobile. Le dossier comprend aussi les images à intégrer à la page. Pour que le projet soit très clair, on t’a préparé cette note de synthèse avec Loïc. Tu y trouveras nos spéciCcations de design, ainsi que les contraintes techniques à respecter. C’est tout pour moi.
Bon courage pour ce projet et bonne journée ! Sarah, CTO @Booki
COMPÉTANCES ET LIVRABLES
- Implémenter une interface responsive
- Intégrer du contenu conformément à une maquette
- Un dossier contenant le code du projet. Ce dossier doit contenir :
- un fichier index.html contenant le code HTML du projet ;
- Un dossier “css” contenant le ou les Fichier(s) de style CSS nécessaire(s) au projet ;
- Un dossier “images” contenant l’ensemble des images utilisées pour le projet.
Commentaires évaluateur :
- Implémenter une interface responsive
Validé
Commentaires :
Le site est iso-maquette, tous les elts de la maquette ont été bien intégrés repertoire images contenant les images utilisés dans le site Utilisation de la police via la font de Google Aucunes erreurs HTML et CSS détectés par les validateur W3C 2. Intégrer du contenu conformément à une maquette
Validé
Commentaires :
Utilisation des média queries avec un découpage propre utilisant un CSS suivant le device Site totalement responsive Les différents breakpoints sont bien gérés au niveau de l'index