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 :
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.
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 t’aider à démarrer, je t’ai préparé la structure de fichiers du site ainsi qu’une base de code :
- un fichier “index.html” contenant une première base du code HTML que tu devras compléter ;
- un dossier “css” contenant un ou plusieurs fichiers “style.css” avec une première ébauche du code CSS et que tu devras compléter également ;
- un dossier “images” contenant l’ensemble des images utilisées sur le site.
Ce code est déjà un peu fourni et il te donnera les premiers éléments HTML et CSS. Tu peux t’en inspirer pour développer le reste du code, et il faut que tu conserves la même structure de dossiers. Tu devras ensuite m’envoyer ce dossier complet via GitHub. Pense d'ailleurs à bien versionner ton projet sur Git tout au long de ton développement.
Bon courage pour ce projet, et bonne journée !
Sarah, CTO @Booki
Pièces jointes :
- Maquettes FIGMA du site Booki (Desktop, Tablette et Mobile)
- Note de synthèse pour intégration du site Booki
- Base de code
La capacité à créer des interfaces web responsives est cruciale dans le développement web moderne.
En apprenant à intégrer des maquettes avec précision en utilisant HTML et CSS, et en configurant un environnement de développement efficace, vous poserez les bases nécessaires pour devenir un développeur front-end compétent.
Ces compétences sont fondamentales pour assurer une expérience utilisateur optimale sur divers appareils, un aspect essentiel pour la réussite de tout site web ou application.
Vous pouvez voir le projet en cliquant ici : Booki
