WDD 230: Web Frontend Development I

Setup: Development Environment

Testing and Evaluating Your Work

Overview

The purpose of this setup activity is to install and become familiar with some tools that can be used to test and evaluate the development work completed in this course.

Instructions

  1. Web Developer Browser Extension: Complete the Web Developer Extension activity.
    This browser extension is free and available on all major browsers.
  2. Browser Developer Tools - DevTools: DevTools allow us to conduct page audits and provide detailed render information that can be used test, debug, and improve the performance of the page.
    These tools are native to the browser and do not need to be installed.
    • 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
    • DevTools: Device Simulation - Device Mode - Approximate viewport simulation for responsive design review.
    • DevTools: 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.
      • Show Coverage helps identify unused CSS and JavaScript by showing overall usage on the document.
  3. WDD 230 Page Audits - Basic structure and styling checks built into the course for some assignment rubrics and used by certified Graders. Page Audits