WDD 231: Web Frontend Development I

W02: Chamber Directory Page

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

Overview

We begin the Chamber of Commerce project by starting with the directory page. Last week you selected a city or region to base your project upon and were introduced to the chamber project's purpose and scope. This assignment has you work on the site layout and specific requirements for the content of the chamber of commerce directory page.

Instructions

Review the Project Scope

File and Folder Setup

  1. Add a new folder to your main wdd231 directory named "chamber".

    The chamber folder will contain all of the project's pages and assets. This subfolder is like its own, independent website.

  2. Add a new file named "directory.html".
  3. Add the common sub-folders to the chamber folder to store and organize the images, CSS, and JavaScript.

HTML

  1. In your directory.html document, add the standard head and meta content with a valid title, description, and author.
  2. Design and include a favicon for your chamber site.
  3. Add FaceBook social media meta settings for the:
    • title
    • type
    • image
    • url
    Testing Social Media Meta Data

    You can test the meta data on your page using the FaceBook Sharing Debugger tool. It allows you to see the information that is used when your website content is shared on Facebook, Messenger, and other places.

    1. Navigate to the FaceBook Sharing Debugger tool.
    2. Enter the URL of your page and click the Debug button.
    3. If this is the first time, click the Fetch New Information that displays in a warning box.
      Meta FaceBook Notification - Fetch New Information
    4. Here is a link to an example report. Notice at the bottom of the report the Open Graph properties that were found.
    5. Notice the referenced image is located in the GitHub repository. If you link to an image from an external source, you may get your site blocked as malicious.
  4. Use the site plan to create the required content and layout for the header, navigation, and footer. These items should be consistent between all the pages of the project.
  5. The footer is required to have contact information and some additional development information as shown in the site plan wireframes. Include your full name, WDD 231, and the last modification date of the page which is generated automatically using JavaScript.
  6. The main content of the directory page will display a list of members as a grid of 'cards' or as a line item list, depending upon the user's selection.

CSS

  1. Style your page using your planned color scheme. Remember that the style will be used on all the pages of your chamber project. It is normal for you to make adjustments as you work on the project throughout the course.

    The directory page is the first page of the project. It is important to get the layout and design correct before moving on to the other pages. The directory page will be used as a template for the other pages in the project.

  2. Use a normalize or reset CSS. Be sure to link it before any other CSS file in the head.
  3. Every page on the site must be responsive from 320px to wider views without any horizontal scrolling.
  4. The responsive, main navigation menu must support the pages listed in the site plan.

You may NOT use a CSS framework like Bootstrap or Tailwind CSS for this project. All CSS must be your own creation.

JavaScript

  1. Create a file named "members.json" and store it in a new folder named "data" in your existing chamber project folder.
  2. Create an array of at least seven(7) companies where each entry includes the following fields:
    1. names,
    2. addresses,
    3. phone numbers,
    4. website URLs,
    5. image or icon file names,
    6. membership level (1=member, 2=silver, 3=gold), and
    7. other information you deem appropriate.
  3. Using the JSON data source, display the member information on the page using the fetch method and async/await functionality.
  4. Let the user toggle between a "grid" type view of member cards or a simple, one-column list of members.

    Example: User Layout View Toggle Grid/List - CodePen

    Illustrative Example: Screenshots of Directory Page

  5. Using JavaScript, display the copyright year in the footer and the last modification date.

Testing

  1. Continuously check your work by rendering locally in your browser using the Live Server tool in VS Code.
  2. 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.
  3. Use DevTools CSS Overview to check the color contrast accessibility.
  4. Generate a DevTools Lighthouse report in the Performance, Accessibility, Best Practices, and SEO categories for both the mobile and Desktop views. Correct any issues found that are within your control.

    The performance criteria may report a score lower than 90 because of layout shift. This is OK and it can be ignored. Just make sure than you have optimized all of the images used on the page.

    It is best to test your page in a Private or Incognito browser window.

Audit and Submission

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