moyo header solution by kgordiychuk23-bit · Pull Request #7738 · mate-academy/layout_moyo-header

kgordiychuk23-bit · 2026-04-13T12:40:59Z

No description provided.

mateacademy-ai-mentor

Review Summary

I am requesting changes because the current src/index.html is missing the core header and navigation structure required by the task, which is causing both checklist violations and automated test failures. The page currently only shows an <h1> and text, but you must add a semantic <header> containing a logo link (<a> wrapping an <img> from src/images with a descriptive alt) placed outside the <nav>, and then a <nav><ul><li><a> list of links, including one link with class="is-active" and the 4th link with data-qa="hover" ([CHECKLIST ITEM #1], [#3], [#7]–[#9], [#11], [#15], [#18], [#19], [#20], [#33], [#34]). In the <head>, you also need to include the correct Google Fonts link that loads only Roboto, roman, weight 500, plus link your stylesheet where you reset default margins and set a font-family with fallback fonts ([CHECKLIST ITEM #21], [#22], [#23], [#24]). In your CSS, define a --blue variable, set the nav link height in a single place, vertically center header content using flexbox, transform link text to uppercase via CSS (not HTML), add a hover color, and implement .is-active::after as a pseudo-element positioned relative to the active link ([CHECKLIST ITEM #4], [#5], [#12], [#13], [#14], [#17], [#31], [#35]). These missing structures and styles are why BackstopJS cannot find header, nav, .is-active, or [data-qa="hover"] and why the visual diffs are so large, so updating the markup and CSS to match the spec is required before the task can be considered complete. As a minor clean-up, also remove the blank line between <body> and its first child to align with the formatting checklist ([CHECKLIST ITEM #40]). Once you implement the header/nav markup and the required CSS and font configuration, re-run npm test and use the Backstop HTML report to fine-tune spacing, alignment, and colors until the scenarios pass.

✨ 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-04-13T12:44:44Z

    />
  </head>
  <body>
+


Missing header/navigation and logo markup. This file currently lacks the semantic header and navigation required by the task. Violated checklist items (quote exact items):

"[CHECKLIST ITEM Task #1] Create an HTML page with the header using flexbox based on the Figma mockup."

"[CHECKLIST ITEM MOYO header by Kate #3] The header should stretch the full page width (don't use a horizontal margin)."

"[CHECKLIST ITEM solution #33] Use semantic tags: <header>, <img>, <nav>, <ul>, <li> and <a>."

"[CHECKLIST ITEM Solution #34] Use semantic tags where possible (like header, section, article, p."

"[CHECKLIST ITEM Fs on apr19 valeraonisko #7] The logo should be a link with an image inside (from src/images)."

"[CHECKLIST ITEM Solution #8] The logo should not be a part of the <nav>."

"[CHECKLIST ITEM Fs on apr19 oleksandr #9] Logo is an image wrapped with a link."

"[CHECKLIST ITEM solution #11] The blue link with a line below should have a class is-active in addition to any other classes you add."

"[CHECKLIST ITEM Fs apr19 ivan #15] Add data-qa="hover" attribute to the 4th link for testing (Laptops & computers)."

"[CHECKLIST ITEM Oleh_Rudko #18] alt attribute should describe the image content."

"[CHECKLIST ITEM Anna Kondratiuk #19] Don't use spaces in <a> tag's href property."

"[CHECKLIST ITEM Yevhen Kryvdiuk #20] Anchor links starts with the # symbol."

What to do: Add a semantic
containing the logo (an wrapping an
from src/images with a descriptive alt) outside the , then a with an
and
/ items. Ensure the 4th link has data-qa="hover" and the active link has class is-active.

mateacademy-ai-mentor · 2026-04-13T12:44:44Z

  <body>
+
    <h1>Moyo header</h1>
+    Hello, world!


Head and styling setup missing required items. Violated checklist items (quote exact items):

"[CHECKLIST ITEM added HTML page with flexible header #21] Reset browser default margins."

"[CHECKLIST ITEM solution for moyo header by @laverka #22] Use Roboto font: select ONLY roman style, medium (500) weight and normal width for embedding."

"[CHECKLIST ITEM Solution #23] The Google Fonts Configuration follows requirements."

"[CHECKLIST ITEM solution #24] Remember to use fallback fonts - alternative font-family in case the main one doesn't work."

"[CHECKLIST ITEM roman_o #31] CSS Variable is used for a blue color."

"[CHECKLIST ITEM Olha Mazurenko #17] CSS is used to show all letters in Uppercase (don't type them in HTML)."

"[CHECKLIST ITEM Solution #4] The height should be set for nav links (not the header), take it from the design."

"[CHECKLIST ITEM solution; i added logo in nav, i would not like to change this #5] Header content should be vertically centered."

"[CHECKLIST ITEM Solution #35] Header height is set in 1 place (for the links)."

What to do: In add the Google Fonts link that requests Roboto roman, weight 500 only (and no other styles), and add your stylesheet that resets default margins. In CSS define a --blue variable, set text-transform: uppercase for nav links (via class), set the link hover color, implement ::after for .is-active (positioned relative), and set the nav link height in one place (not the header).

mateacademy-ai-mentor

Sorry, the pull request review was unsuccessful for the following reasons:

Warning

There are no files to review. Please make sure that you have added files to the pull request. Some files and directories may be ignored from the review or failed to load.
_{[CODE: NFR]}

Additional info:
Ignored files list:

.github/workflows/test.yml-template

If the issue is within your control, please address it.
The next review attempt will automatically launch in about 1 hour.
If you believe this is an error or need assistance, please contact the support team.

mateacademy-ai-mentor

Sorry, the pull request review was unsuccessful for the following reasons:

Warning

There are no files to review. Please make sure that you have added files to the pull request. Some files and directories may be ignored from the review or failed to load.
_{[CODE: NFR]}

Additional info:
Ignored files list:

.github/workflows/test.yml-template

If the issue is within your control, please address it.
The next review attempt will automatically launch in about 1 hour.
If you believe this is an error or need assistance, please contact the support team.

mateacademy-ai-mentor

Sorry, the pull request review was unsuccessful for the following reasons:

Warning

There are no files to review. Please make sure that you have added files to the pull request. Some files and directories may be ignored from the review or failed to load.
_{[CODE: NFR]}

Additional info:
Ignored files list:

.github/workflows/test.yml-template

If the issue is within your control, please address it.
The next review attempt will automatically launch in about 1 hour.
If you believe this is an error or need assistance, please contact the support team.

mateacademy-ai-mentor

Sorry, the pull request review was unsuccessful for the following reasons:

Warning

There are no files to review. Please make sure that you have added files to the pull request. Some files and directories may be ignored from the review or failed to load.
_{[CODE: NFR]}

Additional info:
Ignored files list:

.github/workflows/test.yml-template

If the issue is within your control, please address it.
The next review attempt will automatically launch in about 1 hour.
If you believe this is an error or need assistance, please contact the support team.

brespect

Good progress, but I didn't see any changes from src directory, also you need to pass all tests and pass DEMO LINK to the Pull Request description

moyo header solution

8ad2684

mateacademy-ai-mentor suggested changes Apr 13, 2026

View reviewed changes

kgordiychuk23-bit added 6 commits April 13, 2026 14:48

fix

97c52bb

fix html

5b0c7f9

fix lint

5b038fa

fix file

2635177

fix css

9c0bac0

final fix

c558f6b

kgordiychuk23-bit requested a review from mateacademy-ai-mentor April 14, 2026 21:03

mateacademy-ai-mentor reviewed Apr 14, 2026

View reviewed changes

mateacademy-ai-mentor reviewed Apr 15, 2026

View reviewed changes

brespect suggested changes Apr 15, 2026

View reviewed changes

kgordiychuk23-bit added 8 commits April 15, 2026 21:25

finally fix

d739fd0

fix styles

1fd8725

fix exact styles

dc01033

final fix

e2bf88a

final fix

8b8a7b1

final

52561a8

final

bfaa1a8

finally

32117d4

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

moyo header solution#7738

moyo header solution#7738
kgordiychuk23-bit wants to merge 15 commits intomate-academy:masterfrom
kgordiychuk23-bit:my-feature

kgordiychuk23-bit commented Apr 13, 2026

Uh oh!

mateacademy-ai-mentor left a comment

Uh oh!

mateacademy-ai-mentor Apr 13, 2026

Uh oh!

mateacademy-ai-mentor Apr 13, 2026

Uh oh!

mateacademy-ai-mentor left a comment

Uh oh!

mateacademy-ai-mentor left a comment

Uh oh!

mateacademy-ai-mentor left a comment

Uh oh!

mateacademy-ai-mentor left a comment

Uh oh!

brespect left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

kgordiychuk23-bit commented Apr 13, 2026

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

mateacademy-ai-mentor Apr 13, 2026

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor Apr 13, 2026

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Uh oh!

brespect left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants