Develop #4532
Develop #4532
Conversation
There was a problem hiding this comment.
Great job on your HTML file! However, there are a few areas that need improvement. Please fix the inconsistent margins, font changes on focus, and direct styling of the 'input' tag. Also, consider using more descriptive class names and title tags. Keep up the good work! 😊
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
src/index.html
Outdated
| <form | ||
| class="search-bar big-search-bar" | ||
| data-qa="big" | ||
| > | ||
| <input | ||
| class="search-bar-input search-bar-input--big" | ||
| type="text" | ||
| data-qa="keypress" | ||
| placeholder="Try “Los Angeles“" | ||
| /> | ||
| </form> |
There was a problem hiding this comment.
Remember about correct indentation between parent and child elements. Each level of nesting, including text, contained inside the element, requires 2-space offset. The input elements inside the form elements are not indented correctly.
src/index.html
Outdated
| <form | ||
| class="search-bar small-search-bar" | ||
| data-qa="small" | ||
| > | ||
| <input | ||
| class="search-bar-input search-bar-input--small" | ||
| type="text" | ||
| data-qa="hover" | ||
| placeholder="Try “Los Angeles“" | ||
| /> | ||
| </form> |
There was a problem hiding this comment.
Remember about correct indentation between parent and child elements. Each level of nesting, including text, contained inside the element, requires 2-space offset. The input elements inside the form elements are not indented correctly.
src/index.html
Outdated
| class="search-bar big-search-bar" | ||
| data-qa="big" |
There was a problem hiding this comment.
Class names should represent the meaning of the content, not the styles. The class name 'big-search-bar' may not be the best choice. Consider using a name that describes the function or content of the element, such as 'primary-search-bar' or 'main-search-bar'.
src/index.html
Outdated
| class="search-bar small-search-bar" | ||
| data-qa="small" |
There was a problem hiding this comment.
Class names should represent the meaning of the content, not the styles. The class name 'small-search-bar' may not be the best choice. Consider using a name that describes the function or content of the element, such as 'secondary-search-bar' or 'auxiliary-search-bar'.
src/style.css
Outdated
| @@ -1 +1,73 @@ | |||
| /* add styles here */ | |||
| body { | |||
| font-family: Avenir, sans-serif; | |||
There was a problem hiding this comment.
It's better to specify a fallback font in case the main one doesn't load. You can add a generic font family such as 'sans-serif' to the end of your font stack. Also, be sure to include 'Avenir-Book' and 'Avenir-Heavy' in your font stack if you're using them elsewhere in your CSS.
src/style.css
Outdated
| @font-face { | ||
| font-family: Avenir-Heavy; | ||
| font-style: bold; | ||
| font-weight: bold; |
There was a problem hiding this comment.
The 'font-weight' property doesn't need to be specified here. The browser will automatically assign a 'font-weight' of 'bold' to this font because you're loading a bold version of the font.
| } | ||
|
|
||
| .search-bar { | ||
| margin-top: 20px; |
There was a problem hiding this comment.
According to the checklist, it's better to be consistent with your margins. You should only add top or bottom margins, but not both. Here, you're adding a top margin, which may lead to unexpected layout shifts if other elements also have bottom margins.
| } | ||
|
|
||
| .small-search-bar { | ||
| margin-top: 20px; |
There was a problem hiding this comment.
The same comment about margins applies here. It's better to be consistent and only add top or bottom margins, but not both.
| background-image: url(./images/Search.svg); | ||
| background-repeat: no-repeat; | ||
| border: 1px solid #e1e7ed; | ||
| border-radius: 4px; |
There was a problem hiding this comment.
It's better to use classes for styling instead of tag names, unless the tag is 'html' or 'body'. Here, you're styling the 'input' tag directly, which could cause conflicts if you have other 'input' elements on your page that need different styles.
|
|
||
| .search-bar-input:focus { | ||
| box-shadow: rgba(0, 0, 0, 0.25); | ||
| font-family: Avenir-Heavy, sans-serif; |
There was a problem hiding this comment.
You're changing the 'font-family' on focus, which could cause a noticeable and potentially disorienting change for the user. It's better to keep the 'font-family' consistent across different states.
There was a problem hiding this comment.
Great job so far! 😊 However, there are a few areas for improvement. Please consider using more descriptive class names and a more meaningful title for your webpage. Also, remember to use fallback fonts and be consistent with your margins. 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-bar primary-search-bar" | ||
| data-qa="big" |
There was a problem hiding this comment.
You've used the class names search-bar and primary-search-bar here. Class names should be semantic and describe the meaning of the content, not the styles or tag names. Consider renaming primary-search-bar to something more descriptive of its function or content, for example main-search-bar.
| /> | ||
| <form | ||
| class="search-bar secondary-search-bar" | ||
| data-qa="small" |
There was a problem hiding this comment.
Same comment as above for secondary-search-bar. A more descriptive name like additional-search-bar would be better.
| class="search-bar-input search-bar-input--primary" | ||
| type="text" | ||
| data-qa="keypress" | ||
| placeholder="Try “Los Angeles“" |
There was a problem hiding this comment.
Good job using the placeholder attribute for user guidance. However, consider making the placeholder text more generic and not location-specific. Something like 'Search...' could work better.
| class="search-bar-input search-bar-input--secondary" | ||
| type="text" | ||
| data-qa="hover" | ||
| placeholder="Try “Los Angeles“" |
There was a problem hiding this comment.
Same comment as above for the placeholder text.
src/style.css
Outdated
| @@ -1 +1,71 @@ | |||
| /* add styles here */ | |||
| body { | |||
| font-family: Avenir, sans-serif; | |||
There was a problem hiding this comment.
This line doesn't provide fallback fonts. Remember to use fallback fonts - alternative font-family in case the main one doesn't work. In case 'Avenir' font fails to load, the browser will use the generic 'sans-serif' font. However, it would be better to specify one or two more specific fallback fonts before resorting to the generic 'sans-serif'. For example, 'Helvetica' and 'Arial' are commonly used fallbacks for 'Avenir'. (CHECKLIST: Remember to use fallback fonts - alternative font-family in case the main one doesn't work)
| } | ||
|
|
||
| .search-bar { | ||
| margin-top: 20px; |
There was a problem hiding this comment.
Be consistent with your margins. You have used top margin here. Stick to either top or bottom margins for consistency and to avoid potential margin collapses. (CHECKLIST: Be consistent with your margins (Add only top or bottom, but not both))
| } | ||
|
|
||
| .secondary-search-bar { | ||
| margin-top: 20px; |
There was a problem hiding this comment.
Again, you have used top margin here. As mentioned before, it's better to stick to either top or bottom margins for consistency and to avoid potential margin collapses. (CHECKLIST: Be consistent with your margins (Add only top or bottom, but not both))
There was a problem hiding this comment.
Great job on the HTML and CSS files! Your code is clean and well-structured. However, there are a few places where improvements can be made. Please consider using more descriptive title tags and semantic HTML tags. Also, remember to use fallback fonts in your CSS. These are not critical issues, but addressing them will improve your code quality. 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-bar main-search-bar" | ||
| data-qa="big" | ||
| > | ||
| <input | ||
| class="search-bar-input search-bar-input--main" | ||
| type="text" | ||
| data-qa="keypress" | ||
| placeholder="Try “Los Angeles“" | ||
| /> | ||
| </form> |
There was a problem hiding this comment.
The form tag is typically used to collect user input. If your form tag doesn't contain any submit button, it might be better to use a div or section tag instead. This is not a code quality issue, but a semantic one. Semantic HTML is important for accessibility and SEO.
| <form | ||
| class="search-bar additional-search-bar" | ||
| data-qa="small" | ||
| > | ||
| <input | ||
| class="search-bar-input search-bar-input--additional" | ||
| type="text" | ||
| data-qa="hover" | ||
| placeholder="Try “Los Angeles“" | ||
| /> | ||
| </form> |
There was a problem hiding this comment.
Same comment as for the previous form tag. If you don't need to collect user input, consider using a div or section tag.
| @@ -1 +1,71 @@ | |||
| /* add styles here */ | |||
| body { | |||
| font-family: Avenir, Arial, Helvetica, sans-serif; | |||
There was a problem hiding this comment.
Remember to use fallback fonts, i.e., you should provide alternative font-families in case the main one doesn't load. In your case, 'Avenir' might not load on all systems. The fallback fonts should be similar in style to your main font and should be ones that are widely available. For example, you could use 'Arial, sans-serif' as fallbacks. (Checklist: Remember to use fallback fonts - alternative font-family in case the main one doesn't work)
| } | ||
|
|
||
| .search-bar { | ||
| margin-top: 20px; |
There was a problem hiding this comment.
You have set the top margin for the '.search-bar' class. However, it would be more consistent if you add margins to the bottom of elements, not to the top. This helps to avoid potential margin collapse. (Checklist: Be consistent with your margins (Add only top or bottom, but not both))
| } | ||
|
|
||
| .additional-search-bar { | ||
| margin-top: 20px; |
There was a problem hiding this comment.
You have set the top margin for the '.additional-search-bar' class. As mentioned above, it would be more consistent if you add margins to the bottom of elements, not to the top. (Checklist: Be consistent with your margins (Add only top or bottom, but not both))
| } | ||
|
|
||
| .search-bar-input--main { | ||
| font-family: Avenir-Book, sans-serif; |
There was a problem hiding this comment.
The 'font-family' property in the '.search-bar-input--main' class should include fallback fonts. (Checklist: Remember to use fallback fonts - alternative font-family in case the main one doesn't work)
| } | ||
|
|
||
| .search-bar-input--additional { | ||
| font-family: Avenir-Book, sans-serif; |
There was a problem hiding this comment.
The 'font-family' property in the '.search-bar-input--additional' class should include fallback fonts. (Checklist: Remember to use fallback fonts - alternative font-family in case the main one doesn't work)
|
|
||
| .search-bar-input:focus { | ||
| box-shadow: rgba(0, 0, 0, 0.25); | ||
| font-family: Avenir-Heavy, sans-serif; |
There was a problem hiding this comment.
The 'font-family' property in the '.search-bar-input:focus' class should include fallback fonts. (Checklist: Remember to use fallback fonts - alternative font-family in case the main one doesn't work)
Typical MistakesfromBEMlesson theory are checked.