Project #3 : Web Developer Training OpenClassrooms
- Project Description
- Technologies
- Assessed Skills
- Fictional Scenario
- Objectives
- Mockups
- Technical Requirements
- Functional Requirements
- Graphic Effects and Animations
- Built with
- Author
The objective of this project is to develop a 100% mobile website that lists menus from gourmet restaurants for Ohmyfood! – an online meal ordering company. Based on the provided mockups, my mission was to create a dynamic mobile site using HTML and CSS while integrating graphic effects and animations.
- HTML5
- SASS
- GIT
- ✨ Implement advanced CSS graphic effects.
- 📏 Ensure the graphic consistency of a website.
- 💻 Set up the Front-End environment.
- 🌐 Establish a navigation structure for a website.
- 📁 Use a version control system for project tracking and hosting.
I have just been recruited at Ohmyfood! as a junior developer.
The site's concept allows users to create their own menu and reduce waiting time in restaurants, as their menu is prepared in advance. No more time wasted browsing the menu!
In addition to conventional reservation systems, customers can compose their meal menu so that the dishes are ready upon arrival.
- Develop a site offering the menu of 4 major Parisian restaurants.
- Enable online reservation and menu composition.
- Mobile-first approach.
- Responsive design.
- Breakpoints: 480px, 768px, 1280px.
- Code versioned on Github and the site accessible on Github Pages.
- Recommended usage of SASS.
- No JavaScript.
- No framework.
- Graphic identity:
- Colors: Primary
#9356DC- Secondary#FF79DA- Tertiary#99E2D0 - Fonts: Logo and titles: Shrikhand - Text: Roboto
- Colors: Primary
- Compatible with the latest desktop versions of Chrome and Firefox.
-
Homepage:
- Display of restaurant locations. Eventually, it will be possible to choose a location to find restaurants near a specific place.
- A short presentation of the company.
- A section containing the 4 menus in card form. Clicking on the card redirects the user to the menu page.
-
Header:
- Present on all pages.
- On the homepage, it contains the logo.
- On the menu pages, it contains a back button to the homepage.
-
Footer:
- The footer is identical on all pages.
- Clicking on "Contact" redirects to an email address.
-
Homepage:
- Integration of a "loader spinner" that should appear for 1 to 3 seconds covering the entire screen.
-
Buttons:
- On hover, the background color of the main buttons should slightly lighten.
- A heart-shaped "Like" button. Clicking should gradually fill it. The effect appears on hover on desktop instead of click.
-
Menu Pages:
- Upon arrival on the page, menus should appear progressively with a slight time lag.
- To select a dish: Clicking on a dish should reveal a small sliding checkmark to the right of the dish. The effect can appear on hover on desktop instead of click. If the dish title is too long, it should be truncated with ellipses.
Projet #3 : Formation Développeur Web OpenClassrooms
- Description du Projet
- Technologies
- Compétences Évaluées
- Scénario fictif
- Objectifs
- Maquettes
- Contraintes Techniques
- Contraintes Fonctionnelles
- Effets Graphiques et Animations
- Développé Avec
- Auteur
L'objectif de ce projet est de développer un site 100% mobile qui répertorie les menus de restaurants gastronomiques pour Ohmyfood! est une entreprise de commande de repas en ligne. En me basant sur les maquettes proposées, ma mission était de créer le site mobile et dynamique en HTML et CSS en y intégrant des effets graphiques et des animations.
- HTML5
- SASS
- GIT
- ✨ Mettre en œuvre des effets CSS graphiques avancés
- 📏 Assurer la cohérence graphique d'un site web
- 💻 Mettre en place son environnement Front-End
- 🌐 Mettre en place une structure de navigation pour un site web
- 📁 Utiliser un système de gestion de versions pour le suivi du projet et son hébergement
Je viens d’être recrutée chez Ohmyfood!, en tant que développeur junior.
Le concept du site permet aux utilisateurs de composer leur propre menu et réduire leur temps d’attente dans les restaurants car leur menu est préparé à l’avance. Plus de perte de temps à consulter la carte !
En plus des systèmes classiques de réservation, les clients pourront composer le menu de leur repas pour que les plats soient prêts à leur arrivée.
- Développer un site proposant le menu de 4 grands restaurants parisiens.
- Permettre la réservation en ligne et la composition de menus.
- Mobile first
- Responsive
- Breakpoints : 480px, 768px, 1280px
- Code versionné sur Github et site accessible sur Github Pages
- Usage de SASS recommandé
- Sans JavaScript.
- Aucun framework
- Identité graphique:
- Couleurs: Primaire
#9356DC- Secondaire#FF79DA- Tertiaire#99E2D0 - Polices: Logo et titres: Shrikhand - Texte: Roboto
- Couleurs: Primaire
- Compatible avec les dernières versions desktop de Chrome et Firefox.
-
Page Accueil:
- 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.
-
Header:
- Présent sur toutes les pages
- Sur la page d'accueil, il contient le logo
- Sur les pages de menu, il contient un bouton retour vers la page d'accueil
-
Footer:
- Le footer est identique sur toutes les pages.
- Au clic sur “Contact”, un renvoi vers une adresse mail est effectué.
-
Page d’accueil:
- Intégration d'un "loader spinner" qui devra apparaître de 1 à 3 secondes sur l'intégralité de l'écran.
-
Boutons:
- Au survol, la couleur de fond des boutons principaux devra légèrement s’éclaircir.
- Un bouton "J’aime" en forme de coeur. Au clic, il devra se remplir progressivement. L’effet apparaît au survol sur desktop au lieu du clic.
-
Pages de menu:
- À l’arrivée sur la page, apparition progressive des menus avec un léger décalage dans le temps.
- Pour sélectionner un plat: Au clic sur un plat, apparition d'une petite coche coulissante à droite du plat. 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.