Develop by Thiago-BRoca · Pull Request #7503 · mate-academy/layout_moyo-header

Thiago-BRoca · 2026-02-04T02:59:40Z

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

mateacademy-ai-mentor

Review Summary

Good work on the semantic HTML structure and the use of Flexbox! However, this submission requires a few changes to meet the core requirements. The main issue is that the implementation is not 'Pixel Perfect' because the header's height is incorrect. To fix this, you must set a specific height on the navigation links (<a> tags) to control the header's dimensions as specified in the design. Additionally, the project rules disallow styling HTML tags directly. Please add classes to the <header> and <li> elements and update your CSS to use class selectors instead. Addressing these points will ensure your solution fully meets the task requirements.

✨ Please rate this review in the Platform's notification center¹. 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 button² 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 tag³.
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.

mateacademy-ai-mentor

Review Summary

Great work on this submission! You've successfully addressed most of the previous feedback. However, changes are needed because the build is failing and the design doesn't yet match the "Pixel Perfect" requirement.

Here are the critical issues to fix:

Failing Build: The build is failing due to a few linting errors in src/index.html. Please add the required <title> tag, provide a value for the crossorigin attribute on the <link> tag, and set the logo's href to #.
Container Width: To match the design, the container's max-width in src/style.css should be a fixed 1140px as specified in the mockup, not a percentage.
Underline Position: The active link's underline is positioned outside the header due to bottom: -8px. Please adjust this to a positive value to place it correctly within the link's area.

Additionally, for better code quality, please remove the invalid width: normal; property and merge the duplicated .nav_list styles into a single block. Addressing the critical points will get your solution ready for approval!

✨ Please rate this review in the Platform's notification center¹. 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 button² 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 tag³.
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.

mateacademy-ai-mentor · 2026-02-04T03:41:13Z

src/style.css

+  font-family: 'Roboto', Arial, sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  width: normal;


The value normal is not valid for the width property in CSS. This property should be removed as it has no effect and is incorrect.

mateacademy-ai-mentor · 2026-02-04T03:41:13Z

src/style.css

+  background-color: #ffffff;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 80%;


The requirement is to match the design 'Pixel Perfect'. The Figma mockup specifies a content container width of 1140px. Using a percentage-based max-width will not match the design on all screen sizes. Please use a fixed value.

mateacademy-ai-mentor · 2026-02-04T03:41:13Z

src/style.css

+.nav_list {
+  display: flex;
+}


The styles for the .nav_list selector are split into two separate rule blocks. It's best practice to define all styles for a selector in one place for better readability and maintenance. Please merge this display: flex; property into the .nav_list block on line 27.

mateacademy-ai-mentor · 2026-02-04T03:41:13Z

src/style.css

+  width: 100%;
+  height: 2px;
+  background-color: var(--color-primary);
+  bottom: -8px;


A negative bottom value places the underline outside of the link's clickable area, which doesn't match the visual design in Figma. The underline should be positioned 8px below the text but inside the 56px height of the link. You'll need to calculate a positive bottom value to achieve this.

mateacademy-ai-mentor

Review Summary

I am approving your solution so you can keep moving forward, but please take a moment to review the feedback below.

Excellent work addressing the previous comments! The HTML structure is solid, and you've implemented most of the design requirements correctly. The main reason the build is failing is a visual mismatch due to a missing font-size on the navigation links in src/style.css. Adding the correct font size from the design file will fix this and make your solution pixel-perfect.

I've also left a few minor suggestions in the code comments to improve code style in src/index.html and reduce selector specificity in src/style.css. Addressing these will make your code even better. You're doing great, keep it up!

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

Rate AI review example ↩

mateacademy-ai-mentor · 2026-02-04T04:15:14Z

src/index.html

+            <li class="nav_items"><a class="nav_links is-active" href="#">Apple</a></li>
+            <li class="nav_items"><a class="nav_links" href="#">Samsung</a></li>
+            <li class="nav_items"><a class="nav_links" href="#">Smartphones</a></li>
+            <li class="nav_items"><a class="nav_links" data-qa="hover" href="#">Laptops & Computers</a></li>


This line is longer than 80 characters. The <a> element also has more than two attributes, so according to the code style rules, it should be formatted with each attribute on a new line. Applying this formatting will also fix the line length issue.

mateacademy-ai-mentor · 2026-02-04T04:15:14Z

src/style.css

+.nav_list .nav_links {
+  display: inline-block;
+  text-transform: uppercase;
+}
+
+.logo {
+  display: flex;
+}
+
+.nav_list .nav_links:link {
+  text-decoration: none;
+  color: black;
+}
+
+.nav_list .nav_links:visited {
+  text-decoration: none;
+  color: black;
+}
+
+.nav_list .nav_links:hover {
+  color: var(--color-primary);
+}
+
+.nav_list .nav_links.is-active {
+  position: relative;
+  color: var(--color-primary);
+}
+
+.nav_list .nav_links.is-active::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 2px;
+  background-color: var(--color-primary);
+  bottom: 8px;
+  left: 0;
+  border-radius: 8px;
+}


These selectors are more specific than necessary due to the .nav_list prefix. This can make styles harder to override and less reusable.

You can improve this by:

Consolidating the common link styles (from the rules on lines 43-46, 52-55, and 57-60) into the main .nav_links rule (lines 38-41).

Removing the .nav_list prefix from all these selectors (e.g., use .nav_links:hover instead of .nav_list .nav_links:hover).

This will make your CSS cleaner and more maintainable.

Thiago-BRoca added 2 commits February 3, 2026 22:38

added task solution for moyo header

4eadfd1

update CSS according to checklist.md

3b4fbd9

mateacademy-ai-mentor suggested changes Feb 4, 2026

View reviewed changes

fix header height and navigation styles

ea81810

Thiago-BRoca requested a review from mateacademy-ai-mentor February 4, 2026 03:38

mateacademy-ai-mentor suggested changes Feb 4, 2026

View reviewed changes

Thiago-BRoca added 2 commits February 4, 2026 00:57

fix active link underline positioning and clean CSS

aea38f1

fix CSS lint issues

e93d14e

Thiago-BRoca requested a review from mateacademy-ai-mentor February 4, 2026 04:13

mateacademy-ai-mentor approved these changes Feb 4, 2026

View reviewed changes

Thiago-BRoca added 5 commits February 4, 2026 12:54

fix nav link font size and simplify selectors

5d60d60

remove duplicated navigation styles

4cd9e3d

fix header background positioning

7b3cec8

add horizontal padding to header container

0ce72ed

fix: fix GitHub Pages link causing 404 error

470d6cd

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Develop#7503

Develop#7503
Thiago-BRoca wants to merge 10 commits intomate-academy:masterfrom
Thiago-BRoca:develop

Thiago-BRoca commented Feb 4, 2026 •

edited

Loading

Uh oh!

mateacademy-ai-mentor left a comment

Uh oh!

mateacademy-ai-mentor left a comment

Uh oh!

mateacademy-ai-mentor Feb 4, 2026

Uh oh!

mateacademy-ai-mentor Feb 4, 2026

Uh oh!

mateacademy-ai-mentor Feb 4, 2026

Uh oh!

mateacademy-ai-mentor Feb 4, 2026

Uh oh!

mateacademy-ai-mentor left a comment

Uh oh!

mateacademy-ai-mentor Feb 4, 2026

Uh oh!

mateacademy-ai-mentor Feb 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

Thiago-BRoca commented Feb 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

mateacademy-ai-mentor Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

mateacademy-ai-mentor Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Thiago-BRoca commented Feb 4, 2026 •

edited

Loading