-
[STYLES] - Get used to style all elements using classes. And don't increase selectors specificity unless completely necessary
-
[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. -
[STYLES] - Remember to use fallback fonts - alternative font-family in case the main one doesn't work like this
-
[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).
-
[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.
-
[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
#
. -
[CODE STYLE] - Make sure you have
alt
attribute for images, they must be present (find out more and even more) -
[LAYOUT] - Logo should be a link to the main page of the website, but not part of navigation menu
-
[CODE KNOWLEDGE] - Don't use
*
selector for zeroing out your margins or paddings. It's still inefficient for browser to read your web document -
[TESTS] - Don't forget to add correct style on
:hover
-
[TESTS] - Remember that links should have
cursor: pointer
and clickable zone on 100% of header height -
[TESTS] - Check the mockup again and see the distance between
О
inVIDEO
to right screen side. Link has no margin on the right. -
[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.