WDD 230: Web Frontend Development I

W02: Team Activity - Home Page Enhancement

Overview

This activity will allow you to demonstrate your understanding of the learning activities by applying the concepts to your home page. Work with your team to apply the following specifications to enhance your own course home page given the following requirements.

Instructions

  1. In your group, open up each others course home pages in the browser.
  2. Check the contrast ratio of each team member's page using these methods and tools:
    1. Use Validate Accessibility in the Web Developer browser extension.
    2. Use the CSS Overview panel in the browser's Dev Tools to run a test for color usage, font-sizes, and color contrast.
    3. Use Lighthouse and run a test with mobile selected for the accessibility category.

    🎦 Color Contrast Evaluation - Demonstration of the evaluation tools.

  3. CSS: Fix any contrast issues that you have on your own course home page. The page must not have any contrast issues at the AA level.
    The DevTools CSS Overview tool is a simple option to check the specific level requirement.
  4. HTML: Verify from your learning activity work that your favicon and your teammates favicons are working.
  5. HTML: Verify that the social media meta settings are working by submitting a post of your GitHub Pages home page (https://yourusername.github.io/wdd230) on Facebook.
    If you do not have Facebook, use someone else's account. You do not need to actually post or you can just make the post audience "Only Me".
  6. Apply a responsive ≡ hamburger menu to your existing menu on your course home page using JavaScript.
    • The hamburger button should only show in the mobile view.
    • Clicking the hamburger button toggles the main menu items from viewable to not viewable.
    • Use a symbol, such as an 'X' to close the hamburger menu.
    7. Web Lab - Responsive Navigation
  7. Add a dark mode button to your <header> using a JavaScript toggle of the CSS classes for the <main> area from a light mode to a dark mode and vice versa.
    Example: ⚙️ Dark Mode Toggle - CodePen
    Dark Mode Button Lab

    Reference Only: 📑The CSS media feature, prefers-color-scheme, can also be used to detect if the user has a dark mode preference set in their operating system or in their user agent setting. MDN: prefers-color-scheme

  8. Apply a custom CSS normalization to your course home page. This CSS file must be listed before the other CSS references that you have in your <head> section and should be customized as you see fit.
    Any custom level of reset or normalization is OK.
  9. Always practice good design and development techniques by adhering to any relevant the course development standards.

Testing

  1. Validate your HTML and CSS using the ⚙️ Web Developer Extension or equivalent tool.
  2. Test your page in the latest version of your browser in responsive mode using the Inspect Device Toolbar (Dev Tools).
  3. Check for JavaScript runtime errors in the console or click the red, error icon in the upper right corner of Dev Tools.
  4. Use this assignment specific ☑️ audit tool.
  5. Generate the Dev Tools Lighthouse report and run diagnostics for Performance, Accessibility, Best Practices, and SEO in both the mobile and Desktop views.
    It is best to test your page in a Private or Incognito browser window.

Submission

  1. Commit your local repository and push your work to your wdd230 GitHub Pages enabled repository on GitHub.
  2. Submit your home page URL in I-Learn.