feat: added recommendations for html-css-popup task (kottans#317)

* feat: added recommendations for html-css-popup task

* fix: updated visually-hidden styles

* fix: updated recommendations

* fix: updated description for the empty line

* fix: updated styling elements recommendation

Author: MaxKalashnyk

tasks/html-css-popup.md

@@ -8,23 +8,40 @@
 > **Hooli** is a fictitious corporation from
 > [Silicon Valley TV series](https://www.imdb.com/title/tt2575988/).
 > Many believe it impersonates Google or Apple.
-> Hooli on [Silicon Valley famdom wiki](https://silicon-valley.fandom.com/wiki/Hooli). 
+> Hooli on [Silicon Valley famdom wiki](https://silicon-valley.fandom.com/wiki/Hooli).
 > It is also represented [on the web](http://www.hooli.xyz/).
-  
+
 The goal of this task is to practice coding HTML & CSS from mockup. You are expected to deepen your knowledge of HTML & CSS and discover new previously unknown features.
 
 ## Requirements
+
 - no JavaScript, only HTML/CSS, use of preprocessors is allowed
 - no external libraries or frameworks
 - browser support: Chrome only (feel free to use latest features)
 - the popup is expected to have three states depending on user actions:
   - initial state: popup menu is not visible
-  - upon click on ![popup-button](../img/popup-button.png) button 
-    the popup menu gets visible or gets hidden if already open 
-  - click on "More" button adds 3 to 10 more icons and 
+  - upon click on ![popup-button](../img/popup-button.png) button
+    the popup menu gets visible or gets hidden if already open
+  - click on "More" button adds 3 to 10 more icons and
     makes the content of the popup scrollable
 - mobile view is irrelevant for this task
 
+## Recommendations
+
+- Make sure that your navigation is built with all semantic [rules](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav).
+- We recommend watching a [video](https://www.youtube.com/watch?v=E6kLaaQFctU&ab_channel=VadimMakeev) about hiding checkbox good parts.
+- Try to style your elements by classes (not by ID and HTML tags).
+- Don't forget to set the `alt` attribute for the `img` tags (if you used them).
+- No need to add a lot of files (inc. icons, gitignore, configs, etc) to your PR. HTML and CSS files would be enough for checking your work.
+- Avoid external scripts for the font icons.
+- Check your preview in the [validator](https://validator.w3.org/).
+- Make sure you've added empty lines in each file from your PR - [reason](https://stackoverflow.com/questions/729692/why-should-text-files-end-with-a-newline).
+  If you forget to add an empty line at the end of the file GitHub will show it:
+
+![Missed line](https://user-images.githubusercontent.com/16196199/97906688-c123c900-1d4c-11eb-8424-75e9150b0705.png)
+
+- Check your work again and remove all redundant comments from your code.
+
 ## Warning
 
 :warning: ![Google-Warning](https://place-hold.it/380x24/fff/f03c15?text=Important!+Google+may+ban+your+github+pages+domain!&bold)
@@ -34,6 +51,7 @@ as they may decide that you've created a phishing site to steal
 your visitors' Google credentials.
 
 To avoid this
+
 - DO NOT use word "google", "apple", "amazon" or any other brand in
   - your project/repo name
   - any urls
@@ -76,6 +94,7 @@ You may want to publish your results on
 [GitHub Pages](https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/)
 
 **When complete do the following:**
+
 1. You will require code review for this task:
    - For **Frontend 2021** course students: please, follow [these instructions](https://github.com/kottans/frontend-2021-homeworks/blob/master/README.md)
    - For **p2p course** students: please, follow [these instructions](https://github.com/kottans/frontend-2019-p2p/blob/master/CONTRIBUTING.md)
@@ -89,11 +108,9 @@ You may want to publish your results on
 
 ⤴️ Back to [Contents](../contents.md)
 
-
 [icon-chat]: https://img.shields.io/badge/chat-on%20telegram-blue.svg
 [icon-mit]: https://img.shields.io/badge/license-MIT-blue.svg
 [icon-awesome]: https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg
-
 [license]: https://github.com/Kottans/web/blob/master/LICENSE.md
 [awesome]: https://github.com/sindresorhus/awesome#front-end-development
 [chat]: https://t.me/joinchat/CX8EF1JmLm9IM6J6oy2U7Q