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.
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.
You can also access your extensions by using the address bar; 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 validate our HTML markup and CSS. Validation means that we check our document to see if it follows the programming language's rules. 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. Browsers also have built-in tools like DevTools, that will be used later in this course and in subsequent courses.
Instructions
In this activity, you will install the extension on your browser. The extension will be used throughout this course.
- Install the Web Developer browser extension.
You can follow the instructions in the link above to install the extension, or you can add the extension to your preferred browser. This Web Developer resource provides information on downloading and installing on other browsers.
- Follow the directions and install the browser extension.
- Once installed, you should see the extension icon on your browser toolbar.
Video Demonstration: ▶️ Using the Web Developer Extension [5:00 minutes]
Optional Resources
- W3C HTML Validation - w3.org (Worldwide Web Consortium)
- W3C CSS validation - w3.org - (Worldwide Web Consortium)
- WAVE Accessibility - webaim.org - (Institute for Disability Research, Policy & Practice Utah State University)