Ohmyfood

Ohmyfood est le quatrième projet du parcours "Intégrateur web" chez OpenClassrooms. Le but du projet est d'intégrer et de dynamiser une page web avec des animations CSS en utilisant le préprocesseur Sass.

Description

Ohmyfood est une jeune startup qui vise à s'imposer sur le marché de la restauration. Déjà présente à New York, elle cherche maintenant à se faire une place à Paris. Le site est une plateforme "mobile first" qui répertorie les menus de restaurants gastronomiques. En plus des systèmes classiques de réservation, les clients peuvent composer le menu de leur repas pour que les plats soient prêts à leur arrivée. Finis, les temps d'attente au restaurant !

Fonctionnalités

• Affichage des menus de 4 restaurants gastronomiques.
• Possibilité pour les clients de composer leur menu.

Technologies utilisées

• HTML
• CSS
• Sass

Installation

1. Clonez le répertoire sur votre machine avec la commande git clone https://github.com/Reyneri/Ohmyfood.git.
2. Ouvrez le fichier index.html dans votre navigateur pour visualiser le site.

Compilation Sass

Pour compiler les fichiers Sass en CSS, suivez les étapes suivantes :

Utilisation de Node.js et npm

1. Assurez-vous d'avoir Node.js installé sur votre machine.
2. Installez le package Sass globalement avec la commande npm install -g sass.
3. Dans le répertoire du projet, exécutez la commande sass --watch scss:css pour compiler les fichiers Sass en CSS et surveiller les modifications.

Utilisation de Visual Studio Code et Live Sass Compiler

1. Installez l'extension Live Sass Compiler dans Visual Studio Code.
2. Ouvrez le répertoire du projet dans Visual Studio Code.
3. Cliquez sur le bouton "Watch Sass" dans la barre d'état pour compiler les fichiers Sass en CSS et surveiller les modifications.

Utilisation

Naviguez sur le site pour découvrir les menus des différents restaurants. Vous pouvez composer votre menu en sélectionnant les plats de votre choix. Vous pouvez accéder au site en utilisant ce lien : [https://reyneri.github.io/Ohmyfood]

Développement

Le site a été développé en "mobile first" et est entièrement responsive. Les animations ont été réalisées en CSS sans l'utilisation de JavaScript. Le code CSS a été organisé et optimisé grâce à l'utilisation de Sass, notamment grâce à l'utilisation de mixins et de refactoring.

Discussion

Pour plus d'informations sur la réalisation des animations, l'organisation du code CSS et l'approche "mobile first", n'hésitez pas à me contacter.