style: fix header layout and spacing by frolova11 · Pull Request #7477 · mate-academy/layout_moyo-header

frolova11 · 2026-01-27T12:20:20Z

No description provided.

mateacademy-ai-mentor

Review Summary

Good job on the overall structure and use of flexbox. However, several changes are needed to meet the project's core requirements. Your solution currently violates a few key constraints which causes parts of the styling and functionality to break.

Here are the main issues to address:

The gap property is used in src/style.css, but the task explicitly forbids it. Please use margin on the list items for spacing instead.
The Google Fonts link in src/index.html imports all font weights, but the requirement is to import only the medium (500) weight. [CHECKLIST ITEM #8]
The navigation links are styled using a tag selector (.nav a), which is not allowed. Please add a class like .nav__link to the <a> tags and use that for styling. This will also fix the broken :hover effect.
The active link's blue line is not appearing due to a typo in a CSS variable; you've used --blue instead of the declared --color-blue.

Please address these points. You're on the right track!

✨ 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-01-27T12:22:24Z

src/index.html

-      rel="stylesheet"
-      href="./style.css"
-    />
+     <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">


This font link violates the requirements. You should only import the Roboto font with roman style and medium (500) weight. The current link imports all weights from 100 to 900 for both roman and italic styles, which is not what was requested in the task description. This violates checklist item #8.

mateacademy-ai-mentor · 2026-01-27T12:22:25Z

src/index.html

+      <li><a href="#Apple" class="is-active">Apple</a></li>
+      <li><a href="#Samsung">Samsung</a></li>
+      <li><a href="#Smartphones">Smartphones</a></li>
+      <li><a href="#Laptops & Computers" data-qa="hover">Laptops & Computers</a></li>
+      <li><a href="#Gadgets">Gadgets</a></li>
+      <li><a href="#Tablets">Tablets</a></li>
+      <li><a href="#Photo">Photo</a></li>
+      <li><a href="#Video">Video</a></li>


The list items (<li>) and anchor tags (<a>) inside the navigation are missing their BEM classes. According to your style.css and the project's code style rules, they should have classes like nav__item and nav__link respectively. Without these, the styles for links, including hover effects and margins, will not apply correctly.

mateacademy-ai-mentor · 2026-01-27T12:22:25Z

src/index.html

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


The href attribute should not contain spaces. While browsers might handle this, it's not a valid value for a URL fragment. Consider using a hyphen or removing the space, like #Laptops-Computers.

mateacademy-ai-mentor · 2026-01-27T12:22:25Z

src/style.css

+:root {
+  --color-blue: #00acdc;
+}
+.body {


The body tag is one of the few exceptions where a tag selector is allowed. This .body class selector is currently not being applied because the <body> element in your HTML file does not have class="body".

mateacademy-ai-mentor · 2026-01-27T12:22:25Z

src/style.css

+    justify-content: space-between;
+    align-items: center;
+}
+.nav a {


This selector violates the requirement: "Don't use tag names for styling (except html and body)". Please use a class for the navigation links, for example .nav__link, and apply it to the <a> tags in your HTML. This will also allow your :hover styles on line 29 to work correctly.

mateacademy-ai-mentor · 2026-01-27T12:22:25Z

src/style.css

+    line-height: 60px;
+}
+
+.nav__link:hover {


This selector for the hover effect is not working because the <a> elements in the HTML are missing the nav__link class. The same issue applies to the .nav__link.is-active selector on line 43.

mateacademy-ai-mentor · 2026-01-27T12:22:25Z

src/style.css

+}
+
+.nav__link:hover {
+    color: var(--blue, #00acdc);


There's a typo in the CSS variable name. You've defined it as --color-blue on line 2, but you're referencing --blue here. The same mistake is present on line 48.

mateacademy-ai-mentor · 2026-01-27T12:22:25Z

src/style.css

+    list-style: none;
+    display: flex;
+    margin: 0;
+    gap: 20px;


The task requirements explicitly forbid using the gap property. Please use margin on the list items instead to create the space between them.

mateacademy-ai-mentor · 2026-01-27T12:22:25Z

src/style.css

+.nav.navbar {
+  text-transform: uppercase;
+}
+.nav__item:not(:last-child) {
+    margin-right: 20px;


These CSS rules are ineffective because the corresponding classes (.nav__item and .navbar) are missing from your HTML file. Ensure your CSS selectors match the classes used in your markup.

mateacademy-ai-mentor

Review Summary

Excellent work on this iteration! You've successfully addressed almost all the feedback from the previous review, and the project is very close to perfect. However, a couple of small changes are needed before this can be approved.

In src/index.html, the href attribute for one of the links contains a space ("#Laptops & Computers"). URL fragments should not contain spaces to ensure they work correctly. Please replace the space with a hyphen, like "#laptops-and-computers".
In src/style.css, there are two unused CSS rules: .logo (the class in the HTML is header__logo) and an incorrectly structured selector .nav__list.nav__item.... Please remove these to keep the stylesheet clean.

After these minor adjustments, your work will be ready for approval. Keep up the great effort!

✨ 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-01-27T19:01:44Z

src/style.css

+.nav__list.nav__item:not(:last-child).nav__link {
+  margin-right: 20px;
+}


This CSS selector is not structured correctly for the HTML provided. It tries to match a single element that has .nav__list, .nav__item, and .nav__link classes at the same time, which is not possible as these are separate elements (ul, li, a). This rule currently has no effect. The correct rule for spacing is already present on line 66.

mateacademy-ai-mentor · 2026-01-27T19:01:44Z

src/style.css

+.logo {
+    display: block;
+}


This style rule targets a class named .logo. However, in your index.html file, the logo's anchor tag has the class header__logo. Because the class names don't match, these styles are not being applied.

mateacademy-ai-mentor · 2026-01-27T19:01:44Z

src/index.html

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


The href attribute value should not contain spaces. This can cause issues with URL encoding and fragment identifiers (the part after the #). It's best practice to use hyphens or underscores instead of spaces in href values.

mateacademy-ai-mentor

Review Summary

Excellent work on this task! You've successfully addressed all the feedback from the previous review, and your solution now fully meets all project requirements. Your HTML is well-structured with correct semantic tags, and the CSS is clean and efficient. This is a great submission, and I am approving it. Keep up the fantastic work!

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

Rate AI review example ↩

style: fix header layout and spacing

b7b143c

mateacademy-ai-mentor suggested changes Jan 27, 2026

View reviewed changes

frolova11 added 11 commits January 27, 2026 17:20

fix: address mentor feedback

72b3263

fix: remove duplicated class attribute

f37f94b

fix: restore active class and correct font link

2eaef15

fix: wrap font URL in link tag

aded351

fix: final font link cleanup

8e6b57d

fix: final cleanup of head and navigation classes

065f608

fix: force update to trigger new AI check

15ce87c

fix: remove trailing newline and check styles

4d9c053

style: fix linter issues and pseudo-elements

f509a65

style: fix spacing and linter rules

90cdebd

fix: target body element and fix linter spacing

406593d

frolova11 requested a review from mateacademy-ai-mentor January 27, 2026 18:59

mateacademy-ai-mentor suggested changes Jan 27, 2026

View reviewed changes

frolova11 added 2 commits January 28, 2026 18:26

fix: final cleanup of selectors and links

8ab412f

style: remove duplicate selector and clean up

5f92b1c

frolova11 requested a review from mateacademy-ai-mentor January 28, 2026 17:22

mateacademy-ai-mentor approved these changes Jan 28, 2026

View reviewed changes

Conversation

frolova11 commented Jan 27, 2026

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants