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
elementlang
attribute is required.
The<html lang="en-us">
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.
UTF-8 is the most common character encoding for the web and includes nearly all characters from all known human languages.<meta charset="utf-8">
- 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.
The title is used by search engines and appears in the browser tab.<title>Page Title</title>
- The
meta description
element is required.
The meta description is used by search engines to describe the content of the page in search results.<meta name="description" content="A brief description of the page">
- The
meta author
element is required.
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.<meta name="author" content="Your Name">
HTML
- All HTML markup is W3C compliant. W3C HTML validator
- HTML semantic elements must be used where appropriate. Examples include:
Using semantic elements helps with accessibility, usability, and optimization.<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>
- 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.