add task solution

[MissDragi]

• 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]

Review Summary

Great job on your submission! 🎉 Your code meets most of the task requirements, and you've done well in using semantic HTML tags, CSS variables, and implementing the required styling features. However, there are a few areas for improvement:

• Link href Attributes: Ensure that the href attributes are correctly formatted and descriptive. Avoid using spaces or special characters like & without proper encoding.
• Image Alt Text: The alt attribute for images should be descriptive of the image's content or function, such as 'Moyo Logo' instead of 'Moyo.png'.
• CSS Specificity: Consider simplifying your CSS selectors to avoid specificity conflicts, such as using .link.is-active instead of .is-active.link.
• Unnecessary CSS Properties: Remove any unnecessary CSS properties, such as the color property in .is-active::after.
• HTML Formatting: Keep lines within 80 characters for better readability.
• Flexbox Usage: Adhere to the task requirement of using margin instead of the gap property for spacing in Flexbox.
• Header Height: Ensure the header height is set for the nav links, not the header itself.

These adjustments will enhance the functionality and maintainability of your code. Keep up the good work, and make sure to address these points in future projects to continue improving your skills! 🚀

✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨

[mateacademy-ai-mentor]

The alt attribute for the image is 'Moyo.png', which is not descriptive. Alt text should describe the content or function of the image, such as 'Moyo Logo'.

[mateacademy-ai-mentor]

The href attribute value 'apple' seems to be a relative path. Ensure that this path correctly points to the intended resource or page. Consider using a more descriptive path or filename if necessary.

[mateacademy-ai-mentor]

The href attribute value 'samsung' should be checked to ensure it correctly points to the intended resource. Consider using a more descriptive path or filename if necessary.

[mateacademy-ai-mentor]

The href attribute value 'smartphones' should be verified to ensure it correctly points to the intended resource. Consider using a more descriptive path or filename if necessary.

[mateacademy-ai-mentor]

The href attribute value 'laptops&computers' contains an ampersand. Ensure that this URL is correctly formatted and points to the intended resource. Consider using URL encoding if necessary.

[mateacademy-ai-mentor]

The href attribute value 'tablets' should be verified to ensure it correctly points to the intended resource. Consider using a more descriptive path or filename if necessary.

[mateacademy-ai-mentor]

The href attribute value 'photo' should be verified to ensure it correctly points to the intended resource. Consider using a more descriptive path or filename if necessary.

[mateacademy-ai-mentor]

The href attribute value 'video' should be verified to ensure it correctly points to the intended resource. Consider using a more descriptive path or filename if necessary.

[mateacademy-ai-mentor]

The selector '.is-active.link' might be overly specific. Consider using '.link.is-active' to maintain consistency with other class selectors and avoid specificity conflicts.

[mateacademy-ai-mentor]

The 'color' property in '.is-active::after' is not necessary since the pseudo-element is a block with a background color. You can remove this line to clean up the code.