WDD 230 - Web Frontend Development I

07: Home Page Enhancement

Overview

Demonstrate your understanding of the learning activities by applying the concepts to your course home page. You will ♨️work with your group to apply the following specifications to your course home page.

Instructions

1. Add a page visit counter component to the existing information card of the <main> section of the page.
   • The counter must be driven using JavaScript and localStorage
   Example: ⚙️ localStorage

   🛠️Go through the five(5) steps provided in the JS panel.

2. Make sure that any images used on your home page do not violate their intrinsic aspect ratio in any view. Note this accessibility concept for future page testing.
   • Use the browser's DevTool Lighthouse tool to check for any violations.
   An example of contrast ratio issues can be found in this example: ⚙️Image Aspect Ratio
3. Check that the Google Map on your page is loading lazily by viewing the loading of assets using DevTools to inspect the page.
   1. Open the browser's DevTools.
   2. Turn on the mobile device emulation.
   3. Click the Network tab in DevTools.
   4. Using the browser's Refresh button, right mouse click on it and click on the Empty Cache and Hard Reload option.
   5. Page assets can be isolated in the Network tab's submenu including img resources.
   6. Watch the loading of assets as you scroll down the page to get the Google Map into the view.

   Demonstration: 🎦Observe asset loading in the browser's Network tool

Testing & Submission

• Commit your local repository and push your work to your wdd230 GitHub Pages enabled repository.
• Test your page that it deploys and renders on GitHub Pages.
• Test your basic structure and standards using this audit report.
• Test your page for accessibility using the WAVE tool. There should be no Errors, Contrast Errors, nor Alerts. Use the Details tab to review the issues if any. Consider any improvements that can be made.
• Submit your home page URL in I-Learn.