Skip to content

Latest commit

 

History

History
83 lines (68 loc) · 3.95 KB

checklist.md

File metadata and controls

83 lines (68 loc) · 3.95 KB
  1. [CODE STYLE] - Keep your code line length below 80. It’s not only historical tradition, but also allows your code to fit into one standard screen without horizontal scroll. But do not break the line if it cannot be broken (ex., long links).

  2. [CODE STYLE] - Remember about correct indentation between parent and child elements. Each level of nesting, including text, contained inside the element, requires 2-space offset.

    BAD examples html-indentations-bad-example-1
    GOOD example html-indentations-good-example-1

  3. [CODE STYLE] - If the HTML-element has long attribute values or number of attributes is more than 2 - start each one, including the first, on the new line with 2-space indentation related to tag. Tag’s closing bracket should be on the same level as opening one.

    BAD examples html-attributes-bad-example-1 html-attributes-bad-example-2 html-attributes-bad-example-3 html-attributes-bad-example-4
    GOOD example html-attributes-good-example-1

  4. [CODE STYLE] - Use camelCase for values of name attribute - they should be valid as JavaScript object keys. It should not contain spaces, “-” or other special characters.

    BAD example html-name-attribute-bad-example-1
    GOOD example html-name-attribute-good-example-1

  5. [CODE STYLE] - No need to provide empty value="" attribute for inputs. Add it only if a certain value is specified from the start, or use placeholders.

  6. [CODE STYLE] - Don't style tags, use class selector instead

  7. [FUNCTIONAL] - You need to use a label tag for each input, so that every input could be activated by clicking on the corresponding label.

  8. [FUNCTIONAL] - Check the textarea behaviour - when you click on the textarea, the cursor should appear in the beginning of the input.

    BAD example image
    GOOD example image
    ATTENTION!!! the closing tag should start on the level as opening tag (this is required to pass the html linter)

Example:

 <textarea
   class="textarea"
></textarea>
  1. [TESTS] - Remember, you need to add a certain distance BETWEEN inputs and BETWEEN blocks with inputs. It means that, for example, the last input in the group of inputs should not have a set bottom margin.

  2. [TESTS] - Remember, any other styles besides margins, should be browser default.