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. 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

For this assignment you will use grid-template-area to build a responsive layout for small, medium and large screens.

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.
Use your existing CSS and then add or modify rules and declarations as needed. Some of you will choose to add a medium.css file with a media query.
Choose 8 items of interest in your area.
Locate and resize a photo for each item of interest. Photos should be around 300px wide by 200px tall and saved using the webp format
Create or find a name, address, and description for each of the 8 items.
Store this information in a JSON formatted file in the "data" folder of your site.
Build 8 cards using an h2 for the title, a figure tag for the image, an address tag for the address, a paragraph for the description, and a button titled "learn more".
Use named grid areas to layout the cards for small screens (320px to 640px wide), medium screens (641px to 1024px) and large screens (1025px and above).
Video Demonstration: Using Grid Areas Part 1
Video Demonstration: Using Grid Areas Part 2
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 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 Canvas and submit your the correct GitHub Pages enabled URL.
```
https://your-github-username.github.io/wdd231/chamber/discover.html
```