WDD 231: Web Frontend Development I

Testing and Evaluation

Overview

In this course, you are expected to continuously test your development work against established standards in the industry and specifically for this class in the areas of design, structure, usability, and accessibility. Even though a page may appear to be working on a particular browser and environment, it may not meet standards and therefore may have issues in other environmental scenarios. This module provides some tools that can be used to test your development work and these same tools and methods are often used in to assess your submitted work for the class.

Tools Used in this Course

Page Audits

Many assignments have an audit report that you can use to check for compliance to development standards. These audit tools are linked in the Testing section of the assignment. The report provides information on required elements and some content. Notes are provided to prompt you on what needs attention.

• Items marked with a '✅' appear to meet the standards.
• Items marked with an '❌' need to be fixed.
• Items marked with '👀' need to be further reviewed for content.
• Some items are just informational and are proceeded by the character '📑'.

Browser DevTools

Browser Developer Tools (DevTools) provide comprehensive information about the page being inspected. These tools are essential in the development process.

• Reference: Browser DevTools
  "Every modern web browser includes a powerful suite of developer tools. These tools do a range of things, from inspecting currently-loaded HTML, CSS and JavaScript to showing which assets the page has requested and how long they took to load." - MDN
• Device Simulation - Device Mode - Approximate viewport simulation for responsive design review.
• Panels used in this course
  • Elements: Inspect elements with detail for both HTML and the CSS cascade/specificity application.
  • Console: View the console output for the document.
  • Sources: Debugger tools to step through programs using breakpoints and watches.
  • CSS Overview: A summary of the CSS used on the page. Helps identify contrast and unused CSS issues.
  • Lighthouse: page auditing on performance, accessibility, best practice, and search engine optimization in different viewport sizes.
  • Network: Determine overall page weight. Remember to empty cache and hard reload the page when testing.
  • Application: Monitor the Storage object including localStorage.
  • Animations: The Animations tab automatically detects animations and sorts them into groups.
  • Show Coverage helps identify unused CSS and JavaScript by showing overall usage on the document.

Web Developer Extension

The Web Developer browser extension provides access to some endorsed validation and page checking tools including:

• W3C HTML validation,
• W3C CSS validation,
• W3C Link Checker, and
• WAVE accessibility.

This extension also provides access to local file validation when you are running Live Server locally.

Instructions

Complete the Web Developer Extension activity.