Ohmyfood

3e projet du parcours "Développeur Web" d'OpenClassrooms

Objectif principal :

Transformer une maquette en site 100% mobile (système de réservation de plats en ligne) et la dynamiser avec des animations CSS.

Ce site permettra à l'usager de composer son repas (entrées, plats et desserts) à l'avance, pour ensuite le déguster au restaurant sans attendre.

Contexte :

Vous rejoignez l'équipe de développement pour concevoir le menu de quatre restaurants.

Les maquettes vous sont fournies par la designeuse UX (Exemple ci-dessous : page d'accueil)

Ressources disponibles :

• 5 maquettes (version smartphone / 1 X Homepage et 4 X Pages menu) à trouver dans dossier "img"
• Icônes à exporter depuis Font Awesome
• Couleurs de la charte : Primaire #9356DC, Secondaire #FF79DA et Tertiaire #99E2D0
• Polices à exporter depuis Shrikhand (Logo et titres) et Roboto (Texte)

Fonctionnalités :

• Le site sera développé en priorité avec l’approche mobile-first, et devra aussi s'adapter aux autres résolutions (Laptop, Desktop et Tablette) (mise en page libre)
• Les frameworks sont proscrits mais l'utilisation de SASS est conseillé.
• Le code CSS ne peut pas être appliqué via un attribut de style dans une balise HTML
• Page d'accueil :

Affichage de la localisation des restaurants, il sera possible de choisir une localisation pour trouver les établissements proches d'une adresse (ex: Paris, Belleville)

Chaque carte de restaurant doit être cliquable dans son intégralité et l'utilisateur sera redirigé vers la page du menu

Cahier des charges :

• Intégration de la maquette et transformation en page web uniquement en langage HTML et SCSS
• Intégration à faire avec Visual Studio Code (plugins conseillés : Live server et Prettier)
• Utilisation conseillée de Flexbox et/ou CSS Grid
• Le code devra comprendre les balises sémantiques et ne doit contenir aucune erreur ni alerte au validateur W3C HTML et CSS
• Le site devra être compatible avec les dernières versions de Chrome et Firefox
• BEM / 7-1
• Code à versionner avec Git pour ensuite déployer la page sur GitHub Pages ou GitLab Pages

Coordonnées :

Vous pouvez me contacter directement en m'envoyant un email ou si vous voulez en savoir plus consultez mon profil LinkedIn !