update readme and checklist

checklist.md

@@ -1,5 +1,101 @@
-- check your work using basic recommendations [here](https://github.com/mate-academy/layout_colored-blocks/blob/master/checklist.md)
-- make sure you have `method` and `action` attributes for form
-- if you have 3 or more attributes, move each of the on the new line (including the first one)
-- No need to provide empty `value=''` attribute for inputs
-- You need to use label tag for each input. So that every input could be activated by clicking on the corresponding label.
+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.
+
+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.
+
+GOOD example:
+```
+<div>
+  <p>
+    some text
+  </p>
+</div>
+```
+BAD example:
+```
+<div>
+<div>
+some text
+</div>
+</div>
+```
+
+3. [CODE STYLE] - If the HTML-element has long attribute values or number of
+attributes is more than 3 - 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.
+
+GOOD example:
+```
+<input
+  type="text"
+  name="surname"
+  id="surname"
+  required
+>
+```
+BAD example:
+```
+<input type="text" name="surname"
+id="surname" required>
+```
+BAD example:
+```
+<input type="text"
+  name="surname"
+  id="surname"
+  required>
+```
+BAD example:
+```
+<input
+type="text"
+name="surname"
+id="surname"
+required>
+```
+Still BAD example:
+```
+<input
+  type="text"
+  name="surname"
+  id="surname"
+  required>
+```
+
+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.
+
+GOOD example:
+```
+<input
+  type="date"
+  name="dateOfBirth"
+  id="dateOfBirth"
+  required
+>
+```
+BAD example:
+```
+<input
+  type="date"
+  name="date of birth"
+  id="dateOfBirth"
+  required
+>
+```
+
+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. [FUNCTIONAL] - You need to use a label tag for each input, so that every
+input could be activated by clicking on the corresponding label.
+7. [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.
+8. [TESTS] - Remember, any other styles besides margins, should be browser
+default.
+

readme.md

@@ -45,5 +45,8 @@ Create HTML page with form. On form submit send form data to `https://mate-acade
 - Vertical distance between blocks with inputs should be `20px`
 - Any other styles should be browser default
 
-## Tips
-- You can group different input sections with [fieldset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset) tag
+## Tips & Hints
+1. You can group different input sections with [fieldset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset) tag
+2. Make sure you have `method` and `action` attributes for form specified correctly
+3. Add `onsubmit="onSubmit()"` to form tag, not to button. It doesn’t work correctly on buttons.
+4. Follow the [code style guide](https://mate-academy.github.io/style-guides/htmlcss.html)