Site Web d’Intégration - Maquette Figma

Dans le cadre d’un travail du deuxième trimestre de BUT MMI, j’ai réalisé un site web personnel d’intégration à partir d’une maquette Figma fournie par notre professeur. L’objectif était de créer un site responsive, avec des déclinaisons adaptées aux formats ordinateur, tablette et téléphone. Le projet comportait également des animations de type hover pour améliorer l’interactivité, tout en respectant une structure HTML sémantique et un code CSS bien organisé.

En savoir plus

What / Quoi

Dans le cadre d’un travail du deuxième trimestre de BUT MMI, j’ai réalisé un site web personnel d’intégration à partir d’une maquette Figma fournie par notre professeur. L’objectif était de créer un site responsive, avec des déclinaisons adaptées aux formats ordinateur, tablette et téléphone, et d’y intégrer des animations hover pour une meilleure interactivité.

Why / Pourquoi

Ce projet m’a permis de mettre en pratique mes compétences en intégration web, en me confrontant à un processus complet, du respect rigoureux d’une maquette jusqu’à la mise en ligne d’un site conforme aux standards du web. Il m’a également aidé à renforcer mon souci du détail, puisque le principal enjeu était de reproduire fidèlement le design imposé. Travailler en autonomie m’a permis de développer ma rigueur et mon efficacité.

Where / Où

Le projet a été réalisé en grande partie pendant les cours dédiés à l’intégration, mais j’y ai aussi consacré du temps personnel pour peaufiner les détails et garantir une fidélité maximale à la maquette. J’ai travaillé à la fois à l’IUT et chez moi, sur mon environnement de développement.

When / Quand

Le projet a été mené au cours du second trimestre de l’année universitaire 2024-2025, entre février et avril 2025. Il s’inscrivait dans le cadre des apprentissages en développement web front-end.

Who / Qui

Ce travail a été réalisé en autonomie. J’ai assuré l’intégration HTML et CSS de A à Z, ce qui m’a permis de maîtriser toutes les étapes de la création d’un site web à partir d’une maquette.

Lien avec les apprentissages critiques

  • AC14.01 : Exploiter de manière autonome un environnement de développement efficace et productif.
  • AC14.02 : Produire des pages Web fluides incluant un balisage sémantique efficace et des interactions simples.
  • AC24.01 : Produire des pages et applications Web responsives.

Ce que j’ai appris

Techniquement : J’ai perfectionné ma maîtrise du responsive design, en adaptant une maquette multi-supports (desktop, tablette, mobile) de manière fluide et cohérente. J’ai également consolidé mes compétences en animation CSS, en intégrant des effets de survol discrets mais efficaces.

En conception web : Ce projet m’a sensibilisé à l’importance du respect d’un cahier des charges précis, en particulier dans le cadre d’un travail basé sur une maquette imposée.

En autonomie : J’ai renforcé ma capacité à gérer un projet complet seul, en planifiant mon travail, en respectant les délais et en garantissant un résultat final de qualité.

Portrait Paysage 1 Paysage 2 Paysage 3 Paysage 4