⋅ Étude de cas ⋅
OpenClassRooms Projet #4
Note
Le travail présenté ici est issu d'un module de la formation d'intégrateur web proposée par OpenClassRooms,
pour laquelle j'ai obtenu la certification
RNCP38145
en octobre 2025. Le client comme le projet sont fictifs mais font l'objet d'un scénario calqué sur les conditions réelles.
Les livrables attendus sont jaugés à l'aulne de ce scénario.
⪢ Voir mon évaluation.
Contexte du projet
Ohmyfood est une jeune entreprise dédiée à faciliter l'expérience de restauration. Les clients peuvent choisir leur restaurant et personnaliser leur menu, garantissant ainsi un temps d'attente réduit à leur arrivée.
La tâche principale était d'intégrer une maquette en mobile-first. Les maquettes et le prototype étaient à disposition sur Figma, ainsi que les images et textes nécessaires.
Il fallait également mettre en œuvre des animations CSS pour enrichir l'expérience utilisateur du site.
L'utilisation de SASS était imposée pour étendre les fonctionnalités de base du CSS.
Règles strictes de l'exercice
✦ Intégration stricte en mobile first
✦ Utiliser le préprocesseur SASS
✦ Aucun framework CSS n'est autorisé
✦ Le javascript est proscrit
✦ Versionnage et commits réguliers obligatoires
Objectifs pédagogiques
✦ Intégrer une maquette en mobile-first
✦ Mettre en œuvre des animations CSS
✦ Versionner son projet avec Git et Github
Environnement de développement
Architecture SASS et compilation CSS
En m'appuyant sur le système 7-1 (ici 5-1) pour architecturer le dossier SASS, j'ai utilisé la commande @import pour assembler et compiler les fichiers SCSS partiels (définis grâce à l'underscore).
L'extension "live sass compiler" installée dans VScode détecte et analyse tout changement dans le code SCSS et compile les fichiers selon le mapping défini (ici un fichier style.css et sa version minifiée sont générés dans le dossier "public/css/")
Versionnage avec Git & GitHub
Afin d'assurer un suivi pertinent lors des échanges avec mon mentor et de préparer la soutenance de fin de projet, le code a été versionné sur GitHub via des commits réguliers.
Ce code est public et accessible sur mon compte GitHub
Intégration Mobile-first
L'architecture mobile-first consiste à concevoir d'abord la version mobile du site. Cela garantit une expérience utilisateur fluide sur les appareils mobiles, qui dominent le trafic internet aujourd'hui. Techniquement cette approche n'a ici aucune incidence sur la syntaxe HTML. Le CSS lui, aura la charge de gérer les différents breakpoints afin d'arriver progressivement vers la version desktop.
Page d'accueil du site OhMyFood!
Définition des breakpoints
J'ai d'abord défini des points de rupture standards en déclarant et en mappant la variable $breakpoints.
La mixin va ensuite se charger de définir la syntaxe respond-to grâce aux fonctions, et la restituer en code CSS.
Il suffira d'appeler ensuite, au besoin, le point de rupture souhaité via la commande @include.
Animations .css
Animation du coeur
Pour animer le coeur j'ai superposé 2 icônes.
L'effet recherché est une captation de la couleur en inner-embossed quand le coeur est activé. Pour être plus élégant, j'ai décalé la transition d'opacité.
L'effet inverse consiste à relâcher la couleur précédemment absorbée.
Animation du loader
Le loader comporte 3 objets :
✦ la casserole
✦ le logo
✦ la barre de chargement
La casserole produit une ébullition qui va faire progressivement apparaitre le logo tandis que la loadbar progresse. Pour éviter d'étirer le dégradé de la loadbar, j'ai choisi de la dévoiler en superposant une barre grise qui va rétrécir vers la droite.
Animation du sélecteur de plats
Le sélecteur de plats, apparait via une gestion dynamique du listing grâce à la commande @for et le calcul du retard à appliquer sur l'animation de chaque enfant.
La sélection d'un plat est animée au survol, validée par le clic (input type="radio") et récupérée en "get"
Évaluation & bilan
Validations
1. Intégrer une maquette en mobile-first
✔ Validé
→ L’étudiant a intégré la maquette en adoptant une approche mobile-first. La conception est responsive sur divers appareils (mobiles, tablettes, et ordinateurs) et respecte les standards de résolution jusqu’à 1920x1080. Il a utilisé sass comme recommandé et je note l'absence de frameworks comme Bootstrap.
2. Mettre en oeuvre des animations CSS
✔ Validé
→ Les animations CSS sont implémentées conformément aux exigences. L'étudiant a utilisé des animations au survol d'éléments avec des effets inverses au désengagement, enrichissant l'expérience utilisateur. La validation W3C du code CSS et l'explication fournie sur la réalisation des animations bidirectionnelles soulignent sa maîtrise technique.
3. Versionner son projet avec Git et GitHub
✔ Validé
→ Le projet est correctement versionné sur GitHub avec plus de cinq commits bien documentés. L’étudiant a su justifier son rythme de commit et démontrer sa compétence dans l'utilisation des commandes de base de Git, comme les pull requests et les code reviews.
Soutenance
→ La soutenance s'est bien passée, le projet est validé.
Intégration mobile-first et animations SASS to CSS
Commanditaire
OpenClassRooms (module de formation #4)
Prestation
Intégration mobile-first
Animations CSS
Outils
HTML / SASS