WDD 230 | Development Standards

📑 Development Standards Checklist

Overview

This course focuses on the planning, design, and development of responsive websites using HTML, CSS, and JavaScript (which are the core web technologies) with attention to usability, accessibility, and best practices in web frontend development. The course learning outcomes also include the design and development of documents that adhere to best practices of organization and maintainability. Requiring a web frontend development standards checklist helps achieve the learning outcomes by providing focused feedback and a disciplined approach. Some line items in the checklist may be opinionated and are dependent, however, being held to an organization's specific baseline standards is common in the industry.

These development standards are modeled, in part, after The Front-End Checklist by David Dias.
Most of the supplemental references point to MDN Web Docs sources.

Standards Checklist

All of the following are required.

All folders and files follow the course naming rules/conventions which include lowercase only, no spaces, and are meaningful, i.e., semantic.
The Document Type declaration
```
<!doctype html>
```
HTML element lang attribute
```
<html lang="en-US">
```

Head

Meta Charset Attribute
```
<meta charset="utf-8">
```

Meta Viewport Element

<meta name="viewport" content="width=device-width, initial-scale=1">

Title Element
Meta Description Element
Meta Author Element
Displayed Favicon
Meta Social Media - Facebook OG (type, url, title, image, description)
Eternal CSS file references are used and in the proper order.

HTML

HTML is W3C compliant and valid. W3C validator
Semantic Elements are used. Why? is this important
No broken links are found on the page. W3C Link Checker

CSS

CSS is W3C compliant and valid. W3C validator
Unique ID selectors - If an ID selector is used, it is unique to a page. The planned use of class selector is preferred.
The CSS rules and declarations are not unnecessarily duplicated between views nor duplicated because of the use of non-congruent selectors nor left unused from the design and development cycle.

JavaScript

No errors nor references to unused JavaScript functions.
No output to the console in the final, published version of the page.

Accessibility and Best Practice

Images are optimized to fit the design needs of the site.
Image aspect ratios are not changed for any images.
Every image has an alt attribute assigned and it is relevant in describing the non-decorative image.
Only one heading <h1> is used on a single page.
Headings are used in the proper order to outline the page.
No color contrast violations at the AA level.
The page weight does not exceed 500KB as measured by the DevTools Network load.

Additional Considerations

These items are not on the checklist but certainly require mentioning.

No relevant violations of design principles of alignment, proximity, contrast, repetition, and usable typography.
The visual appearance of all pages in the site must be responsive, uniform, and consistent.
The site does not contain spelling nor grammatical errors.
All pages are tested for responsive web design with appropriately sized text, links, and no scrolling to the right nor dead-space.
The page functional outcomes are as expected.
The page delivers content as expected.
Accessibility test errors and warnings are reviewed