For the Restaurant Reviews projects, you will incrementally convert a static webpage to a mobile-ready web application. In Stage One, you will take a static design that lacks accessibility and convert the design to be responsive on different sized displays and accessible for screen reader use. You will also add a service worker to begin the process of creating a seamless offline experience for your users.
- Clone this repo to your local machine, or download the project as a .zip file
- Don't alter the folder/files disposition
- If you have Python installed, from the terminal run:
python -m http.server (for Python 3x)
python -m SimpleHTTPServer (for Python 2x)
Finally, move to the default address http://localhost:8000
Note: If you're using a code editor like VS Code, and have the live server extension installed, remember to change the port in the js/dbhelper.js file to your live server port.
This repository uses leafletjs with Mapbox. You need to replace <your MAPBOX API KEY HERE> with a token from Mapbox. You need to put your token, namely, in main.js and in restaurant_info.js.
Mapbox is free to use, and does not require any payment information.
So far, this is how the app scored using Chrome Lighthouse:
There is certainly room for improvement (see Todos below).
- Add intersectionObserver to improve performance
- Optimize image format
- Reduce render-blocking stylesheets