WDD 230: Web Frontend Development I

W05: 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 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.
  4. The responsive page displays a directory of members that can be displayed as cards or 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

  1. You can audit your page for basic content by using the ☑️ audit tool.

Submission

  1. Commit and push your updates and additions to your wdd230 GitHub Pages repository.
  2. Submit your course home page URL.