WDD 230 - Web Frontend Development I

09: Chamber Project Milestone - The Directory Page

Overview

The chamber directory page lists the members of the chamber. Build this page using course development standards checklist and meet the following content requirements.

Instructions

  1. Copy your existing, valid Chamber home page (index.html) and rename it "directory.html" in the chamber folder.
  2. Preserve the header, navigation, and footer content and erase the content in the main area of the page.
  3. Do not add new CSS files to support this page. Use your existing CSS and add or modify rules and declarations as needed.
    Look to reduce the amount of CSS you are using. Common declarations can be grouped into classes.
  4. The responsive page displays a directory of members that can be displayed as 1) cards or 2) as a line item list. All the member information must be driven from a JSON file of your own creation.
    1. Name this file "members.json" and store it in a new folder named "data" in your chamber folder.
    2. Store information for at least seven (7) companies including
      1. names,
      2. addresses,
      3. phone numbers,
      4. website URLs,
      5. image or icon file names,
      6. membership level, and
      7. other information you deem appropriate.
    3. Using the JSON data source, display the member information on the page.
    4. Let the user toggle between a "grid" type view of member cards or a simple, one-column list of members.
      Example and Help with View Toggle

      ⚙️ User Layout View - CodePen

    📑 Illustrative Example Screenshots of Directory Page

Testing and Submission

  1. Commit and push your updates and additions to your wdd230 GitHub Pages enabled repository.
  2. Check your color contrast using CSS Overview or an equivalent tool.
  3. 🧪 Use this page audit tool to review your page.
  4. Always adhere to the course development standards and PARC principles.
  5. Submit your course home page URL in Canvas.