Projet 02 - Créez la page d'accueil d'une agence de voyage avec HTML & CSS
( L’objectif de ce premier projet est de vous mettre dans les meilleures conditions pour réussir votre parcours, puis votre évolution professionnelle.)
Description
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.
Objet : Maquettes site Booki De : Sarah À : Vous 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 versionnes l'ensemble de ton projet avec Git et que tu nous livres le lien vers le projet accessible sur GitHub avec : un fichier “index.html” contenant l’ensemble du code HTML du projet ; un dossier “CSS” comprenant un fichier “style.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
Compétences évaluées
- Étape n° 1 : Installer un environnement de développement front-end
- Étape n° 2 : Implémenter une interface responsive avec HTML et CSS
- Étape n° 3 : Intégrer du contenu conformément à une maquette avec HTML et CSS
- Étape n° 4 : Versionner son projet avec Git et Github
La soutenance:
( Durant la présentation orale, l’évaluateur interprétera le rôle de Sarah, votre CTO. La soutenance est structurée de la manière suivante .)
Présentation des livrables (15 minutes)
 * Vous présenterez votre travail en expliquant vos choix techniques : - Vous rappelez le contexte du projet (qu’est-ce qui a été réalisé, pourquoi et pour qui). - Vous présentez le rendu visuel du projet en montrant les versions mobile, tablette et desktop. - Vous présentez le code du projet sur Visual Studio Code. N’hésitez pas à montrer les points les plus complexes que vous avez dû réaliser. - Vous faites le bilan du projet.Discussion (10 minutes)
 * Votre évaluateur, jouant toujours le rôle de Sarah, va vous questionner sur vos codes HTML et CSS. Il pourra vous challenger sur les points suivants : - la validité de votre code auprès du W3C ; - le Web sémantique ; - l’importance de passer son code aux validateurs ; - le fonctionnement de Visual Studio Code ; - la spécificité en CSS ; - l’étude et la découpe de la maquette ; - l’importance de séparer le HTML du CSS.Débriefing (5 minutes)
 * À la fin de la soutenance, l'évaluateur arrêtera de jouer le rôle de Sarah pour vous permettre de débriefer ensemble.Lien utiles:
La documentation officielle pour utiliser Font Awesome
Tutoriel pour apprendre à créer une carte (card) avec CSS
Article sur lapropriété Css objet-fit
Utilisation de la balise meta viewport pour controler la mise en page sur mobile
AIDE-MÉMOIRE GITHUB GIT
Git est le sytème de gestion de version décentralisé open source qui facilite les activités GitHub sur votre ordinateur. Cet aide-mémoire permet un accès rapide aux instructions des commandes Git les plus utilisées.