Resolve the task #5953
Resolve the task #5953
Conversation
There was a problem hiding this comment.
Review Summary
Great effort on your submission! 🎉 While your code is generally well-structured, there are a few areas for improvement to fully meet the task requirements:
-
CSS Universal Selector: Avoid using the universal selector
*for resetting margins and paddings as it can impact performance. -
Semantic Tags: Enhance the
altattribute for images to be more descriptive than just "logo". -
CSS Variable for Blue Color: Implement a CSS variable for the blue color as specified in the task.
-
CSS Flex Gap Property: Use
margininstead of thegapproperty for indents as per the task requirements. -
HTML Formatting: Ensure consistent use of 2 spaces for indentation instead of mixing spaces and tabs.
-
CSS for Uppercase Letters: Use CSS to transform text to uppercase rather than writing it directly in uppercase in HTML.
-
Navigation Link: The
hrefattribute value#laptops&computersshould be encoded as#laptops%26computersto avoid issues. -
Redundant Styles: Address redundancy in padding styles for the
headerelement and conflicting margin styles on thenavelement.
These issues should be addressed to enhance your code's performance and maintainability. The decision to approve is made to help you progress in your learning journey. Please review the comments and make improvements in your future submissions. 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! ✨
| <li><a href="#smartphone">SMARTPHONES</a></li> | ||
| <li> | ||
| <a | ||
| href="#laptops&computers" |
There was a problem hiding this comment.
The 'href' attribute value '#laptops&computers' may cause issues because the '&' character is not encoded. Consider replacing it with '%26' to ensure proper URL encoding: '#laptops%26computers'.
| padding: 0 20px; | ||
| padding-left: 40px; |
There was a problem hiding this comment.
There is a redundancy in the padding styles for the 'header' element. You have both 'padding: 0 20px;' and 'padding-left: 40px;'. Consider removing 'padding: 0 20px;' to avoid confusion and ensure the intended padding is applied.
| margin-left: auto; | ||
| right: 40px; | ||
| margin-right: 50px; |
There was a problem hiding this comment.
The 'margin-left: auto;' and 'margin-right: 50px;' styles on the 'nav' element might conflict with each other. If the intention is to align the navigation to the right, consider using only 'margin-left: auto;'.
|
HI @maryna-filipova I cannot pass this task it's give me 2 errors, can you help me? |
DEMO LINK
TEST REPORT LINK
Header height is set in 1 place (for the links)
Content is vertically centered (for any header height)
CSS is used to show all letters in Uppercase (don't type them in HTML)
Logo is an image wrapped with a link
CSS Variable is used for a blue color
Pseudo-element is used for a blue line below the active link
Code follows all the Code Style Rules ❗️