Mobile Web Specialist Certification Course

---

Three Stage Course Material Project - Restaurant Reviews

Project Overview: Stage 3

Features Covered

Part-1 ✔

• Make Site UI compatible with a range of display sizes
• Made All Images Responsive
• Make Elements visible and usable in viewport
• Accessibility: Make all element's focus according to accessibility guidelines
• Accessibility: All site elements defined Semantically
• Make pages available Offline

Part-2 ✔

• Addition of Manifest File
• Fetch JSON from Server
• Store JSON to IndexedDB for offline purpose
• Improve Performance, PWA, Accessibility measures
• Preserved Responsiveness and Accessibility.

Part-3

• Added Reviews Form (Works offline and Sync on Network Connection)
• Can Mark Restaurant Favorite (Works offline and Sync on Network Connection)
• Performance, Accessibility and PWA measures >90
• Preserved Responsiveness and Accessibility.

How to run

Download/Clone Server From https://github.com/udacity/mws-restaurant-stage-3 and follow instrucctions to start. Execute Following Command to build with gulp and start server. Execute http://localhost:8000/ to access restaurant App.

npm install
gulp

Responsive Images

To generate responsive Images use Grunt File and grunt Command for generating source set for project.

   npm install mandatory before applying grunt command
  "grunt" alone creates a new, completed images directory
  "grunt clean" removes the images directory
  "grunt responsive_images" re-processes images without removing the old

References

• Code Base, Udacity Repository (mws-restaurant-stage-1)
• Responsive Images, Udacity Repository (responsive-images)
• Service Worker and Code Reference, Repository ([wittr] (https://github.com/jakearchibald/wittr))
• ARIA Breadcrumb section change according to review (W3 reference link)
• Skip Content added for accessibility accrding to review (Ref)
• Fetch API Documentation (Ref)
• IndexedDB Documentation (Ref)
• Error Resolution for Quota Exceeded (Ref)
• Yeoman generator for gulp, (3oilerplate)
• Snack Bar reference Code For Notification (W3School)
• IDB Code Help (IDBPromise)
• Website Sync Article (Great Examples!) (WICG)
• Uglify JS (UglifyJS3)
• Minify CSS (MinifyCSS)
• Reference for Map Overlay on hover (Ref)