Develop

[Molszuu]

• DEMO LINK
• TEST REPORT LINK

❗️ Copy this Checklist to the Pull Request description after links, and put - [x] before each point after you checked it.

• [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 ❗️
• [x ] The Google Fonts Configuration follows requirements.
  

[mateacademy-ai-mentor]

Great job on your submission! 🎉 Your code meets most of the task requirements, and you've done well in structuring your HTML and organizing your CSS. Here are some key points to consider for improvement:

• Font Embedding: You've correctly used the Roboto font with the medium weight, which is great.
• Semantic Tags: Good use of semantic tags like <header>, <nav>, <ul>, <li>, and <a>.
• CSS Variables: Effective use of CSS variables for color management.
• Pseudo-element for Active Link: Correct implementation using ::after.
• Data Attribute: Proper use of data-qa="hover" for testing.
• Link Indentation: Correct use of margin-left for indentation.
• Header Width: Proper use of width: 100vw; to stretch the header.
• Hover Effects: Correct implementation of link color change on hover.
• Logo as a Link: Well-implemented logo link.
• Header Height: Correctly set for navigation links.

However, there are a few areas to address:

1. Uppercase Letters: Use text-transform: uppercase; in CSS instead of directly using uppercase letters in HTML.
2. URL Encoding: The URL for "LAPTOPS & COMPUTERS" should be checked to ensure %26 is used correctly. If the intention is to use an ampersand, ensure the URL is formatted correctly.
3. CSS Property: The align-content property in the .header class might not be necessary if it's not a flex container with multiple lines.

Your code is approved to help you move forward with your learning. Please review the comments to improve your code, and ensure that critical issues are addressed in future projects. Keep up the great work and continue to learn from these experiences! 🚀

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

[mateacademy-ai-mentor]

The URL https://laptops%26computers.com seems to be incorrectly encoded. The %26 should be replaced with & if the intention is to use an ampersand in the URL. Ensure that the URL is correctly formatted and accessible.

[mateacademy-ai-mentor]

The align-content property is used for flex containers with multiple lines. Since the .header class does not seem to be a flex container with multiple lines, this property might not have any effect. Consider removing it if it's not needed.