WDD 230 | ☑️ Course Development Standards

Course Development Standards

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 supplemental references are to MDN Web Docs sources.

✅ Checklist

All folders and files follow the course naming rules which include lowercase only, no spaces, and are meaningful (semantic).
The Document Type declaration is at the top of the HTML document.
```
<!doctype html>
```
The html element lang attribute is provided.
```
<html lang="en-US">
```

Head

Meta Charset Attribute
```
<meta charset="utf-8">
```
Meta Viewport Element
The viewport of the browser is the viewable area. The content of rendered web document most likely is not the same size, therefore, scroll bars are provided by the browser. The viewport meta element considers the device width and scales the content the best it can for a given viewport. Setting the viewport to consider the device or user agent supports responsive design.
```
<meta name="viewport" content="width=device-width, initial-scale=1">
```
width=device-width sets the width of the viewport to the width of the device.
initial-scale=1 sets the initial zoom level when the user visits the page.
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. 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 - 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 is not repeated/duplicated unnecessarily 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 published version of the page.

Other

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 Network transfer 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 functions as expected.
The page delivers content as expected.
Accessibility test errors and warnings are reviewed
Do not use third-party CSS frameworks or libraries.

Submission

This is a 📑reference that should be bookmarked and will appear in assessments. There are no submission requirements.