This project is part of FEWDND (Front-End Web Development Nano-Degree) @Udacity. The main purposes are to check for my ability in handling with
- grid css styles (w/o 3rd party framework like bootstrap)
- responsive pages (supporting mobile, tablet, and desktop)
- service worker to cache for offline usage
- accessibility by manipulating tabIndex, setting more descriptive alt attribute in img tags, and organizing the entire web page semantically.
In order to test this app, a server should be in action. "python -m SimpleHTTPServer 8000" command runs a simple HTTP server based on the current dicrectory. When index.html page is loaded on a browser, it will send XMLHttpRequest to get a JSON file holding all the restaurant information, which is in data directory. This is how SimpleHTTPServer mimics the HTTP server behaviour to ease out the front end development.
[Desktop UI Screenshot]
[Tablet UI Screenshot]
[Mobile UI Screenshot]
- grid-template-columns style is used with repeat() macro to indicate the number of columns
- grid property value is used in display style to indicate the elements support grid layout
- used media query (@media) with break points at 1024px, 768px, and 480px.
- two separate service workers are added for the main page(index.html) and the detail page(restaurant_info.html)
- basic URLs for .html, .css, and .js files are statically added at first
- whenever there is a fetch request, caches are looked up so to return if there are resources cached. if it is the new fetch request, it will go through the network and be cached.
- SimpleHTTPServer
- media query
- grid css
- service workers
- ARIA
- Udacity