Transformez une maquette en site web avec HTML & CSS

Vous débutez votre alternance en tant que développeur web au sein de la start-up Booki. 

L’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.

Vous ê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. 

Sarah vous envoie un e-mail pour vous présenter l’avancée du projet.

✉️

De : Sarah
À : Vous
Objet : Maquettes site Booki

📎 Pièces jointes :
Maquettes du site Booki
Images du site de Booki
Note de synthèse pour intégration du site Booki

Bonjour,

Ça y est, Loïc a finalisé les maquettes desktop, tablette et mobile du site ! Tu vas pouvoir les intégrer. Elles sont disponibles en pièces jointes sur Figma. Pense à te connecter à Figma pour pouvoir voir toutes les informations sur les éléments de la maquette.

Tu trouveras également en pièce jointe le dossier contenant toutes les images à utiliser sur le site.

Pour que le projet soit très clair, Loïc et moi t’avons préparé une note de synthèse qui regroupe les spécifications et contraintes techniques à respecter (voir pièce jointe).

Pour que nous puissions consulter le site une fois fini, il faudra que tu crées un dossier, compressé au format ZIP, avec :

• un fichier “index.html” contenant l’ensemble du code HTML du projet ;
• un dossier “CSS” comprenant un fichier “index.css” contenant l’ensemble du code CSS du projet ;
• un dossier “images” contenant l’ensemble des images utilisées.

Bon courage pour ce projet, et bonne journée !

Sarah, CTO @Booki

Ravi par ce projet, vous commencez par vous plonger dans l’étude des maquettes !