WDD 231 | W05 | Chamber Discover Page

W05: Chamber Discover Page

The chamber of commerce website assignments are designed for group collaboration and each member of the group is responsible for their own chamber website.

Overview

This is the final week of the chamber of commerce project. We finish the website by designing and developing the chamber discover page which promotes the area in which your chamber of commerce is located through demographic content, statistics, and area imagery. The purpose of the page is to provide factual and representative information about the area including demographics and features that appeals to prospective chamber members and visitors.

Group Meeting

Prepare for you group meeting this week by reviewing the assignment and planning, designing, and developing before the group meeting.
Live attendance to the scheduled meeting is required and please be on time, showing respect for others in your group and share your camera.
Start the meeting with a prayer.
Work together to discuss the challenges and specifications of the assignment.
Plan on meeting for at least one hour.
Support each other throughout the entire week and course with asynchronous communication through your group's Microsoft Teams channel.

Instructions

You will be responsible to design a layout and use lazy loading while meeting the listed functional and development specifications including page performance metrics.

Wireframe Example of Discover Page Layout. — Figure 1: Wireframe Example of Discover Page Layout

Use your site page template to create a new page named "discover.html" in the chamber folder.
As always, preserve the header, navigation, and footer content.
Do not add new CSS files to support this page. Use your existing CSS and then add or modify rules and declarations as needed.

At this point in your web design and development work you should be looking to reduce unnecessary or repetitive CSS declarations and CSS rules. Look for opportunities to create reusable classes that help you maintain your design consistency and layout scheme.
Use CSS Grid to create a sidebar layout of your own design. The mobile view should be a single column layout.
The sidebar content can be anything that provides information to the users such as demographics, statistical data, events, attractions, and/or a calendar, etc.
The main area will contain local photos of interest. At a minimum six (6) images are required. Each image should be optimized in terms of file size and captioned.
The images must not load until the user scrolls. Use a lazy loading technique to accomplish this feature.
Using localStorage to store the last visit date by the client, display one of three possible messages about the time between page visits in the sidebar content area.

There are many options for the placement of visitor information on the page. Consider the purpose and user experience in your selection. Some options include an overlay or message area that can be closed, inline into the content area, or the footer.
- If this is the user's first visit, display "Welcome! Let us know if you have any questions.".
- If the amount of time between visits is less than a day, display "Back so soon! Awesome!".
- Otherwise, display the number of days in a message like this: "You last visited n days ago.", where n is the actual, whole number of days between visits. If the number of days is 1, then change the language to "day" not "days".
Consider using the localStorage object to store the date of the last visit to the page. This will allow you to compare the current date to the last visit date. In addition, storing the current date using Date.now() allows the date to be stored in milliseconds as demonstrated in this CodePen example.
Use a CSS property effect whenever a user hovers over the images in the gallery with their mouse. This effect design is your choice. Do not apply this effect to the images in the mobile view.
CodePen: Example Image Effects
The first image responds to the hover event.
Validate the links on the entire chamber website and continue to improve all the pages given the feedback from your submissions and from your peers.

Testing

Continue to improve each page of the chamber site project that you have worked on so far in the course by fixing development standard issues.
Make sure all the links are working between the existing pages.
Continuously check your work by rendering locally in your browser using the Live Server tool in VS Code.
Work to meet the Development Standards for the course.
Use the browser's DevTools to check for JavaScript runtime errors in the console or click the red, error icon in the upper right corner of DevTools.
Use DevTools CSS Overview to check your color contrast.
Generate a DevTools Lighthouse report in the Performance, Accessibility, Best Practices, and SEO categories for both the mobile and Desktop views.
Perform an analysis on every page of the chamber website to verify that each page loads with a data transfer size of less than 500kB when the cache is cleared.

Audit and Submission

Commit your local repository and push or upload your work to your GitHub Pages enabled wdd231 repository on GitHub.
Use this ☑️ audit tool to check some your page against the standards and some requirements.
Share your URL to your group's channel and review your group member's submissions.
Return to I-Learn and submit your the correct GitHub Pages enabled URL.
```
https://your-github-username.github.io/wdd231/chamber/discover.html
```