add task solution #4554
add task solution #4554
Conversation
There was a problem hiding this comment.
Great job on your work! 🎉 While there are a few suggestions for improvement regarding class naming and semantic HTML, these are minor and do not impact the functionality or core requirements of your code. Keep up the good work and consider these tips for future projects to enhance code readability and accessibility. 😊
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| data-qa="keypress" | ||
| placeholder="Try “Los Angeles“" | ||
| /> | ||
| <form class="form"> |
There was a problem hiding this comment.
Consider using a more semantic tag like
| <input | ||
| class="form__input form__input--big" | ||
| type="text" | ||
| data-qa="big" | ||
| data-action="keypress" | ||
| placeholder="Try “Los Angeles“" | ||
| /> |
There was a problem hiding this comment.
The class names 'form__input' and 'form__input--big' are well-structured, but ensure they represent the meaning of the content rather than the styles or tag names.
| <input | ||
| class="form__input form__input--small" | ||
| type="text" | ||
| data-qa="small" | ||
| data-action="hover" | ||
| placeholder="Try “Los Angeles“" | ||
| /> |
There was a problem hiding this comment.
The class names 'form__input' and 'form__input--small' should represent the meaning of the content rather than the styles or tag names.
|
|
||
| body { | ||
| margin-top: 0; | ||
| font-family: Avenir, Arial, sans-serif; |
There was a problem hiding this comment.
Consider adding a fallback font for 'Avenir' to ensure consistent rendering across different browsers and systems. The current setup already includes Arial and sans-serif as fallbacks, which is good practice.
| padding-left: 33px; | ||
| background-position: 13px; | ||
| font-family: inherit; | ||
| font-weight: 400; |
There was a problem hiding this comment.
Be consistent with your margins. The checklist advises adding only top or bottom margins, but not both, to avoid potential margin collapse. Here, you have a bottom margin set for .form__input.
Typical MistakesfromBEMlesson theory are checked.