Formation Développeur Front-End

Projet 3 - Ohmyfood!

---

Description du projet

Ce projet est le n°3 du parcours Développeur Front-End qui consiste à dynamiser une page web avec des animations CSS.

Cahiers des charges

Spécifications fonctionnelles

1. Au survol des boutons principaux, ils doivent légèrement s'éclaicrir avec une ombre plus visible.
2. Un bouton "J'aime" en forme de cœur doit se remplir progressivement en cas de clic ou de hover (selon l'appareil).
3. Un "loading spinner" du design de notre choix (cohérent avec la charte graphique) doit s'afficher sur la page d'accueil.
4. Les groupes "Entrée", "Plat", "Dessert" doivent apparaître progressivement avec un léger décalage.
5. En cas de clic ou de hover (selon l'appareil) sur un plat, une coche doit apparaitre en coulissant de la droite vers la gauche.

Spécifications techniques

1. Nous disposons de la maquette mobile. Le site doit être également adapté sur tablette et desktop avec les modifications nécessaires. Le travail consistait à travailler en mobile-first puis sur tablette puis sur ordinateur.
2. Les icônes utilisées proviennent de Font Awesome.
3. La charte graphique est la suivante : Primaire (#9356DC), Secondaire (#FF79DA), Tertiaire (#99E2D0).
4. Interdiction d'utiliser un framework CSS et/ou du JS.
5. Code valide au W3C : HTML | CSS.
6. Compatible sur les dernières versions de Google Chrome et Mozilla Firefox.

Compétences acquises

• Mettre en place une structure de navigation pour un site web.
• Mettre en place son environnement Front-End.
• Utiliser un système de gestion de versions pour le suivi du projet et son hébergement.
• Mettre en œuvre des effets CSS graphiques avancés.
• Assurer la cohérence graphique d'un site web.

Informations complémentaires

• Soutenance validé le 25/10/2021.
• Lien vers le site : Cliquez-ici.