Ma solution au PROJET 3 - Dynamisez une page web avec des animations CSS du parcours de formation developpeur web chez Openclassroom.

Visiter le site

• Le projet
  • Contexte
  • Éléments fournis pour la réalisation du projet
  • Cahier des charges
  • Palette de couleur
  • Fonts
• Mon processus
  • Outils et technologies utilisés
  • Ressources utiles
• Livrables
  • Screenshots
• Auteur

L'objectif est d'integrer un site multipage proposant le menu de 4 grands restaurants, d'y intégrer des effets CSS avancés en utilisant le préprocesseur Sass et d'assurer la cohérence graphique à tout niveau en responsive

• Les maquettes de la version mobile
• Un cahier des charges
• Les images

• Header

  • Le header est présent sur toutes les pages
  • Sur la page d’accueil, il contient le logo du site
  • Sur les pages de menu, il contient en plus un bouton de retour vers la page d’accueil

• Page d’accueil (x1)

  • Affichage de la localisation des restaurants. À terme il sera possible de choisir sa localisation pour trouver des restaurants proches d’un certain lieu
  • Une courte présentation de l’entreprise
  • Une section contenant les 4 menus sous forme cartes. Au clic sur la carte, l’utilisateur est redirigé vers la page du menu

• Pages de menu (x4)

  • 4 pages contenant chacune le menu d’un restaurant

• Footer

  • Le footer est identique sur toutes les pages
  • Au clic sur “Contact”, un renvoi vers une adresse mail est effectué

• Boutons

  • Au survol, la couleur de fond des boutons principaux devra légèrement s’éclaircir. L’ombre portée devra également être plus visible
  • À terme, les visiteurs pourront sauvegarder leurs menus préférés. Pour ça, un bouton "J’aime" en forme de cœur est présent sur la maquette. Au clic, il devra se remplir progressivement. Pour cette première version, l’effet peut apparaître au survol sur desktop au lieu du clic

• Page d'accueil

  • Quand l’application aura plus de menus, un “loading spinner” sera nécessaire. Sur cette maquette, nous souhaitons en avoir un aperçu. Il devra apparaître pendant 1 à 3 secondes quand on arrive sur la page d'accueil, couvrir l'intégralité de l'écran, et utiliser les animations CSS (pas de librairie). Le design de ce loader n’est pas défini, toute proposition est donc la bienvenue tant qu’elle est cohérente avec la charte graphique du site

• Pages de menu

  • À l’arrivée sur la page, les plats devront apparaître progressivement avec un léger décalage dans le temps. Ils pourront soit apparaître un par un, soit par groupe “Entrée”, “Plat” et “Dessert”. Un exemple de l’effet attendu est fourni
  • Le visiteur peut ajouter les plats qu'il souhaite à sa commande en cliquant dessus. Cela fait apparaître une petite coche à droite du plat. Cette coche devra coulisser de la droite vers la gauche. Pour cette première version, l’effet peut apparaître au survol sur desktop au lieu du clic. Si l’intitulé du plat est trop long, il devra être rogné avec des points de suspension. Un exemple de l’effet attendu est fourni

• Le site doit être intégré en mobile first
• L’ensemble du site devra être responsive sur mobile, tablette et desktop
• Le développement devra se faire en CSS, sans JavaScript
• Aucun framework ne devra être utilisé, en revanche l’utilisation de SASS serait un plus
• Aucun code CSS ne devra être appliqué via un attribut style dans une balise HTML
• Les pages devront passer la validation W3C en HTML et CSS sans erreur
• Le site doit être parfaitement compatible avec les dernières versions desktop de Chrome et Firefox
• Tout le code doit être versionné sur GitHub et le site devra être accessible sur Github Pages une fois terminé

#9356DC → Couleur primaire
#FF79DA → Couleur secondaire
#99E2D0 → Couleur tertiaire

Logo et titre → Shrikhand
Texte → Roboto

• VScode
• Firefox developer
• Utilisation de Sass
• Utilisation des keyframes pour les animations
• Flexbox
• Importation des icones avec fontAwesome
• Importation des fonts avec googleFont

• Sass Guidelines
• Grafikart - formation Sass

• Github - Noëmie
• Twitter - @Noëmie