Ohmyfood
Dynamisez une page web avec des animations CSS
Brief mission : résumé des tâches et des livrables demandés
Résumé du scénario « Ohmyfood » et de ses exigences :
Contexte : Vous avez rejoint la start-up Ohmyfood, une entreprise déjà établie à New-York et cherchant à s’implanter à Paris. Ohmyfood propose un site « mobile first » pour répertorier les menus des restaurants gastronomiques. Les clients peuvent non seulement réserver une table, mais aussi précomposer leur menu pour que leur repas soit prêt à leur arrivée, réduisant ainsi le temps d’attente au restaurant.
Mission :
- Développer un site responsive en « mobile first ».
- Le site doit répertorier les menus de 4 restaurants gastronomiques, car l’équipe commerciale a convaincu 4 restaurateurs de rejoindre la plateforme.
- Le site doit être basé sur les maquettes mobile et desktop fournies, ainsi que sur le prototype inclus dans le brief.
Instructions techniques :
- Les maquettes et le prototype du site sont disponibles via Figma.
- Il est important de développer pour mobile, tablette, et desktop tout en suivant rigoureusement les maquettes.
- Le site doit comporter des animations soignées, que vous devrez expliquer.
Livraison :
- Vous devez fournir un lien vers votre repository GitHub.
- Vous devez également fournir un lien vers la version en ligne de votre site.
- Tout cela doit être emballé dans un fichier ZIP nommé en suivant la convention « Titre_du_projet_nom_prénom ».
Présentation :
- (15 minutes) Explication des choix techniques concernant la conception du site : animation du cœur, sélecteur de plat, loader de la page d’accueil, et l’approche « mobile first » du code du projet.
- (10 minutes) Discussion avec l’évaluateur qui jouera le rôle de Paul. Les sujets de discussion pourraient inclure : les animations, l’organisation du code CSS, et l’approche responsive du site.
- (5 minutes) Débriefing après la soutenance.
Compétences évaluées :
- Mise en œuvre des effets CSS graphiques avancés.
- Mise en place d’une structure de navigation pour le site.
- Assurer la cohérence graphique d’un site.
- Utilisation d’un système de gestion de versions pour le suivi du projet et son hébergement.
- Mise en place de l’environnement Front-End.
compétences Acquises Suite au Projet
Mise en Œuvre d'Effets CSS Avancés:
J’ai acquis une expertise approfondie dans la création d’animations et de transitions complexes grâce à CSS. Ceci inclut l’animation du cœur, les sélecteurs de plats, et le loader de la page d’accueil.
Développement "Mobile First":
J’ai renforcé mes compétences en développement « mobile first », assurant une expérience utilisateur optimale sur mobile, puis l’adaptant aux tablettes et desktops.
Analyse de Maquettes:
J’ai affiné ma capacité à décomposer et interpréter des maquettes professionnelles, fournies via des outils comme Figma, pour transcrire fidèlement le design dans le développement.
Structure de Navigation:
J’ai mis en place une navigation fluide et intuitive pour un site répertoriant les menus de restaurants gastronomiques, tout en permettant aux utilisateurs de composer leur menu à l’avance.
Cohérence Graphique:
J’ai veillé à ce que toutes les animations, les styles et les éléments du site respectent une harmonie et une cohérence visuelle, en ligne avec les attentes de la startup Ohmyfood.
Utilisation d'un Système de Gestion de Versions:
J’ai utilisé Git et GitHub pour suivre l’évolution de mon projet, collaborer efficacement et héberger la version en ligne du site.
Présentation Technique:
Durant la soutenance, j’ai appris à expliquer clairement mes choix techniques et à répondre aux questions sur mon approche, notamment en ce qui concerne l’animation, l’organisation du code CSS et le responsive design.
Gestion de Projet:
Grâce aux livrables et à la structure du projet, j’ai développé une approche méthodique pour organiser mon travail, respecter les délais et garantir la qualité des livraisons.