Front-End Development Standards

use HTML5 Doctype as it is supported in all modern browsers and throws IE6 and IE7 into standards mode.

ensure that the charset declared (UTF-8) and viewport are declared correctly.

ensure that the title is being used on all the pages.

always put the meta tag as early in the tag as early as possible. However, server-settings are ideal.

assure that each favicon has been created and is being displayed correctly.

ensure that Apple meta-tags are present while the front-end development process.

use rel="canonical" to avoid duplicity in the content.

make sure that the language tag of the website is specified and related to the language of the current page.

assure conditional comments are present for IE if needed.

make sure all CSS files are loaded before any JavaScript files in the HEAD.

make sure HTML5 semantic elements are used appropriately such as header, section, footer, main, etc.

check that link should have a rel="noopener" attribute to prevent tab nabbing in case external links are getting used with target="_blank".

ensure that all the unnecessary codes are removed before sending the page to the production.

use headings h1 to h5 to form a document outline and give a table of contents for easy navigation.

assure all pages need are tested with the W3C validator to identify possible issues in the HTML code.

include script files at the end of HTML document just before the tag.

make sure that there are no broken links on the page. Besides, we also verify that the website doesn't have any 404 errors.

make sure all tags must be properly closed under self-closing elements.

use WOFF, WOFF2, and TTF supported by all modern browsers.

make sure that Web Font sizes don't exceed 2 MB in all variants included.

control the loading behavior with a Webfont loader.

ensure that the website is using responsive web design.

check that the print stylesheet is provided and is correctly used on each page.

check whether IDs are used or not and also ensure they are unique to a page.

make sure that a CSS reset (reset, normalize or reboot) is used and is up to date.

assure that CSS vendor prefixes are used and are generated accordingly with the browser support compatibility.

assure that all the pages are tested on all current desktop browsers (Safari, Firefox, Chrome, Internet Explorer, Edge, etc).

make sure that all the pages are tested on all current mobile browsers (Native browser, Chrome, Safari).

ensure that all the pages are tested on all current OS (Windows, Android, iOS, Mac).

assure that all the pages are tested for LTR and RTL languages if they need to be supported.

structure a stylesheet by using tabs to indent each property, add two blank lines between sections and one blank line between blocks in a section.

make sure that each selector should be on its own line, ending in either a comma or an opening curly brace.

create selectors that find the right balance between contributing to overall style and layout by using lowercase and separating words with hyphens when naming selectors.

always follow properties by a colon and space, make sure that all the properties and values are in lowercase except for font names and vendor-specific properties.

use shorthand (except when overriding styles) for background, border, font, list-style, margin, and padding values as much as possible.

use a baseline for ordering such as display, positioning, box model, colors and typography and others.

follow the guidelines to retain a high degree of consistency such as spacing before the value and after the colon, use double quotes rather than single quotes.

make sure that the line height is also unit-less unless necessary to be defined as a specific pixel value.

write smart code from the outset to retain the overview while remaining flexible throughout the change.

make sure not to have any JavaScript code inline (mixed with HTML code).

ensure that all the JavaScript files are concatenated.

assure that the JavaScript files are minified (can add the .min suffix).

use the tag in the HTML body if a script type on the page is unsupported or if scripting is currently turned off in the browser. This will be helpful in client-side rendering heavy apps such as React.js.

make sure that all JavaScript files are loaded asynchronously using async or deferred using defer attribute.

ensure that no errors are flagged by ESLint (based on configuration or standards rules).

use single quotation marks for string declarations.

make use of case statements indent within switch blocks.

function contents consistently indent, including full-file closure wrappers.

encourage jQuery’s 100-character hard-line limit, do indentation with tabs.

ensure that a new line is included at the end of each file.

assure spaces may align code within documentation blocks or within a line, but only tabs should be used at the start of a line.

JavaScript code should be placed in external files whenever possible.

use a responsive image pattern that starts by serving a mobile optimized (and thus smaller file size) image first.

make sure that all images are optimized to be rendered in the browser. WebP format could be used.

for critical pages (like Homepage).

use picture/srcset to provide the most appropriate image for the current viewport of the user.

ensure that the tag requires alt text to both validate and meet the accessibility guidelines.

provide layout images 2x or 3x, support retina display.

use small images that are in a sprite file (in the case of icons, they can be in an SVG image).

set width and height attributes on if the final rendered image size is known (can be omitted for CSS sizing).

prepare images in HTML for lazy loading by renaming the src attribute to data-src and adding the class lazy.

assure that all have an alternative text which describes the image visually.

always provide NoScript fallback so as to improve the time to first render we are using lazy loading for images.

ensure that major functionality like main navigation and search are work without JavaScript enabled.

assure that color contrast at least pass WCAG AA (AAA for mobile).

make sure that all pages have an H1 which is not the title of the website.

ensure that headings are being used properly and in the right order (H1 to H6).

assure that specific HTML5 input types are used. This is especially important for mobile devices that show customized keypads and widgets for different types.

make sure that a label is associated with each input form element. In case a label can't be displayed, we use aria-label instead.

use the WAVE tool to test if the page respects the accessibility standards.

test the website using the keyboard in a pre-visible order. All interactive elements are reachable and usable.

assure that all pages are tested in two or more screen readers (such as JAWS, VoiceOver, and NVDA).

replace focus style by the visible state in CSS if the focus is disabled.

ensure that the weight of each page is between 0 and 500 KB.

make images, scripts and CSS to be lazy-loaded to improve the response time of the current page.

use the tag to include all the style sheets in the of the document for optimal page performance.

use the tag to include the JavaScript files at the bottom of HTML document just before the closing tag for optimal page performance.

minimize HTTP requests by combining all scripts and stylesheets & use image sprites to reduce the number of round trips to the server.

minimize the number of iframes as they block the page's load event.

assure that the resources that will be needed soon (e.g. lazy-loaded images) are requested in advance during the idle time using prefetch.

avail the resources needed in the current page (ex - scripts placed at the end of ) in advance using pre-load.

check that all the pages are tested and have a score of at least 90/100.

make sure that Google Analytics is installed and correctly configured while front-end development.

use heading logic which is a heading text that helps to understand the content on the current page.

ensure that a sitemap.xml exists and was submitted to Google Search Console.

assure that the robots.txt is not blocking webpages.

make sure that pages using structured data are tested and are without errors as the structured data helps crawlers understand the content on the current page.

assure that an HTML sitemap is provided and is accessible via a link in the footer of the website.

test in all browsers (Chrome, Firefox, Safari) to ensure it looks fine and functions as it should.

enable source maps to assist with debugging and testing.

add alt attributes, accessible forms & tables.