Présentation de la mission

Cette mission consistait à réaliser une maquette de site vitrine en s’appuyant sur une référence graphique conçue dans Figma. Le travail a porté sur la compréhension de la maquette, sa traduction en éléments web et l’organisation du code afin de produire une page structurée et agréable à consulter.

Travaux réalisés

• Analyse de la maquette Figma : repérage des sections, des composants et de la hiérarchie visuelle.
• Intégration de la structure des pages en HTML et séparation des responsabilités entre contenu et présentation.
• Mise en forme avec CSS, notamment à l’aide de Flexbox pour organiser les éléments.
• Création d’animations et de boutons interactifs en JavaScript.
• Organisation et structuration des fichiers du projet pour faciliter la lecture et les évolutions.
• Vérification du rendu dans le navigateur et ajustements visuels au fil de l’intégration.

Compétences et outils mobilisés

Le projet m’a permis de pratiquer les fondamentaux de l’intégration web, de la lecture d’une maquette à la vérification du rendu dans un navigateur.

• Visual Studio Code et extensions de développement web.
• Figma pour consulter la maquette de référence.
• Documentation et tutoriels HTML, CSS et JavaScript.
• Ressources Microlead et exercices consacrés à Flexbox.

Organisation

La réalisation a été menée principalement en autonomie, avec des échanges avec des camarades de la filière SLAM et l’accompagnement du professeur. Cette organisation m’a amené à avancer par étapes : analyser, intégrer, tester puis corriger.

Résultat et retour d’expérience

Cette première réalisation m’a permis de consolider les bases de la création d’interfaces web et de mieux comprendre le passage d’une maquette graphique à une page fonctionnelle. J’ai également travaillé la séparation HTML/CSS et l’importance de tester régulièrement le rendu pendant le développement.