WDD 230 - Web Frontend Development I

05: Chamber of Commerce Home Page Continued

Overview

We continue building the chamber home page. The chamber home page welcomes the visitor with key information and invitations to engage with the organization.

You will be updating the index.html file in the chamber folder from the last lesson.

Instructions

References: Site Plan | Chamber Project Description
  1. Review the feedback you received from your group, peers, teaching-assistant, instructor, and/or others and make corrections and updates to your existing work as needed.
  2. Continue to add relevant content and HTML structure as needed to match the content pieces as presented in these example screenshots: Chamber Home Page including the sections on Events, Weather (placeholder data is OK), and chamber member Spotlights.
    Note that we will be adding dynamic content to the weather and spotlight sections in a future lesson so simple placeholder content is OK for now.
  3. Add a dark mode option to the page. The dark mode option should be a toggle switch that changes the page's general background color to black and the text color to white. The toggle switch should be positioned in the upper right corner of the page but should not interfere with the hamburger menu item. The toggle switch should be styled to match the design of the page.
    Resources You may use the W3Schools Switch example as a starting point.
    ⚙️Dark Mode Example - codepen.io
  4. Complete the following page evaluations:
    • Check for spelling and grammar errors.
    • Use this page audit tool to evaluate some basic structure and styling components.
    • Check for HTML and CSS validation errors.
    • Test your page in the latest version of your browser in responsive mode using the Inspect Device Toolbar (Dev Tools).
    • Check for JavaScript runtime errors.
    • Generate the browser's DevTools Lighthouse diagnostics running Performance, Accessibility, Best Practice, and SEO tests in the Mobile and Destop views. Feel free to discuss anything that does not make sense in the general channel.
    • Check for JavaScript runtime errors in the console or click the red, error icon in the upper right corner of Dev Tools.
    It is best to test your page in a Private or Incognito browser window.

Publishing and Submission

  1. Commit and push your work to your wdd230 GitHub Pages enabled repository.
  2. Return to I-Learn to submit your course home page URL.