WDD 130 | Development Standards

📑 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
1. DevTools: To launch Developer Tools (DevTools) 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 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.
2. 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".

Bookmark this page in your browser for 📑reference throughout the course.