WDD 231: Web Frontend Development I

W03: Chamber Home Page

Remember, the weekly (weeks 2 through 5) chamber of commerce assignments are designed for group collaboration, however, each member of the group is responsible for their own chamber website.

Overview

We continue the multi-week Chamber of Commerce course project by building the chamber home or landing page. The home page welcomes the visitor with key information and invitations to engage with the organization.

Instructions

Setup

  1. Add a new file named index.html to the chamber folder as the home (landing) page using the same CSS that you developed last week. The layout and design of the header, navigation, and footer will be consistent between all the pages of the website.

    Hint: Use a copy of your directory.html page as a template to get started on this index.html page.

  2. Add any supporting resource files including images and script as needed as you develop this page. Make sure they are stored in the appropriate locations.

HTML

Use the following chamber of commerce project references as you layout and build your page,
  1. The page must have a consistent header, navigation, and footer
  2. Update the head content as needed for this chamber home page.
  3. The main area will have content specific to the home page. The following items are required components.
    • hero image
    • call to action link to join the chamber of commerce (future page)
    • current event(s) section
    • weather section
    • section containing two or three company 'spotlights'

CSS

Do not worry if you feel like you need to make changes from your original plan. This is a normal part of the design process. You will be able to make changes as you go along.

  1. Using any feedback from your prior submission, improve the CSS efficiency and application.
  2. The layout of the page's main content must change between mobile and larger views.

JavaScript

  1. In the weather section use actual weather data for the chamber location using a OpenWeatherMap API.
    At the minimum, include:
    • the current temperature,
    • the current weather description, and
    • a three (3) day temperature forecast that is properly labeled.
  2. Use your JSON data source of chamber members to display 'spotlight' advertisement cards.
    • display two or three members
    • member must be gold or silver members
    • randomly load 'spotlights' each time the page is rendered
    • display their company name, logo, phone, address, website, and membership level.
Seek Mastery

These are some challenges that add additional functionality and clarity of output.

Testing

  1. Continue to improve the current pages of the chamber project.
  2. Make sure the links are working between the pages.
  3. Continuously check your work by rendering locally in your browser using the Live Server tool in VS Code.
  4. Work to meet the Development Standards for the course.
  5. 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.
  6. Use DevTools CSS Overview to check your color contrast.
  7. Generate a DevTools Lighthouse report in the Accessibility, Best Practices, and SEO categories for both the mobile and Desktop views.

    Test your page in a Private or Incognito browser window when using LightHouse.

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 Canvas and submit your the correct GitHub Pages enabled URL. 
    https://your-github-username.github.io/wdd231/chamber/