add task solution #4483
add task solution #4483
Conversation
There was a problem hiding this comment.
Great job on your Pull Request! 🌟 The issues mentioned are minor and don't significantly impact the functionality or security of your code. For future projects, consider the feedback on HTML formatting and CSS best practices to enhance the readability and maintainability of your code. Keep up the good work! 💻🚀
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| <form | ||
| class="search-form search-form__big" | ||
| data-qa="big" |
There was a problem hiding this comment.
HTML Formatting: The attributes of the <form> element should each start on a new line with 2-space indentation, and the closing bracket should be aligned with the opening tag. This will improve readability and maintain consistency with proper HTML formatting.
| class="search-form search-form__big" | ||
| data-qa="big" | ||
| > | ||
| <label class="search-form__label search-form__label_big"> |
There was a problem hiding this comment.
HTML Formatting: The <label> element should be indented with 2 spaces inside its parent <form> element to maintain proper nesting and readability.
| <input | ||
| type="text" | ||
| data-qa="keypress" | ||
| class="search-form__input search-form__input_big" | ||
| placeholder="Try “Los Angeles“" |
There was a problem hiding this comment.
HTML Formatting: The attributes of the <input> element should each start on a new line with 2-space indentation, and the closing bracket should be aligned with the opening tag. This will improve readability and maintain consistency with proper HTML formatting.
| <form | ||
| class="search-form search-form__small" | ||
| data-qa="small" |
There was a problem hiding this comment.
HTML Formatting: The attributes of the <form> element should each start on a new line with 2-space indentation, and the closing bracket should be aligned with the opening tag. This will improve readability and maintain consistency with proper HTML formatting.
| class="search-form search-form__small" | ||
| data-qa="small" | ||
| > | ||
| <label class="search-form__label search-form__label_small"> |
There was a problem hiding this comment.
HTML Formatting: The <label> element should be indented with 2 spaces inside its parent <form> element to maintain proper nesting and readability.
| <body> | ||
| <input | ||
| type="text" | ||
| data-qa="keypress" | ||
| placeholder="Try “Los Angeles“" | ||
| /> | ||
| <form | ||
| class="search-form search-form__big" | ||
| data-qa="big" | ||
| > | ||
| <label class="search-form__label search-form__label_big"> | ||
| <input | ||
| type="text" | ||
| data-qa="keypress" | ||
| class="search-form__input search-form__input_big" | ||
| placeholder="Try “Los Angeles“" | ||
| /> | ||
| </label> | ||
| </form> | ||
|
|
||
| <input | ||
| type="text" | ||
| data-qa="hover" | ||
| placeholder="Try “Los Angeles“" | ||
| /> | ||
| <form | ||
| class="search-form search-form__small" | ||
| data-qa="small" | ||
| > | ||
| <label class="search-form__label search-form__label_small"> | ||
| <input | ||
| type="text" | ||
| data-qa="hover" | ||
| class="search-form__input search-form__input_small" | ||
| placeholder="Try “Los Angeles“" | ||
| /> | ||
| </label> | ||
| </form> | ||
| </body> |
There was a problem hiding this comment.
HTML Formatting: Add empty lines between multiline sibling blocks of HTML to add some 'air' and simplify reading, but don't add them between parent and child elements.
| * { | ||
| box-sizing: border-box; | ||
| } |
There was a problem hiding this comment.
Avoid using the * selector as it impacts performance. Set styles only for elements that require them.
| margin: 8px; | ||
| padding: 0; | ||
| font-size: 16px; | ||
| font-family: Avenir, sans-serif; |
There was a problem hiding this comment.
Remember to specify fallback fonts. For instance, font-family: Avenir, Arial, sans-serif; ensures that if the primary font isn't available, the browser can use a similar fallback.
| font-family: Avenir, sans-serif; | ||
| font-weight: 300; |
There was a problem hiding this comment.
Be consistent with your margins to avoid potential margin collapse. It's better to add only top or bottom margins but not both, and in this case, you have set the margin on the body which could lead to unexpected results when combined with other margins.
| .search-form { | ||
| display: flex; | ||
| justify-content: center; | ||
| margin: 20px auto 0; |
There was a problem hiding this comment.
Don't fix container sizes unless required. Here, the .search-form has a fixed margin, which might not be necessary. Let the content size dictate the container size to avoid overflow or accidental scroll bars.
DEMO LINK
TEST REPORT LINK
[ x ] Icon implemented using background-image CSS property
[ x ] Inputs are written inside of 'form' tag with correctly passed attributes
[ x ] All
Typical MistakesfromBEMlesson theory are checked.[ x ] Code follows all the Code Style Rules ❗️