Skip to content

Latest commit

 

History

History
78 lines (57 loc) · 3.6 KB

checklist.md

File metadata and controls

78 lines (57 loc) · 3.6 KB
Raw

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

    HTML example css-classes-html-example-2
    BAD CSS examples css-classes-bad-example-4 css-classes-bad-example-5
    GOOD CSS example css-classes-good-example-2

  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.

    BAD example html-class-names-bad-example-1
    GOOD example html-class-names-good-example-1

  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. But do not break the line if it cannot be broken (ex., long links).

  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. Also blank line shouldn't be between parent and child elements.

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

  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. [CODE KNOWLEDGE] - Don't use * selector for zeroing out your margins or paddings. It's still inefficient for browser to read your web document

  10. [TESTS] - Don't forget to add correct style on :hover

  11. [TESTS] - Remember that links should have cursor: pointer and clickable zone on 100% of header height

  12. [TESTS] - Check the mockup again and see the distance between О in ВИДЕО to right screen side. Link has no margin on the right.