Bookmark this page as a reference to use during the course.
Web Development Standards Checklist
Overview
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 of
the supplemental references point to MDN
Web Docs sources.
Standards Checklist
- 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
- 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.
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.
- A heading <h1> is required and there is only one
instance on a page.
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 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.
- No color contrast violations at the AA level. Use DevTools CSS Overview to test: ▶️ How to Use CSS Overview
- Accessibility test errors and warnings are reviewed
- The page weight may not exceed 500 kB transferred as measured by the
DevTools > Network > and a clear cache.
Page Weight Testing in the Browser's DevTools
DevTools: To launch Developer Tools in a browser, right-click, with your mouse, on the page in order to display a menu of options and select "Inspect" or use the keyboard shortcut Ctrl+Shift+I or Cmd+Option+I on Mac.
You can also launch DevTools through the browser's menu under "More tools".
The browser menu is typically a "hidden" menu that can be launched through a menu button found in the upper right corner of the browser window as a hamburger button or vertical or a horizontal "kebab" menu.
Network Tab: In the DevTools, navigate to the "Network" tab. Hard refresh the page with Ctrl+Shift+R or Cmd+Option+R on Mac or right-click the refresh button near the URL address bar to see the hard refresh option. The total transferred size is displayed at the bottom of the tab as "transferred".