WDD 130: Web Fundamentals

Setup: Browser Web Developer Extension

Overview

To aid our development cycle and reviews, we will use a browser extension named Web Developer. This extension provides access to some endorsed validation and page checking tools including HTML markup validation, CSS code validation, and page accessibility testing.

"The Web Developer extension adds various web developer tools to a browser. The extension is available for Chromium based browsers, Firefox, and Opera, and will run on any platform that these browsers support including Windows, macOS, and Linux." - chrispederick.com

Prepare

Extensions

Browser extensions are small, dependent, software modules that allow users to customize and enhance their browsing experience. Browser extensions are managed within the browser settings. Access to the settings vary but are similar between browsers using the upper right menu access button ( ••• ≡ ) in the browser window. For example, in Google Chrome, you can manage extensions by navigating to chrome://extensions.

For a comprehensive overview of browser extensions, visit the Wikipedia's Browser extension article in the optional resources provided below.

Document Validation

We will use the Web Developer extension to help us validate our HTML markup and CSS. Validation means that we check our document to see if it follows the rules of the language being checked. This is similar to checking the spelling and grammar in a document of a spoken language.

Tools like the Web Developer extensions help developers find issues that may cause the page to render in unexpected ways. There are built in tools in the browser like DevTools that will be used later in the course and subsequent courses.

Instructions

You will install the extension on your browser in this activity to be used throughout the course. In the end, the extension should appear and be ready to use on your browser toolbar.

  1. Install the Web Developer browser extension.

    You may elect to add an extension to your selected browser using the browser tools that you are familiar with versus navigating to these instructions and link. For example, use Web Developer to download and install on other browsers besides Chrome.

  2. Follow the directions and install/get the browser extension.
  3. Once installed, you should see the extension icon on your browser toolbar.

🎦 Web Developer Extension - A brief video demonstrating the use of the Web Developer extension.

Optional Resources