Develop #5750
Develop #5750
Conversation
There was a problem hiding this comment.
Great job on your submission! 🎉 Your code is well-structured and meets most of the task requirements. Here are some points to consider for improvement:
- CSS Universal Selector: The use of the universal selector
*to reset margins and paddings can impact performance. Consider using more specific selectors to achieve the same effect. - Font Weight: Ensure that the font weight of 500 is suitable for all text elements, as it might not be ideal for headings or emphasized text.
- Background Color: The universal selector is also setting a background color of
#ffffor all elements, which might override specific background colors you intend to use elsewhere. - JavaScript Functionality: The
event.preventDefault()method prevents link navigation. If navigation is intended, consider adjusting the logic to allow it. - Link Href Attributes: The
href="#"attributes are placeholders. Replace them with actual URLs or section IDs if the links are meant to navigate to specific sections or pages. - Image Alt Attribute: The
altattribute for the logo image could be more descriptive to improve accessibility.
These adjustments will enhance the functionality and performance of your code. Keep up the good work, and continue to learn from these insights! 🚀
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| <h1>Moyo header</h1> | ||
| <header> | ||
| <a | ||
| href="#" |
There was a problem hiding this comment.
The href="#" attribute is used as a placeholder. If these links are intended to navigate to specific sections or pages, consider replacing # with the actual URLs or section IDs.
|
|
||
| navLinks.forEach((link) => { | ||
| link.addEventListener('click', (event) => { | ||
| event.preventDefault(); |
There was a problem hiding this comment.
The event.preventDefault() method is used here, which prevents the default action of the link. If the intention is to navigate to different sections or pages, you might want to remove this line or adjust the logic to allow navigation.
| --blue-color: #00acdc; | ||
| } | ||
|
|
||
| * { | ||
| margin: 0; |
There was a problem hiding this comment.
The universal selector (*) is setting a background color of #fff for all elements. This might override background colors for elements where a different background is desired. Consider applying this style more selectively if needed.
|
|
||
| body { | ||
| font-family: Roboto, sans-serif; | ||
| font-weight: 500; |
There was a problem hiding this comment.
The font-weight is set to 500 for the entire body. Ensure that this is the desired weight for all text elements, as it might not be suitable for all text styles, such as headings or emphasized text.
DEMO LINK
TEST REPORT LINK
[ x] Header height is set in 1 place (for the links)
[ x] Content is vertically centered (for any header height)
[ x] CSS is used to show all letters in Uppercase (don't type them in HTML)
[ x] Logo is an image wrapped with a link
[ x] CSS Variable is used for a blue color
[ x] Pseudo-element is used for a blue line below the active link
[ x] Code follows all the Code Style Rules ❗️