Reproduction du "Site Suzuki Moto"
- Type
- DÉVELOPPEMENT WEB
- Année
- BUT1
- Date
- 11/01/2026
- Crédits
-
Cyprien MORIN-HROMIS,
MOTO SUZUKI FRANCE
Résumé
Dans le cadre de la SAÉ 105, nous devions reproduire une partie du site Suzuki Moto en HTML, CSS (et une touche de JavaScript) à partir d’une maquette imposée. Le projet demandait de recréer plusieurs pages du site, comprenant une page d’accueil, un menu déroulant interactif, différentes pages de formulaire ainsi qu’une mise en ligne finale du projet. L’objectif principal était de nous confronter à une première vraie intégration web en respectant une structure précise et des contraintes techniques proches d’un projet réel.
Argumentaire
Cette SAÉ m’a surtout permis de découvrir un véritable environnement de développement web. J’ai dû apprendre à organiser mes fichiers, structurer mes dossiers, gérer les liens entre les pages et travailler avec plusieurs technologies en parallèle. Bien que mes connaissances étaient clairement encore limitées à ce moment-là. Avec du recul, je reconnais avoir eu beaucoup de difficultés techniques, notamment en CSS. J’avais encore du mal à comprendre comment structurer correctement une page, gérer les espacements ou construire une mise en page propre et responsive. Une partie importante du projet reposait donc sur de l’expérimentation et de la recherche extérieure afin de réussir à reproduire visuellement le site demandé.
AC mobilisé : AC14.01 - Exploiter de manière autonome un environnement de développement efficace et productif
Le cœur du projet reposait sur l’intégration HTML/CSS des différentes pages du site Suzuki. Il fallait reproduire une interface relativement fidèle avec plusieurs sections, des images, un footer structuré ainsi qu’un menu déroulant latéral. Cette partie m’a permis de mieux comprendre l’importance du balisage sémantique et de la hiérarchie des éléments dans une page web. Le menu déroulant réalisé en JavaScript a probablement été la partie la plus complexe du projet pour moi. À ce moment-là de l’année, je ne maîtrisais pas encore suffisamment le langage pour développer cette interaction seul. J’ai donc utilisé plusieurs ressources extérieures ainsi que de l’aide par IA afin de comprendre la logique de fonctionnement et réussir à intégrer un résultat fonctionnel. Même si le rendu final comportait encore plusieurs défauts techniques et visuels, cette difficulté m’a surtout permis d’identifier clairement mes lacunes en développement front-end et les points que je devais approfondir par la suite.
AC14.02 - Produire des pages Web fluides incluant un balisage sémantique efficace et des interactions simples
Le projet comprenait également plusieurs pages de formulaire liées aux demandes d’essai Suzuki. Il fallait récupérer et afficher différentes informations saisies par l’utilisateur afin de construire un parcours cohérent entre les pages. Ce fut totalement nouveau pour moi et cela m’a permis de découvrir le fonctionnement des données structurées dans une interface web et la manière dont les informations peuvent être transmises et organisées entre différents formulaires.
AC14.03 - Générer des pages Web à partir de données structurées
Enfin, le site devait être hébergé et accessible en ligne pour le rendu final, pour ce faire j’ai utilisé une solution gratuite : Github. J’ai ainsi pû comprendre les contraintes liées à l’hébergement, aux chemins de fichiers ou encore à la vérification du bon fonctionnement des pages une fois publiées. Même si le projet restait techniquement imparfait, cette première expérience de déploiement m’a permis de comprendre le cycle complet de création d’un site web, de la maquette jusqu’à sa publication.
Je pense pouvoir affirmer qu’avec mes compétences actuelles et mon expérience fraîchement acquise je pourrais refaire ce travail dans de meilleures conditions pour un rendu plus propre.
AC14.04 - Mettre en ligne une application Web en utilisant une solution d’hébergement standard
Visuel(s) du projet
Consulter
Commentaires des évaluateurs
Connectez-vous pour voir les commentaires.