Software Development | Web Frontend Development Standards

Web Frontend Development Standards

Overview

Frontend development standards help ensure that websites are consistent, maintainable, accessible, and performant across browsers and devices. Following shared guidelines for HTML, CSS, and JavaScript also makes it easier for teams to collaborate and share code.

✅ Checklist

• All folder and file names are lowercase, contain no spaces, and are semantically meaningful (check the specific course guidelines).
• The document type declaration <!DOCTYPE html> is the first line of the HTML document.
• The <html> element has a lang attribute, for example, <html lang="en-US">.

Head

• The meta charset element <meta charset="utf-8"> is the first element in the <head>.
• The meta viewport element <meta name="viewport" content="width=device-width, initial-scale=1"> is used.

  The viewport is the area of the browser window in which the page is displayed. Without this element, mobile browsers render the page at a desktop width and shrink it to fit the screen, which defeats responsive design.

  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 page first loads.

• A unique and descriptive title element is provided.
• The meta description and meta author elements are provided with relevant content.
• External CSS file references are used and are listed in the proper order.

HTML

• The HTML is valid, with no errors reported by the W3C Markup Validation Service.
• Semantic elements are used. Why is this important?
• Exactly one <h1> heading is used on each page.

  The <h1> heading should accurately and succinctly represent the main topic or purpose of the page and closely match the content of the document's <title>.

• Headings <h1>–<h6> are used in the proper order to outline the page, without skipping levels.

  Choose a heading level for its place in the content hierarchy, not for its default size. Use CSS to change how a heading looks. – Heading Levels, Deque University

• No broken links are found on the page. W3C Link Checker

CSS

• The CSS is valid, with no errors reported by the W3C CSS Validation Service.

  The CSS validator can lag behind the browsers and may report newer, well-supported features, such as CSS nesting, as errors. Confirm support on MDN before removing a feature that works.

• An id value is used only once per page. Class selectors are preferred for styling.
• No third-party CSS frameworks or libraries are used unless the course or assignment explicitly allows them.

JavaScript

• No errors are reported in the DevTools console.
• No unused functions or variables remain in the code.
• No output is written to the console in the published version of the page.

Images

• Images are optimized: sized to fit the design needs of the site, compressed, and saved in a modern format such as WebP or AVIF.
• Image aspect ratios are preserved. Images are not stretched or squished.
• Every image has an alt attribute. The text describes the image's content or purpose, and purely decorative images use an empty value (alt="").

Accessibility

• No color contrast violations exist at the WCAG AA level (4.5:1 for normal text and 3:1 for large text). Use the browser DevTools CSS Overview panel or a tool like the WebAIM Contrast Checker to check color contrast.
• Accessibility test errors and warnings, such as those reported by a DevTools Lighthouse audit, are reviewed and addressed.

Design and Performance

• The design principles of alignment, proximity, contrast, repetition, and usable typography are applied consistently across all pages.
• Every page is responsive, with appropriately sized text and links and no horizontal scrolling or dead space at any viewport width.
• The page functions correctly and delivers its content as expected.
• No spelling or grammatical errors are found on the site.
• The page weight is under 500 kB as measured by the transferred size shown in the DevTools Network panel.