Ohmyfood est une application qui répertorie les menus de restaurants gastronomiques dans une ville choisie et vous permet non seulement d'y réserver une table en ligne, mais aussi de composer à l'avance votre menu afin que vos plats soient prêts à votre arrivée.
Ohmyfood est un projet fictif, constituant le 2nd projet pratique dans le cadre du cursus que je suis chez OpenClassrooms. Celui-ci m'a amené à travailler sur :
- une interface responsive pensée en "mobile-first" d'un site de réservation de restaurant en ligne (breakpoints classique de 1440px pour desktop, 1024px pour tablette et 375px pour mobile)
- la mise en oeuvre d'animations CSS, Javascript était proscrit !
- l'apprentissage de SASS pour structurer et optimiser mon CSS
- le respect d'un brief créatif, cahier des charges
- le versionnage de mon projet avec Git et GitHub
- la publication de mon rendu en ligne via GitHub Pages
- Aussi rapide que notre connexion internet soit, il y a toujours un temps de chargement, même infime... durant ce temps en question, admirez une petite animation de chargement.
- Un bouton tout plat sans animation, ça ne donne pas envie de cliquer... L'équipe technique a donc opté pour un petit "glow" du call-to-action d'Ohmyfood au survol !
- Envie de marquer votre restaurant comme "favori", dans les résultats de recherche ou sur le menu ? Un click et le coeur se rempli d'un beau gradient violet, un autre click et il se vide.
- Dans un soucis de fluidité, les différentes sections des menus apparaissent les uns après les autres au chargement de la page.
- Pour être certain d'avoir choisi nos plats, il est utile d'avoir un marqueur nous confirmant notre choix après click : une animation fluide de type "check" a été choisie.
- Clonez ce dépôt de code sur votre machine locale.
- Ouvrez le fichier
index.htmldans votre navigateur web. - Késako ? Pas le temps ? N'hésitez pas à visiter la version en ligne !
https://andreap2a.github.io/Ohmyfood/index.html
Lien du repo: https://github.com/AndreaP2A/Ohmyfood