update-readme-and-checklist

checklist.md

@@ -1,9 +1,107 @@
-- check your work using basic recommendations [here](https://github.com/mate-academy/layout_search-bar-airbnb/blob/master/checklist.md)
-- check alt attributes, they must be present ([find out more](https://osric.com/chris/accidental-developer/2012/01/when-should-alt-text-be-blank/) [and this](https://9clouds.com/blog/the-importance-of-alt-attributes-aka-alt-text/))
-- logo should be a link to the main page of the website
-- use alternative font-family in case the main one doesn't work [like this](https://www.w3schools.com/cssref/pr_font_font-family.asp)
-- check the demo page with different screen sizes (including those bigger than 1700px)
-- do not use overcomplicated media conditions (try to follow desktop-driven or mobile-driven development)
-- uppercase letters for navlist are made with styles, not hardcoded into html (you have usual text with first uppercase letter in html)
-- links should be with cursor pointer
-- are you sure you've polished your code? :)
+1. [STYLES] - Get used to style all elements using classes. And don't increase
+selectors specificity unless completely necessary
+
+```html
+<!--index.html:-->
+<nav
+  class="nav"
+>
+  <ul class="nav__list">
+    ...
+  </ul>
+</nav>
+```
+GOOD example:
+```css
+/* style.css */
+.nav__list {
+  list-style: none;
+}
+```
+
+BAD example:
+```css
+/* style.css */
+ul {
+  list-style: none;
+}
+```
+
+BAD example:
+```css
+/* 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:
+```html
+<nav class="nav">
+  <ul class="nav__list">
+    <li class="nav__item">
+      <a href="#apple" class="nav__link">Apple</a>
+    </li>
+    ...
+  </ul>
+</nav>
+```
+BAD example:
+```html
+<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](https://www.w3schools.com/cssref/pr_font_font-family.asp)
+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:
+```html
+<!--index.html:-->
+<div>
+  <p>
+    some text
+  </p>
+</div>
+```
+
+BAD example:
+```html
+<!--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](https://osric.com/chris/accidental-developer/2012/01/when-should-alt-text-be-blank/)
+and
+[even more](https://9clouds.com/blog/the-importance-of-alt-attributes-aka-alt-text/))
+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](https://www.figma.com/file/KAV1NnDp7hgQtPnaD6XdOcnG/Moyo-Header?node-id=0%3A1)
+again and see the distance between `О` in `ВИДЕО` to right screen side. Link has
+no margin on the right.

readme.md

@@ -3,7 +3,7 @@ Replace `<your_account>` with your Github username and copy the links to Pull Re
 - [DEMO LINK](https://<your_account>.github.io/layout_moyo-header/)
 - [TEST REPORT LINK](https://<your_account>.github.io/layout_moyo-header/report/html_report/)
 
-> Follow [this instructions](https://github.com/mate-academy/layout_task-guideline#how-to-solve-the-layout-tasks-on-github)
+> Follow [these instructions](https://github.com/mate-academy/layout_task-guideline#how-to-solve-the-layout-tasks-on-github)
 
 ## The task
 Create HTML page with the header using `flexbox` basing on [this mockup](https://www.figma.com/file/KAV1NnDp7hgQtPnaD6XdOcnG/Moyo-Header?node-id=0%3A1).
@@ -14,17 +14,29 @@ Create HTML page with the header using `flexbox` basing on [this mockup](https:/
 - pay attention the mock is adaptive. Develop the layout to fit on 1024px and 1200px the same as on the mock.
 - reset browser default margins
 - use images from [src/images](src/images)
-- Use semantic tags. `<header>`, `<nav>`
+- Use semantic tags: `<header>`, `<nav>`, `ul`
 - change links styles on `:hover`
 - follow styles from the mock
 - the link with `blue` color and line below is an active link. It should have `class="is-active"` and relevant styles.
-- the link with only `blue` color is an example of `:hover` styles. Every link in the row should have `blue` color on `:hover`. 
+- the link with only `blue` color is an example of `:hover` styles. Every link in the row should have `blue` color on `:hover`.
 - add `data-qa="hover"` attribute to the 4th link for testing (`Ноутбуки и компьютеры`)
+---
+--> [CHECKLIST](https://github.com/mate-academy/layout_search-bar-airbnb/blob/master/checklist.md)
 
-
-### Common mistakes
-- Check is you added `data-qa="hover"` and `class="is-active"` required for tests
+### Tips & Hints
+- Check one more time if you added `data-qa="hover"` and `class="is-active"`
+required for tests
 - Do not use `tabs`. Use `2 spaces` for indentation.
 - Don't use repeated styles.
+- Don't just copy all styles from Figma. Think, which of them are relevant.
+Uneven sizes (e.g. `line-height: 14.6px`) are definitely useless.
 - Don't use extra elements for blue line. Figure out how to work with `::after`
+and positioning
 - Check font styles. Use [google fonts](https://fonts.google.com/)
+- Links in `nav` should have clickable area above and below the text
+- Uppercase letters for `nav__list` are made with styles, not hardcoded into
+html (you should have usual text with first uppercase letter in html)
+- Don't set height for `header` explicitly. Let the content (links) dictate it.
+- Logo should also be a link to the main page of the website (#home). But it
+should not be part of `nav`.
+