PWA Documentation Page

You employ responsive design for desktop and mobile.

Desktop

I used a flex-container to put my criteria into two columns. The width of the section is 90%. The columns will adjust to the size of the screen.

Mobile

For the mobile layout, the columns will adjust to one column to make the layout more readable.

You employ a service worker to precache the app resources (HTML, CSS, and JavaScript, images) needed to run and to cache the data at runtime to improve performance.

I created a JavaScript file to add all the HTML, CSS, JavaScript, and the images files needed for my web app.

You employ a web app manifest and the beforeinstallprompt event to notify the user it's installable.

Web App Manifest

I created a JSON file that provides information about my web app to the browser. This file is necessary for the web app to be downloaded.

Before Install Prompt Event

This snippet of code is included in the service worker and lets the user know that they can install the web app.

You employ techniques that create the ability to run the project in a browser tab at a 100% functionality in devices of choice.

iPhone 11

This is how the web app looks on the iPhone 11.

Samsung Galaxy A02s

This is how the web app looks on the Samsung Galaxy A02s.

Is search engine optimized for page titles, meta tags, body text headings, images, internal links, and navigation.

Meta Data

I included meta data in the head of the HTML that includes meta name descriptions, keywords, author, copyright, viewport, ROBOTS, http-equiv, and the associated content.

Semantics

I included the appropriate elements for the page title, headings, body text and navigation.

Design elements such as typography, body text headings, graphics, links and color are balanced, practical, and aesthetic in order to create unity and consistency resulting in a harmonious visual appearance applying standards of web design and development including HTML and CSS validation when applicable.

The typography, body text, headings, graphics, links, and colors are balanced practical, and aesthetic. This web app applies the standards of web design and development including HTML and CSS validation. .