WDD 231 | W03 | Chamber Home Page

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

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.
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,

The page must have a consistent header, navigation, and footer
Update the head content as needed for this chamber home page.
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.

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

JavaScript

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.
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.

Capitalize each word of the weather description.
Format the output to show zero decimal points.
Since the data can return more than one "weather event", display all the events versus just the first one.

Testing

Continue to improve the current pages of the chamber project.
Make sure the links are working between the pages.
Continuously check your work by rendering locally in your browser using the Live Server tool in VS Code.
Work to meet the Development Standards for the course.
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.
Use DevTools CSS Overview to check your color contrast.
Generate a DevTools Lighthouse report in the Performance, 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

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