Restaurant Reviews -Stage I Project

Live Website

Starter Code The starter code from Udacity was provided.Goal was convert a static webpage design that lacks accessibility and convert the design to be responsive on different sized displays and accessible for screen reader use and also add a service worker to begin the process of creating a seamless offline experience for our users.

Table of Contents

• About the Application
• Application dependencies
• How to Run the Application
• Application Functionalities
• Resources
• Technologies
• Contributing

About the Application

A Restaurant Reviews web application about your neighbourhood restaurants, which is designed as per web accesibility standards and also to be responsive on different sized displays and accessible for screen reader use.The added functionality of service worker creates a seamless offline experience for the users

Application-dependencies

        This application Requires Active Internet Connection to Run

• Our app uses leafletjs for mobile-friendly interactive maps
• Our app uses Mapbox to display maps for restuarant location
• Our app uses Normalize CSS for better cross-browser consistency

How to Run the Application

1. Download the zip folder and unzip it.
2. Open the main folder
3. Do the any of following two options
   i. In this folder open the terminal and type npm start OR
   ii.In this folder open the terminal, check the version of Python you have: python -V. If you have Python 2.x, spin up the server with python -m SimpleHTTPServer 8887
   (or some other port, if port 8000 is already in use.) For Python 3.x, you can use python3 -m http.server 8887.
4. With your server running, visit the site: http://localhost:8887

Application-Functionalities

1. The application is reponsive on a variety of displays which is implemented using

* Flexbox
* Media queries
* Gulp-responsive images
* Srcset and sizes attributes

2. The application is designed as per web accesiblity standards and accessible for screen reader use which is implemented using

* Alt attribtes for Images
* Tabindex to implement focus on important content
* Aria-labels and Skip links on important content
* Semantic HTML

3. The application has functionality of service worker creates a seamless offline experience for the users implemented using

* Caching api techniques of the service worker
* Caching lets the user see the visted content even when they choose to go offline

Resources

1. Responsive design Implementation

• Responsive Image
• Responsive Image Course
• Media Queries
• Favicon
• gulp-responsive
• gulp setup
• flexbox article

2. Web Accesibility Implementation

• Web Accessibility
• Accessibility
• ChromeVox Extention
• chrispederick

3. Service Worker Implementation

• Offline Web Appilcation
• Service-Workers
• MDN
• Offline Cookbook
• Cache Images

Technologies

• Visual Studio Code Editor
• Javascript
• HTML
• CSS

Contributing

Any suggestions are welcome.