WDD 231: Web Frontend Development I

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 W3C HTML validation, W3C CSS validation, and WAVE accessibility.

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.

Document Validation

We will use the Web Developer extension to help us validate 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 of document of a spoken language. Note that these validator tools are just helping us find issues which may cause layout and style mis-interpretations by the browser. Browsers do the best they can to interpret markup and code by filling in the blank where needed. As developers, we will want to follow best practices and avoid errors and warning in validation. The web developer extension tool will help us.

Activity 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, using the Chrome Web Store to find and install extensions.

2. Follow the directions and install the browser extension.
3. In your browser, navigate to this web page and complete these tasks:
   1. Validate the HTML: Click the Web Developer extension, go to the Tools tab and click Validate HTML. Note the results containing info, errors, and warnings. Some errors propagate other errors meaning that if they are fixed, other errors will go away because the errors were related and accumulated.
      Find the error with closing the main element. What is the error and how might it be fixed?

      Stray end tag main. The line number is given so most likely there is not a matching opening tag.
      ☑️ In this case, remove the extra closing </main> tag.

   2. Validate the CSS: Go to the Tools tab and click Validate CSS. Note the results.
      What error indicates that a named property does not exist? What is the probable fix?

      Property margin doesn't exist. A clue is given by the validator that the closest matching property is ☑️ margin.

   3. Validate the accessibility. Go to the Tool tab and click Validate Accessibility. Note the resulting report.
      Where is the contrast error found in the document? How can that be fixed?

      A very low contrast error is found on the last paragraph. The two colors used for the background and foreground need to have more color separation. Contrast ratios can be checked using contrast-ratio.com. Currently the background is #dddddd and the foreground is #777777 which is a ratio of 3.29.
      ☑️ Just changing the foreground to a darker gray like #444444 would provide sufficient contrast at 7.17.

4. Note that if the document that you want to check is local (running off your localhost or file system), you will need to use the validate local link options provided.