📑 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.
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