CSS Exercice
Intégration d’une maquette Figma – Projet Lodge Relocation
Ce projet a été réalisé dans le cadre d’un cours à la Normandie Web School, encadré par Anna Giraud. L’objectif était simple en apparence : intégrer fidèlement une maquette Figma d’un site vitrine pour une agence de relocation en Suisse, Lodge Relocation. Mais derrière cet exercice, il y avait un vrai défi : prouver ma capacité à reproduire à l’identique un site professionnel, en seulement cinq jours.
J’ai choisi d’utiliser Astro et une approche CSS utility first, sans Tailwind, pour mieux comprendre le fonctionnement de cette méthode. J’ai créé mes propres variables de couleurs et de polices, afin de garantir une parfaite cohérence avec la maquette originale.
Le projet m’a appris à être rigoureux, à soigner chaque détail et à structurer mon code de manière claire et efficace. Le responsive design n’a pas posé de difficulté majeure, car j’ai utilisé le rem comme unité de mesure dès le départ, ce qui a grandement simplifié les ajustements.
Certains composants, plus complexes, m’ont demandé de la patience — notamment un bloc que j’ai dû retravailler plusieurs fois avant d’obtenir un rendu parfait. Ce genre de moment m’a rappelé à quel point j’aime trouver des solutions par moi-même, même quand le code me résiste.
J’ai beaucoup travaillé sur ce projet, et le voir prendre forme, étape par étape, a été extrêmement gratifiant.
Recevoir 19/20 pour ce travail a été une vraie fierté : non seulement pour la note, mais surtout parce qu’elle symbolise les progrès concrets que j’ai faits. Ce projet m’a confirmé que je suis aujourd’hui capable de reproduire un site complet à partir d’une maquette, et c’est une compétence essentielle pour la suite de mon parcours professionnel.
Je tiens à remercier sincèrement Anna Giraud, qui nous a permis d’utiliser sa maquette, pour ses conseils bienveillants, ses retours précis et ses corrections constructives. Son accompagnement a rendu ce projet encore plus enrichissant.