checklist.md

1. [STYLES] - Get used to style all elements using classes. And don't increase selectors specificity unless completely necessary

<!--index.html:-->
<nav
  class="nav"
>
  <ul class="nav__list">
    ...
  </ul>
</nav>

GOOD example:

/* style.css */
.nav__list {
  list-style: none;
}

BAD example:

/* style.css */
ul {
  list-style: none;
}

BAD example:

/* style.css */
nav ul {
  list-style: none;
}

2. [CODE STYLE] - Don't use simple tag names or specific styles in class names. Exception - specific semantic tags, like header, nav, footer etc. Try to describe the content of the tag.

GOOD example:

<nav class="nav">
  <ul class="nav__list">
    <li class="nav__item">
      <a href="#apple" class="nav__link">Apple</a>
    </li>
    ...
  </ul>
</nav>

BAD example:

<nav class="no-padding">
  <ul class="ul">
    ...
    <li class="li">
      <a href="#apple" class="a-last-no-decoration">Apple</a>
    </li>
  </ul>
</nav>

3. [STYLES] - Remember to use fallback fonts - alternative font-family in case the main one doesn't work like this
4. [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.
5. [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:

<!--index.html:-->
<div>
  <p>
    some text
  </p>
</div>

BAD example:

<!--index.html:-->
<div>
<p>
some text
</p>
</div>

6. [CODE STYLE] - Don't use spaces in links. Have you seen any link with literal space in it on the Internet? Remember, anchor links start with #.
7. [CODE STYLE] - Make sure you have alt attribute for images, they must be present (find out more and even more)
8. [LAYOUT] - Logo should be a link to the main page of the website, but not part of navigation menu
9. [TESTS] - Don't forget to add correct style on :hover
10. [TESTS] - Remember that links should have cursor: pointer and clickable zone on 100% of header height
11. [TESTS] - Check the mockup again and see the distance between О in ВИДЕО to right screen side. Link has no margin on the right.