add task solution#7493
Conversation
CarlosGabrielOliveiraa
commented
Feb 1, 2026
CarlosGabrielOliveiraa
commented
- DEMO LINK
- TEST REPORT LINK
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Great work on the overall structure and layout! Your HTML is semantic, and you've correctly used Flexbox to build the header. However, a couple of changes are needed to meet the project's specific technical requirements.
- Use of
margininstead ofgap: The task requirements forbid using thegapproperty. Please replacegap: 20pxon your.nav__linksrule withmarginon the individual navigation items. You can usemargin-rightand then remove it from the last item using the:last-childpseudo-class. - Avoid tag selectors: Your CSS uses tag selectors like
lianda(e.g.,.nav__links li). The requirements state that styling should be done via classes. Please add a class to your<li>elements and use that for styling. For the<a>tags, you can directly use the existing.nav__linkclass.
Once you've made these adjustments, your solution will be perfect. Keep up the great work!
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Important
Fix the issues, commit the changes, and then re-request my review using the Re-request review button2 in the Reviewers tab.
Tip
If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag3.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.
Caution
Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.
Footnotes
src/style.css
Outdated
| .nav__links { | ||
| list-style: none; | ||
| display: flex; | ||
| gap: 20px; |
There was a problem hiding this comment.
The task requirements forbid the use of the gap property. Please use margin to create space between the navigation items instead.
src/style.css
Outdated
| .nav__links li { | ||
| margin: 0; | ||
| } | ||
|
|
||
| .nav__links li:last-child { | ||
| margin-right: 0; | ||
| } |
There was a problem hiding this comment.
The task requirements state that you should not use tag names for styling. Please add a class to the <li> elements in your HTML and use it to apply styles here, including for the :last-child selector.
src/style.css
Outdated
| margin-right: 0; | ||
| } | ||
|
|
||
| .nav__links a { |
There was a problem hiding this comment.
According to the task requirements, tag selectors should be avoided. The <a> elements already have a .nav__link class. Please use that class directly (e.g., .nav__link, .nav__link:hover, .nav__link.is-active) for styling the links. This applies to all subsequent rules targeting the anchor tag.
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Excellent progress on this PR, and thank you for addressing the previous feedback! You are very close to completion, but one critical change is needed. The project requirements state that elements must be styled using classes, not tags. In src/style.css, the selector .nav__links li:not(:last-child) still uses the li tag selector. Please update this to use the class you've already added to the list items. Once that's fixed, your solution will be perfect!
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Important
Fix the issues, commit the changes, and then re-request my review using the Re-request review button2 in the Reviewers tab.
Tip
If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag3.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.
Caution
Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.
Footnotes
src/style.css
Outdated
| margin: 0; | ||
| } | ||
|
|
||
| .nav__links li:not(:last-child) { |
There was a problem hiding this comment.
This selector uses the li tag name, which violates the project requirement to style elements using classes, not tags. You've already added the .list class to your <li> elements in the HTML, so please use that class here as well to be consistent and meet the requirements.
src/index.html
Outdated
| </a> | ||
| <nav> | ||
| <ul class="nav__links"> | ||
| <li class="list"> |
There was a problem hiding this comment.
The class name list is a bit generic and quite similar to the tag name li. According to the style guide, class names should reflect the content's meaning. A more descriptive BEM-style name like nav__item would be a great improvement here.
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Excellent work on this pull request! You have successfully addressed all the feedback from the previous review, and your code now fully meets all project requirements. The HTML is well-structured and semantic, and the CSS is clean and correctly uses class selectors. I am approving your solution. Keep up the fantastic work!
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Footnotes
2 participants
