add task solution #4580
add task solution #4580
Conversation
There was a problem hiding this comment.
Thank you for your hard work on this task! 😊 Your code is mostly compliant with the requirements, but there's a critical issue with the HTML form tags being self-closed, which is not valid in HTML5. Please correct this by removing the self-closing slash and ensuring each form tag has a proper closing tag. Once this is addressed, your code will be in great shape! Keep up the great work! 🚀
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
🔄 Fix the issues, commit the changes, and then re-request my review using the Re-request review button in the Reviewers tab.
src/index.html
Outdated
| <form | ||
| action="#" | ||
| data-qa="big" | ||
| > |
There was a problem hiding this comment.
The form tag is incorrectly self-closed. In HTML5, form elements should not be self-closing. Please remove the '/' at the end of the form tag and ensure it has a proper closing tag.
src/index.html
Outdated
| <form | ||
| action="#" | ||
| data-qa="small" | ||
| > |
There was a problem hiding this comment.
Similar to the previous form, the form tag is incorrectly self-closed. Remove the '/' at the end of the form tag and ensure it has a proper closing tag.
There was a problem hiding this comment.
Great job on your submission! 🎉 Your code meets most of the task requirements, and I'm approving your pull request to help you move forward with your learning journey. However, there are a few areas for improvement:
-
HTML Structure: Ensure that the
<form>tags are not self-closed in HTML5. They should be written as<form>and closed with</form>to avoid unexpected behavior in some browsers. -
CSS Styling: It's recommended to use class selectors instead of tag names for styling, except for
htmlandbody. Also, consider adding a fallback font in your CSS in case the primary font fails to load. -
Attributes and File Structure: Correct the
data-qaattribute for the small search form input todata-qa="small". Verify the existence of thesrc/imagesdirectory and ensure images are correctly placed and referenced. -
Font Weight: Double-check that the font-weight for Avenir-Book matches the actual weight of the font file to ensure proper rendering.
Addressing these issues will enhance the functionality and maintainability of your code. Keep up the good work and continue learning from these experiences! 🚀
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| <form | ||
| action="#" | ||
| data-qa="big"> |
There was a problem hiding this comment.
In HTML5, the <form> tag should not be self-closed. It should be written as <form> and closed with </form>.
| <form | ||
| action="#" | ||
| data-qa="small"> |
There was a problem hiding this comment.
In HTML5, the <form> tag should not be self-closed. It should be written as <form> and closed with </form>.
| @font-face { | ||
| font-family: Avenir; | ||
| src: url('fonts/Avenir-Book.ttf'); | ||
| font-weight: 300; |
There was a problem hiding this comment.
The font-weight is set to 300 for Avenir-Book. Ensure that this matches the actual weight of the font file. If the font file is not of weight 300, it might not render as expected.
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 ❗️