at least 4 imagestitle textregular texta logo
header,footer,article,sectionused to add meaningful code.Nodivorsectiontags are without class or id.
Customize images and textCustomize placement of the elements on the page (grid layout)Customize CSS styles applied at a minimum to paragraph/heading elements.
Page utilizes a grid-based layoutPage usesflexboxlayout (or framework)
Renders on desktop, mobile (Google Nexus 5) and tablet (Apple iPad)An image's title/text renders next to the image in all viewport sizes
All content is rendered on all devices - no hidden content on mobilemetatag is included in HTML
no inline styles in HTML document, orstyletag
-
All code (HTML element names, attributes, values) are lowercase (excepttext/DATA) -
Code does not have trailing white spaces
-
Indentation is consistent -
Code uses a new line for every block, list or table element and indent every such child. -
BONUS: Use double-quotation for attribute values
HTML documents use HTML5<!doctype html>Code passes HTML and CSS validators(Exceptflexboxpropsjustify-self)BONUS: Code does not use entity references unless necessary e.g. characters with special meaning in HTML (like < and &) as well as control or “invisible” characters (like no-break spaces).- BONUS: Code omits type attributes for style sheets and scripts
Code does not have trailing white spaces.Indentation is consistent (either all tabs or all 2 spaces or all 4 spaces etc).Code indents all block content, that is rules within rules as well as declarations to reflect hierarchy and improve understanding.Code uses a semicolon after every declaration for consistency and extensibility reasons.Code always uses a space after a property name's colon, but no space between property and colon, for consistency reasons.Code always use a single space between the last selector and the opening brace that begins the declaration block.Code always start a new line for each selector and declaration.- Code always put a blank line (two line breaks) between rules.
- BONUS: Code uses double quotation marks for attribute selectors or property values. Do not use quotation marks in URI values (
url()).
Code uses meaningful or generic ID and class names that are as short as possible but as long as necessary.Code does not use element names in conjunction with IDs or classes.Code uses shorthand properties where possible.- BONUS:
Code omits unit specification after 0 values. - BONUS: Code includes leading 0s in decimal values for readability.
- BONUS: Code uses 3-character hexadecimal notation where possible.
- BONUS: Code separate words in ID and class names by a hyphen.
- BONUS: Code avoids user agent detection as well as CSS "hacks"—try a different approach first.
HTML templates and documents use UTF-8 encoding. (no BOM) i.e.<meta charset="utf-8">- BONUS: Mark todos and action items with
TODO
- Dominant: #5fffd0
- Accent1: #6d7f7a
- Accent2: #abffe7