moyo-header

[AllanCordella]

• 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 ❗️

[mateacademy-ai-mentor]

---

Thank you for your hard work on this project! 😊 While you've made a great start, there are a few critical issues that need to be addressed before we can approve the pull request:

1. Semantic Tags: The use of semantic tags is not fully correct. The <nav> element should not contain the logo, which is a core requirement for semantic HTML structure.

2. CSS Variables: The absence of CSS variables for the blue color is a requirement that needs to be fulfilled.

3. Class Name Typos: There are multiple typos in class names such as nav__iten and nav__itemt. These need to be corrected to ensure styles are applied correctly.

4. Invalid href Attributes: Many href attributes are not valid URLs. They should be updated to valid relative or absolute paths to ensure proper navigation.

5. CSS Hover Selector: The :hover selector is too generic. It should be more specific to avoid unintended styling across the site.

These issues are critical as they affect the functionality and core requirements of the task. Once these are resolved, your code will be in great shape! Keep up the good work, and don't hesitate to reach out if you need any help. 🌟

✨ 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.

[mateacademy-ai-mentor]

The href attribute value 'Apple' should be a valid URL. Consider using a relative or absolute URL path, such as 'apple.html' or '/apple'.

[mateacademy-ai-mentor]

The href attribute value 'Samsung' should be a valid URL. Consider using a relative or absolute URL path, such as 'samsung.html' or '/samsung'.

[mateacademy-ai-mentor]

The href attribute value 'Smartphones' should be a valid URL. Consider using a relative or absolute URL path, such as 'smartphones.html' or '/smartphones'.

[mateacademy-ai-mentor]

The href attribute value 'Laptopsecomputers' seems to be a typo or improperly formatted. Consider using a valid URL, such as 'laptops-computers.html' or '/laptops-computers'.

[mateacademy-ai-mentor]

The href attribute value 'Gadgets' should be a valid URL. Consider using a relative or absolute URL path, such as 'gadgets.html' or '/gadgets'.

[mateacademy-ai-mentor]

The href attribute value 'Tablets' should be a valid URL. Consider using a relative or absolute URL path, such as 'tablets.html' or '/tablets'.

[mateacademy-ai-mentor]

The href attribute value 'Photo' should be a valid URL. Consider using a relative or absolute URL path, such as 'photo.html' or '/photo'.

[mateacademy-ai-mentor]

The href attribute value 'Video' should be a valid URL. Consider using a relative or absolute URL path, such as 'video.html' or '/video'.

[mateacademy-ai-mentor]

There is a typo in the class name '.nav__iten'. It should be '.nav__item' to match the HTML class names and ensure the styles are applied correctly.

[mateacademy-ai-mentor]

The ':hover' selector is too generic and will apply to all elements. Consider using a more specific selector, such as '.nav__link:hover', to target only the navigation links.

[mateacademy-ai-mentor]

Review Summary

Great effort on your submission! 🎉 While your code is on the right track, there are a few critical points that need attention to fully meet the task requirements:

1. Semantic Tags: The <nav> element still incorrectly contains the logo. To maintain proper semantic structure, the logo should be placed outside the <nav> element.

2. CSS Variables: The use of CSS variables for colors, especially for the blue color used in hover effects and active states, is currently missing. Implementing CSS variables will improve the maintainability of your code.

3. Invalid href Attributes: Although the href attributes are now valid URLs pointing to "https://mate.academy/", they should be updated to valid relative or absolute paths relevant to your project.

Despite these issues, the decision to approve your Pull Request is made to help you move forward with your learning. Please review the comments and address these issues to enhance your code quality. Remember, addressing these points will not only improve your current project but also strengthen your coding skills for future tasks. 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! ✨

[mateacademy-ai-mentor]

The <nav> element should not contain the logo. Consider moving the logo outside the <nav> element to maintain proper semantic structure.

[mateacademy-ai-mentor]

The href attributes for the navigation links are currently pointing to https://mate.academy/. These should be updated to valid relative or absolute paths relevant to your project.

[mateacademy-ai-mentor]

The :hover selector should be more specific to avoid unintended styling across the site. Consider using a more specific selector like .nav__link:hover.