WDD FrontEnd 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.

The Checklist

All folders and files names must follow the course naming conventions/rules which include lowercase only, no spaces, and are meaningful (semantic).
The document type declaration (doctype) is declared at the beginning of the HTML document.
```
<!doctype html> or <!DOCTYPE html>
```
The html element lang attribute is required.
```
<html lang="en-us">
```
The lang attribute helps screen readers determine the language of the page for proper pronunciation and help enable accurate translations.

Head

The meta charset attribute is required and set to UTF-8.
```
<meta charset="utf-8">
```
UTF-8 is the most common character encoding for the web and includes nearly all characters from all known human languages.
The meta viewport meta is required for responsive web design. The viewport of the browser is the viewable area.
```
<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.
The title element is required and must be unique within the document.
```
<title>Page Title</title>
```
The title is used by search engines and appears in the browser tab.
The meta description element is required.
```
<meta name="description" content="A brief description of the page">
```
The meta description is used by search engines to describe the content of the page in search results.
The meta author element is required.
```
<meta name="author" content="Your Name">
```
The meta author element specifies the name of the author of the document and is used by you as a student to identify your original work.

HTML

All HTML markup is W3C compliant. W3C HTML validator
HTML semantic elements must be used where appropriate. Examples include:
```
<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>
```
Using semantic elements helps with accessibility, usability, and optimization.
All links are checked to ensure they are not broken.

CSS

All CSS is W3C compliant. W3C CSS validator

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 reduce file size while maintaining quality and meeting the design needs of the page and site.
Image aspect ratios are not changed for any images. The original ratios for any image are not changed when rendered.
Every image has an alt attribute assigned and it is relevant in describing the non-decorative image.
Only one <h1> is used on a single page.
Headings are used in the proper, sequential order to outline the page.
The color schema maintains sufficient color contrast 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.

Each page layout and design should meet standard 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.
The use of third-party frameworks and libraries is not allowed in this course.