HomeKey
- Développer, Exprimer, Comprendre
- Développement Web
- 1ère année BUT MMI
Développement web statique, maquette Figma, HTML/CSS, adaptation multi-supports, intégration front-end, structure HTML sémantique, mise en page, responsive design, media queries, expérience utilisateur, développement front-end, accessibilité web
Dans le cadre d’un projet universitaire de développement web statique réalisé en première année de BUT MMI, sous l’encadrement de Monsieur Errante, j’ai conçu le site vitrine HomeKey, une agence fictive spécialisée dans la location de logements de vacances.
Ce projet individuel avait pour objectif de traduire fidèlement une maquette Figma en une page web fonctionnelle, entièrement codée en HTML/CSS, sans recours à des frameworks.
L’enjeu principal résidait dans la compréhension d’un cahier des charges graphique, la restitution précise de l’interface et l’adaptation multi-supports. Ce travail m’a permis de renforcer mes bases en intégration front-end, tout en développant une approche rigoureuse du design-to-code.
Démarche & Tâches réalisées
– Analyse de la maquette et structuration du contenu
J’ai débuté le projet par une analyse approfondie de la maquette Figma, afin d’identifier les différents blocs de contenu (header, sections, footer) ainsi que leur hiérarchie. Cette phase m’a permis de concevoir une structure HTML sémantique, facilitant à la fois la lisibilité du code et la compréhension globale de l’interface.
– Intégration HTML/CSS et mise en page
L’intégration a été réalisée exclusivement en HTML et CSS, avec une attention particulière portée à la fidélité visuelle : couleurs, typographies, espacements, alignements et proportions ont été respectés conformément à la maquette.
J’ai utilisé Flexbox et Grid afin de gérer efficacement la mise en page et de garantir une hiérarchie visuelle cohérente sur l’ensemble de la page.
– Adaptation multi-supports et responsive design
Le projet intégrait un volet responsive design, essentiel pour assurer une consultation fluide sur smartphone, tablette et ordinateur. J’ai mis en place des media queries afin d’adapter la disposition des éléments selon les résolutions d’écran, tout en conservant la lisibilité et l’équilibre graphique du site.
– Posture réflexive
Ce projet m’a permis d’améliorer ma capacité à lire et interpréter une maquette UI, ainsi qu’à comprendre les enjeux liés à la transformation d’un design en code. J’ai appris à structurer mon code de manière plus propre, à adopter des conventions de nommage cohérentes et à faire des choix techniques adaptés aux contraintes du projet.
Il m’a également sensibilisée à l’importance de l’adaptation visuelle, en testant régulièrement le rendu sur différents supports afin de garantir une expérience utilisateur homogène.
La réalisation du site vitrine HomeKey constitue une étape importante dans mon apprentissage du développement front-end. Ce projet m’a permis de consolider des compétences fondamentales telles que l’intégration HTML/CSS, la mise en page responsive et la prise en compte des contraintes multi-supports.
Il m’a donné confiance dans ma capacité à reproduire une interface de manière rigoureuse, sans dépendre d’outils automatisés. À terme, je souhaite approfondir mes compétences en JavaScript, en accessibilité web et en optimisation front-end, afin de concevoir des interfaces à la fois esthétiques, intuitives et accessibles.
COMPÉTENCES MMI
Développer une solution web simple et efficace
Exprimer visuellement un contenu selon une maquette
Comprendre les besoins liés à l’affichage multi-supports
APPRENTISSAGES CRITIQUES
AC11.01 – Décrire les éléments d’un cahier des charges en réponse à un besoin exprimé
AC13.02 – Développer une interface web
AC13.05 – Composer une mise en page
AC13.07 – Adapter un contenu à différents environnements de consultation
