Mobile Web Specialist Certification Course

Three Stage Course Material Project - Restaurant Reviews

Project Overview: Stage 1

For the Restaurant Reviews projects, I incrementally convert a static webpage to a mobile-ready web application. In Stage One, I take a static design that lacks accessibility and convert the design to be responsive on different sized displays and accessible for screen reader use. I will also add a service worker to begin the process of creating a seamless offline experience for your users.

Quick start

Check your python version

python -V

If you don't have Python installed, navigate to Python's website to download and install the software.

If you have Python 2.x, spin up the server with:

python run2.py

For Python 3.x, you can use:

python3 run3.py

With your server running, visit the site: http://localhost:8000.

Issues

Stage 1

• Responsive Design
  • Two white columns are replaced with background colour (laptop)
  • Grid of restaurants is well centered
  • Horizontal scroll (mobile)
  • All the space is covered with elements (laptop)
• Accessibility
  • Images has alt attribute
  • All headers have appropriate aria roles
  • Google Map has application or widget role
  • Table has tabindex to enable a user to go it through using Tab
  • Breadcrumbs have appropriate aria roles, structure and attributes (based on W3 Breadcrumb Example)
  • Language is set to html as attribute lang="en"
  • Main has a main role
• Offline Availability
  • Service worker is registered
  • Service worker implements offline caching (in case of network failure)
• General improvements
  • JS style is set (using ESLint based on Udacity style guide)
  • CSS style is set (using Style lint based on Udacity style guide)
  • Structure README (using Udacity: Writing READMEs)

Stage 2 (using Lighthouse report)

• Performance
  • > 70 (increased to average 93)
• Progressive Web Application
  • > 90 (increased from 73 to 92)
• Accessibility
  • > 90 (increased from 81 to 95)

Stage 3 (using Lighthouse report)

• A form to allow users to create their own reviews
• A functionality to defer updates until the user is connected
• Performance
  • > 90 (decreased to 72 and 74 for home and restaurant pages)
• Progressive Web Application
  • > 90 (from previous stage: 92)
• Accessibility
  • > 90 (from previous stage: 92)

Reports

Image

PNG picture is extracted from The Avocado