OhMyFood! - reservation website

This is a solution to the OpenClassrooms project. OpenClassrooms is one of the largest online schools in Europe, based in Paris.

Overview

Screenshot

The challenge

Users should be able to:

See animations for interactive elements and during page load
See a loading spinner while the page renders
Navigate the website using interactive images and icons
View the optimal layout for the website depending on their device's screen size

Links

Live Site URL: See the live page here

My process

Built with

Sass & CSS/Sass animations
Mobile-first workflow
BEM methodology
CSS3 Flexbox and Grid
Semantic HTML5 markup

What I learned

Sass (e.g., variables for colors as $color-primaire, functions as darken() and lighten())
CSS and Sass animations (@keyframes, e.g., loading spinner and delayed element appearances during page load; transitions, e.g., heart coloring, checkbox appearance)
- in animations, use mostly transform and opacity instead of width and color
BEM methodology
mobile-first workflow

Continued development

use more advanced Sass syntax to write more functionnal code
make the animation on elements persist after clicking (e.g., heart, checkbox)
change CSS class names from French to English
rebuild the project in React and Bootstrap