make a deploy #4502
make a deploy #4502
Conversation
There was a problem hiding this comment.
Hey there! 👋 It looks like we need to make a few adjustments before we can approve this Pull Request. The main issues to address are the correct formatting of attributes in your HTML tags and ensuring consistent indentation throughout your code. These changes will help maintain a clean and readable codebase, which is super important as your projects grow! Remember, clean code is happy code! 😊🛠
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| data-qa="keypress" | ||
| placeholder="Try “Los Angeles“" | ||
| /> | ||
| <div class="search__container"> |
There was a problem hiding this comment.
The indentation is not consistent. Child elements should be indented by 2 spaces relative to their parent element.
| method="get" | ||
| class="search-bar search-bar--big" | ||
| data-qa="big" | ||
| > |
There was a problem hiding this comment.
The attributes of the form element are not correctly formatted. Each attribute should start on a new line with a 2-space indentation.
| type="text" | ||
| data-qa="keypress" | ||
| placeholder="Try “Los Angeles“" | ||
| class="search__input big" |
There was a problem hiding this comment.
The attributes of the input element are not correctly formatted. Each attribute should start on a new line with a 2-space indentation.
| method="get" | ||
| class="search-bar" | ||
| data-qa="small" | ||
| > |
There was a problem hiding this comment.
The attributes of the form element are not correctly formatted. Each attribute should start on a new line with a 2-space indentation.
| type="text" | ||
| data-qa="hover" | ||
| placeholder="Try “Los Angeles“" | ||
| class="search__input small" |
There was a problem hiding this comment.
The attributes of the input element are not correctly formatted. Each attribute should start on a new line with a 2-space indentation.
| * { | ||
| box-sizing: border-box; | ||
| } |
There was a problem hiding this comment.
Don't use * selector as it impacts performance. Set styles only for elements that require them.
|
|
||
| body { | ||
| margin-top: 0; | ||
| font-family: Avenir, Arial, sans-serif; |
There was a problem hiding this comment.
Remember to use fallback fonts - alternative font-family in case the main one doesn't work. For example, font-family: Avenir, Arial, sans-serif; should include a generic family as a fallback, which you have done correctly here.
| } | ||
|
|
||
| body { | ||
| margin-top: 0; |
There was a problem hiding this comment.
Be consistent with your margins. Add only top or bottom, but not both, to avoid potential margin collapse. In this case, since you only have a top margin, it is fine.
There was a problem hiding this comment.
Great job on your Pull Request! 🌟 While I've noticed a few minor issues related to code formatting and best practices, none of these are critical and they don't impact the functionality or security of your code. Keep these tips in mind for future improvements, but for now, your PR gets the green light! 👍 Keep up the good work!
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| <link | ||
| rel="stylesheet" | ||
| href="style.css" |
There was a problem hiding this comment.
Keep your attributes correctly formatted. The attributes of the link tag should start on new lines with proper indentation to improve readability.
| <form | ||
| action="/" | ||
| method="get" | ||
| class="search-bar" | ||
| data-qa="big" |
There was a problem hiding this comment.
Keep your attributes correctly formatted. The attributes of the form tag should start on new lines with proper indentation to improve readability.
| <input | ||
| type="text" | ||
| data-qa="keypress" | ||
| placeholder="Try “Los Angeles“" | ||
| class="search__input big" |
There was a problem hiding this comment.
Keep your attributes correctly formatted. The attributes of the input tag should start on new lines with proper indentation to improve readability.
| <form | ||
| action="/" | ||
| method="get" | ||
| class="search-bar" | ||
| data-qa="small" |
There was a problem hiding this comment.
Keep your attributes correctly formatted. The attributes of the form tag should start on new lines with proper indentation to improve readability.
| <input | ||
| type="text" | ||
| data-qa="hover" | ||
| placeholder="Try “Los Angeles“" | ||
| class="search__input small" |
There was a problem hiding this comment.
Keep your attributes correctly formatted. The attributes of the input tag should start on new lines with proper indentation to improve readability.
| data-qa="hover" | ||
| placeholder="Try “Los Angeles“" | ||
| /> | ||
| <div class="search__container"> |
There was a problem hiding this comment.
Add empty lines between multiline sibling blocks of HTML. There should be an empty line before this div to separate it from the previous form for better readability.
|
|
||
| </form> | ||
|
|
||
| <form |
There was a problem hiding this comment.
Add empty lines between multiline sibling blocks of HTML. There should be an empty line before this form to separate it from the previous div for better readability.
| * { | ||
| box-sizing: border-box; | ||
| } |
There was a problem hiding this comment.
Avoid using the universal selector '*' for setting box-sizing as it impacts performance. Apply box-sizing to specific elements as needed.
|
|
||
| body { | ||
| margin-top: 0; | ||
| font-family: Avenir, Arial, sans-serif; |
There was a problem hiding this comment.
Include a fallback font-family in case the main one doesn't work, for example: 'font-family: Avenir, Arial, sans-serif;'. This is a good practice for ensuring text remains readable if the custom font fails to load.
| body { | ||
| margin-top: 0; | ||
| font-family: Avenir, Arial, sans-serif; |
There was a problem hiding this comment.
Be consistent with your margins. You've added only a top margin here, which is good, but ensure that this approach is consistent across your CSS to avoid potential margin collapse issues.
DEMO LINK
TEST REPORT LINK
Icon implemented using background-image CSS property
Inputs are written inside of 'form' tag with correctly passed attributes
All
Typical MistakesfromBEMlesson theory are checked.Code follows all the Code Style Rules ❗️