add task solution #4745
add task solution #4745
Conversation
There was a problem hiding this comment.
Great job on your submission! 🎉 Your code meets most of the task requirements, and I'm approving it to help you move forward with your learning journey. However, there are a few areas to improve:
- Font Weight: Ensure the default
font-weightis set to 300 as required. - Image Paths: Verify that images are correctly placed in the
src/imagesdirectory. - HTML Formatting: Maintain correct attribute formatting and use semantic tags for better accessibility and SEO.
- CSS Selectors: Use classes instead of tag names for styling, except for
htmlandbody. - Fallback Fonts: Include fallback fonts in your CSS.
- Accessibility: Add
<label>elements to input fields for better accessibility. - CSS Consistency: Use CSS variables for repeated values like colors and ensure consistent units.
Addressing these points will enhance the quality and maintainability of your code. Keep up the good work and continue learning from these insights! 🚀
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| <input | ||
| class="search-bar__input search-bar__input--big" | ||
| type="text" | ||
| data-qa="keypress" | ||
| placeholder="Try “Los Angeles“" | ||
| /> |
There was a problem hiding this comment.
Consider adding a <label> element for the input field to improve accessibility. This helps screen readers to associate the input with its purpose.
| <input | ||
| class="search-bar__input search-bar__input--small" | ||
| type="text" | ||
| placeholder="Try “Los Angeles“" | ||
| /> |
There was a problem hiding this comment.
Similar to the previous form, consider adding a <label> element for this input field to enhance accessibility.
| .search-bar__input { | ||
| width: 100%; | ||
| box-sizing: border-box; | ||
| border: 1px solid #e1e7ed; |
There was a problem hiding this comment.
Consider using CSS variables for colors like #e1e7ed to maintain consistency and make future changes easier.
| box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); | ||
|
|
||
| font-family: 'Avenir Book', sans-serif; | ||
| color: #3d4e61; |
There was a problem hiding this comment.
Similarly, using CSS variables for colors like #3d4e61 can help maintain consistency across the stylesheet.
| } | ||
|
|
||
| .search-bar__input:hover { | ||
| box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); |
There was a problem hiding this comment.
Ensure consistent use of units. Here, 0 does not require a unit, but for consistency, you might want to use 0px if other similar properties use px.
Typical MistakesfromBEMlesson theory are checked.