first commit stars page by zobov-dev · Pull Request #6872 · mate-academy/layout_stars

zobov-dev · 2026-07-01T21:25:05Z

Yellow stars are added with container modifier + pseudo-selector (NO extra classes)
Each BEM block has its own separate file
All Typical Mistakes from BEM lesson theory are checked.
Code follows all the Code Style Rules ❗️

mateacademy-ai-mentor

Review Summary

I am requesting changes because a critical checklist requirement is not met: the stars BEM block styles are all inside src/style.css instead of having their own dedicated CSS file. The task explicitly requires “Each BEM block has its own separate file” [CHECKLIST ITEM #2], and mixing global styles (body { margin: 0; }) with block styles (.stars, .stars__star, modifiers) in one file is also listed as a typical BEM mistake. To fix this, move all stars-related rules out of src/style.css into a new file such as src/stars.css, leaving style.css only for global/base styles, and then include stars.css from your main stylesheet or index.html as required (for example, via an additional <link> in the <head>).

Functionally your stars layout, modifiers, and flex behavior look good, so this is mainly a structural/BEM-organization issue blocking completion. Once you separate the block into its own file and ensure the project structure matches the “one file per block” requirement, your solution should be ready to pass. Keep going—you’ve already implemented the core behavior correctly; this is just about aligning with the BEM and checklist standards.

✨ 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-07-01T21:26:38Z

+.stars{
+    display: flex;
+}
+
+.stars__star{
+    width: 16px;
+    height: 16px;
+    background-image: url(./images/star.svg);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.stars__star:not(:last-child) {
+  margin-right: 4px;
+}
+
+.stars--1 .stars__star:nth-child(-n+1),
+.stars--2 .stars__star:nth-child(-n+2),
+.stars--3 .stars__star:nth-child(-n+3),
+.stars--4 .stars__star:nth-child(-n+4),
+.stars--5 .stars__star:nth-child(-n+5){
+    background-image: url(./images/star-active.svg);
+}


This violates checklist item #2: "Each BEM block has its own separate file". All styles for the stars block are currently in style.css; you should move the stars-related rules into a dedicated CSS file for this BEM block and include it from your main stylesheet or HTML as required.

mateacademy-ai-mentor

Review Summary

Your solution is approved because it meets all core functional and checklist requirements for the Stars block. You correctly reset the browser margin in style.css, implemented six .stars containers with five .stars__star elements each, and used modifiers stars--0 through stars--5 so that exactly the first N stars are active via :nth-child selectors, satisfying the “yellow stars via container modifier + pseudo-selector” requirement [CHECKLIST ITEM #1]. The stars use background-image instead of <img> or <svg>, the block is laid out with display: flex without gap, and spacing is handled with margins on the star elements only, as required. You also moved the Stars block styles into their own stars.css file while keeping global styles in style.css, which fulfills the “each BEM block has its own file” requirement [CHECKLIST ITEM #2]. The BackstopJS visual test issues appear to be related to reference image setup rather than broken functionality in your code, so they are not blockers for this task. Overall, the implementation is clean, respects the BEM structure, and aligns with the task description—nice work finishing this task to specification.

✨ 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

Your solution is approved – the Stars block implementation correctly follows the task requirements and BEM structure. You successfully used six .stars blocks with five .stars__star elements each, applied the stars--0 to stars--5 modifiers, and activated exactly the first N stars via container modifiers plus :nth-child selectors, which matches [CHECKLIST ITEM #1]. The use of background-image for the stars, display: flex without gap, and margins only for horizontal spacing all align well with the constraints, and separating global styles into style.css and block styles into stars.css satisfies [CHECKLIST ITEM #2].

There is one minor area to improve: the CSS linter reports missing empty lines before some rules in src/stars.css (around lines 4, 12, and 15), which is a formatting/style issue, not a functional one. This approval is an educational override to help you move forward while you learn, but in future tasks you should fix these by either running npm run lint -- --fix or manually adding the empty lines so your code passes automated checks cleanly. Overall, you’ve done a solid job implementing the block as described—keep paying attention to small style details, and you’ll be in great shape for more complex layouts.

✨ 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.

brespect

Good progress, but your DEMO LINK & TEST REPORT LINK are not working

brespect

Same, please request only if you are ready

zobov-dev · 2026-07-02T06:42:46Z

I don't understand why it doesn't work, the files that need to be specified are simply not there, how do I add a working link where there is nothing? чт, 2 лип. 2026 р., 09:40 користувач Bohdan Lesyk ***@***.***> пише:

…

***@***.**** requested changes on this pull request. Same, please request only if you are ready — Reply to this email directly, view it on GitHub <#6872?email_source=notifications&email_token=CBLWEDXY75YBD4QX3MSILRT5CX7XVA5CNFSNUABKM5UWIORPF5TWS5BNNB2WEL2QOVWGYUTFOF2WK43UKJSXM2LFO4XTINRRGUYDQMRZGEYKM4TFMFZW63VGMF2XI2DPOKSWK5TFNZ2KYZTPN52GK4S7MNWGSY3L#pullrequestreview-4615082910>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/CBLWEDQA6MUBNUEK3GKIOZ35CX7XVAVCNFSNUABFKJSXA33TNF2G64TZHMZDCOJXGI4DEOJUHNEXG43VMU5TINZYHEZTCNZQHE2KC5QC> . Triage notifications, keep track of coding agent tasks and review pull requests on the go with GitHub Mobile for iOS <https://github.com/notifications/mobile/ios/CBLWEDQ444VXEDRQDCV44C35CX7XVA5CNFSNUABKM5UWIORPF5TWS5BNNB2WEL2QOVWGYUTFOF2WK43UKJSXM2LFO4XTINRRGUYDQMRZGEYKM4TFMFZW63VGMF2XI2DPOKSWK5TFNZ2KUZTPN52GK4S7NFXXG> and Android <https://github.com/notifications/mobile/android/CBLWEDVABF2PILMI3PUOEXL5CX7XVA5CNFSNUABKM5UWIORPF5TWS5BNNB2WEL2QOVWGYUTFOF2WK43UKJSXM2LFO4XTINRRGUYDQMRZGEYKM4TFMFZW63VGMF2XI2DPOKSWK5TFNZ2K4ZTPN52GK4S7MFXGI4TPNFSA>. Download it today! You are receiving this because you authored the thread.Message ID: ***@***.***>

2pasha

good job, but you should pass all CI tests

if you have some troubles - feel free to ask your question in fe_chat 💬

first commit stars page

59fecac

mateacademy-ai-mentor suggested changes Jul 1, 2026

View reviewed changes

finish update stars page

c8b9b16

zobov-dev requested a review from mateacademy-ai-mentor July 1, 2026 21:48

mateacademy-ai-mentor suggested changes Jul 1, 2026

View reviewed changes

fixing indentation

533fb2b

zobov-dev requested a review from mateacademy-ai-mentor July 1, 2026 21:59

mateacademy-ai-mentor suggested changes Jul 1, 2026

View reviewed changes

fixing indentation v2

92d3677

zobov-dev requested a review from mateacademy-ai-mentor July 1, 2026 22:02

brespect suggested changes Jul 2, 2026

View reviewed changes

zobov-dev requested a review from brespect July 2, 2026 06:19

brespect suggested changes Jul 2, 2026

View reviewed changes

zobov-dev added 2 commits July 2, 2026 22:05

npm install

412974f

last up

fdbbf4f

zobov-dev requested a review from brespect July 8, 2026 20:57

2pasha suggested changes Jul 9, 2026

View reviewed changes

etojeDenys approved these changes Jul 9, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

first commit stars page#6872

first commit stars page#6872
zobov-dev wants to merge 6 commits into
mate-academy:masterfrom
zobov-dev:master

zobov-dev commented Jul 1, 2026 •

edited

Loading

Uh oh!

mateacademy-ai-mentor left a comment

Uh oh!

mateacademy-ai-mentor Jul 1, 2026

Uh oh!

mateacademy-ai-mentor left a comment

Uh oh!

mateacademy-ai-mentor left a comment

Uh oh!

brespect left a comment

Uh oh!

brespect left a comment

Uh oh!

zobov-dev commented Jul 2, 2026 via email

Uh oh!

2pasha left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Uh oh!

Conversation

zobov-dev commented Jul 1, 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 Jul 1, 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 left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

brespect 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!

zobov-dev commented Jul 2, 2026 via email

Uh oh!

2pasha left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

zobov-dev commented Jul 1, 2026 •

edited

Loading