WDD 230 - Web Frontend Development I

11: Chamber of Commerce Website Project

Overview

Complete your chamber of commerce project site.

• This is key assessment of the course learning outcomes.
• This concluding assignment is not open for resubmissions.
• Deliver the complete site to the 'client' by adding relevant content, working navigation, enhancements, corrections given past feedback and issues, and meeting the web design and development standards on all pages of the site.

Instructions

Your final project site should meet the requirements listed in the Chamber of Commerce Project Description.

• Use the wireframe site specification information to help drive the layout and content of your site.
• Ensure the site has a consistent look and feel based upon your site planning document. One way to do this is to evaluate your CSS to find redundancy and combine those declarations into CSS class rules for use throughout the site.
• Ensure the site is responsive and works well in all view widths, including very wide screens.
• Make updates and corrections to each page of the project site using instructor and peer/group feedback including from the Peer Review - Usability.
• Make your spotlight information on the home page dynamic by accessing your directory data in your JSON source. Do the following:
  1. List two to three chamber members who have silver or gold status which status should be a field in your JSON data file.
  2. Randomly select which companies are displayed from those members with each load of the page.
• All site content on each page needs to be relevant and viable.
• Ensure all links are working between all pages on the site and to external content.
• Make sure all the images are working on all the pages and that they are optimized and that page weights are reasonable.
• Ensure all pages and the site meet 230 Web Frontend Dev Standards.
• Continue to review and test your page with your Teaching Team as time permits.
• Correct any design issues in all view widths, including very wide screens.

Testing

1. Review the two rubrics provided in I-Learn for this project.
2. Validate your HTML and CSS using the ⚙️ Web Developer Extension or equivalent tool.
3. Test your page in the latest version of your browser in responsive mode using the Inspect Device Toolbar (Dev Tools).
4. Check for JavaScript runtime errors in the console or click the red, error icon in the upper right corner of Dev Tools.
5. Generate the Dev Tools Lighthouse report and run diagnostics for Performance, Accessibility, Best Practices, and SEO in both the mobile and Desktop views.
   It is best to test your page in a Private or Incognito browser window.

Submission

1. Commit your local repository and push your work to your wdd230 GitHub Pages enabled repository on GitHub.
2. Submit your chamber project home page URL in I-Learn.