WDD 230 - Web Frontend Development I

L02: Home Page Enhancement

Overview

This activity will allow you to demonstrate your understanding of the learning activities by applying the concepts to update your individual, course home page. ♨️Work with your group to apply the following specifications.

Ideally work on these midweek assignments before your group meeting each week so that you can contribute meaningfully to the group discussion. In addition, use your group's MS Teams channel to ask and answer questions about the assignment asynchronously throughout the week.

Instructions

  1. In your group, open up each others course home pages in the browser.
  2. Check the contrast ratio of each group 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. CSS: 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.
  7. CSS: Add a larger.css file with a media query, encase all the CSS rules in a media query using a min-width conditional breakpoint of your choosing.
    Where to set the breakpoint between the mobile (base) and larger views should be based upon design. Work with the breakpoints until you are comfortable with the response.
  8. CSS: Use CSS Flex on the navigation. Display the navigation links vertically in a single column in the mobile view and horizontally in one row in the larger views.
    Demonstration: 🎦CSS Flex Navigation Menu
    Source: ⚙️ CSS Flex Menu - CodePen
  9. CSS: Display the main sections in a single column in the mobile view and in two columns in the larger views as shown.
  10. Make additional CSS alterations as needed between the two views.
  11. 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 standard element audit tool.
  5. Use this assignment specific audit tool.
  6. 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.