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. A 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 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
<!doctype html>is located at the top of the HTML document. - The html element lang attribute
<html lang="en-US">is provided.
Head
- Meta Charset
Attribute is used.
<meta charset="utf-8"> - Meta Viewport Element
<meta name="viewport" content="width=device-width, initial-scale=1">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.
width=device-widthsets the width of the viewport to the width of the device.
initial-scale=1sets the initial zoom level when the user visits the page. - Title Element
- Meta Description Element
- Meta Author Element
- 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)
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.
- A heading
<h1>is required and there is only one instance on a document.The <h1> heading should accurately represents the main topic or purpose of the page and match very closely with the content of the document's <title> It should succinctly summarize the content and provide a clear indication of what the page is about. While <h1> headings can be styled using CSS for visual hierarchy, their primary purpose is to provide semantic meaning to the content.
- Headings
<h1>-<h6>are used in the proper order to outline the page.Use heading elements (<h2> to <h6>) to create a logical hierarchy of content. Headings should be nested appropriately to reflect the structure and relationship between different sections of the page. - Heading Levels - Deque University
- No color contrast violations at the AA level. Use the browser's development tool (DevTools) CSS Overview, or use a tool like siegemedia's Contrast Checker to check color contrast.
- Ensure that the page's weight remains under 500KB as measured by the DevTools network transfer load indicator.
- Adhere to design principles such as alignment, proximity, contrast, repetition, and usable typography.
- Maintain an appealing visual appearance across all pages, ensuring responsiveness, uniformity, and consistency.
- Guarantee the absence of spelling and grammatical errors throughout the site.
- Test all pages for responsive web design, ensuring appropriately sized text and links, with no horizontal scrolling nor dead space.
- Verify that the page functions correctly and delivers content as expected.
- Accessibility test errors and warnings are reviewed
- Do not use third-party CSS frameworks or libraries in this course.