HomeKey
Trace : Intégration HTML/CSS - Reproduction fidèle d'une maquette Figma
Rendu final · Site HomeKey reproduit en HTML/CSS - Ressource Intégration S2
01 / Explication du projet
Au cours du second semestre de BUT1, dans le cadre de la ressource Intégration, j'ai travaillé individuellement sur la reproduction à l'identique d'un site de réservation de vacances nommé HomeKey, inspiré d'un projet OpenClassrooms. La contrainte était claire : partir d'une maquette Figma fournie et l'intégrer pixel-perfect en HTML et CSS purs, sans framework ni JavaScript.
Confronté à moi-même pour la première fois sur un projet d'intégration complet, j'ai dû faire face à mes lacunes en CSS. Notamment sur la gestion des grilles, des flexbox imbriquées et des animations que j'avais pu contourner en groupe lors de la SAÉ 1.05. Ce projet individuel a été le vrai accélérateur de ma progression : j'ai approfondi les deux langages en profondeur, en cherchant à reproduire non seulement la structure mais aussi la responsive design et les animations de survol présentes dans la maquette originale.
Ce travail m'a permis de valider l'apprentissage critique AC 14.03 — Générer des pages Web à partir de données structurées, en prouvant ma capacité à traduire autonomement une intention de design en code fonctionnel et responsive, sans filet.
02 / Réflexion critique
Ce projet marque un vrai avant/après dans mon rapport au développement web. Le fait d'être seul face à la maquette sans pouvoir déléguer les parties difficiles. Il m'a forcé à vraiment comprendre ce que je codais, plutôt que de copier des solutions. J'aurais pu pousser davantage l'accessibilité et la sémantique HTML : à ce stade de BUT1, je me concentrais encore trop sur le rendu visuel au détriment de la structure sous-jacente.