Booki
Transformez une maquette en site web avec HTML & CSS
Brief mission : résumé des tâches et des livrables demandés
Contexte : Vous êtes un développeur web en alternance au sein de la start-up Booki, chargé de l’intégration de l’interface du site qui permettra aux utilisateurs de trouver des hébergements et des activités selon leur choix de ville.
Tâches à réaliser :
- Étudier les maquettes fournies par Loïc (UI designer) et les informations complémentaires de Sarah (CTO).
- Intégrer les maquettes pour les différentes versions (desktop, tablette, et mobile) en utilisant du code HTML et CSS.
- Fournir le site sous forme de dossier compressé contenant :
- Fichier “index.html” avec le code HTML complet du projet.
- Dossier “CSS” ayant un fichier “style.css” avec tout le code CSS.
- Dossier “images” avec toutes les images utilisées.
Conseils :
- Ne pas se fier aveuglément au code exemple sur Figma car il peut présenter des soucis. Il vaut mieux le comprendre avant de décider de l’utiliser.
Livraison : Les éléments doivent être comprimés en format ZIP et nommés selon le format : Nom_Prénom_n° du livrable_nom du livrable__date de démarrage du projet
.
Soutenance : Durée : 15 minutes (+/- 5 minutes).
- Présentation (15 min) : Présenter le travail, le contexte, le rendu visuel sur différentes plateformes, le code via Visual Studio Code, les défis rencontrés et le bilan.
- Discussion (10 min) : Sarah (jouée par l’évaluateur) posera des questions sur le code HTML et CSS, la validité du code, le web sémantique, la spécificité en CSS, l’étude de la maquette, et d’autres concepts clés.
- Débriefing (5 min) : Discussion ouverte sans le rôle de Sarah pour feedback.
Critères d’évaluation :
- Mise en œuvre d’une interface responsive.
- Intégration fidèle du contenu selon la maquette.
compétences Acquises Suite au Projet
Maîtrise des Langages de Base:
J’ai renforcé mes compétences en HTML et CSS, les fondements du développement web. J’ai appris à structurer une page web et à la styliser de manière précise conformément à une maquette.
Responsive Design:
J’ai acquis une solide expérience en design adaptatif, garantissant une expérience utilisateur optimale sur tous les appareils : desktop, tablette et mobile.
Analyse et Interprétation des Maquettes:
J’ai appris à décomposer une maquette en éléments individuels, à identifier les composants récurrents, et à anticiper les défis liés à l’intégration.
Optimisation des Ressources:
J’ai acquis de l’expérience dans la gestion des ressources, notamment en utilisant des images de manière efficace, en optimisant leur taille et leur résolution pour le web.
Pratiques de Codage Propres:
J’ai développé une méthode de travail qui privilégie un code propre, commenté et bien structuré, facilitant la maintenance et la compréhension pour d’autres développeurs.
Validation et Conformité:
J’ai pris l’habitude de vérifier régulièrement mon travail à l’aide des validateurs, comme le W3C, assurant ainsi la conformité et la robustesse de mon code.
Sémantique Web:
J’ai approfondi ma connaissance des sélecteurs, des propriétés et des valeurs en CSS. J’ai également développé une meilleure compréhension de la cascade, de l’héritage et de la spécificité.
Présentation et Communication:
En préparant ma soutenance devant le jury, j’ai renforcé mes compétences en communication, apprenant à expliquer mes choix techniques de manière claire et concise.