Conversation
Jaseniin
commented
Mar 11, 2026
Jaseniin
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 job on the overall structure and implementation of the stars block! The HTML is well-organized, and you've correctly used BEM modifiers to handle the different states.
However, I am requesting one change to meet all the requirements. The task explicitly states, "Don't add vertical margins between blocks." Your current CSS in src/style.css adds a margin-bottom that creates vertical spacing between the .stars blocks. Please remove this property to align the solution with the project specifications.
Once that's fixed, this will be an excellent submission!
✨ 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
| width: 16px; | ||
| height: 16px; | ||
| margin-right: 4px; | ||
| margin-bottom: 4px; |
There was a problem hiding this comment.
This margin-bottom property creates vertical spacing between the .stars blocks. The task description explicitly states, "Don't add vertical margins between blocks."
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Excellent work fixing the vertical margin issue! The component now functions perfectly and meets all visual requirements.
However, one structural change is needed before this can be approved. The project checklist requires that 'Each BEM block must have its own separate file'. Currently, all styles for the .stars block are located in src/style.css.
Please move all CSS rules related to the .stars block into a new, dedicated file, such as src/stars.css, and then update the <link> in index.html to reference it. This is a crucial practice for maintainability.
Once that small change is made, your solution will be perfect. Great progress!
✨ 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
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Sorry, the pull request review was unsuccessful for the following reasons:
Warning
No changes were made in the pull request since the last review. Please make sure that you have added files to the pull request and committed the changes.
[CODE: NCM]
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
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
I am approving this solution as an educational override to help you move forward. Your implementation of the stars component is visually perfect, and your use of BEM in the HTML is excellent!
The one piece of feedback that still needs attention for future projects is the file structure. A core principle of BEM is modularity, which means each block should have its own file. All CSS rules for the .stars block should have been moved into a new, dedicated file (e.g., src/stars.css) and then linked in index.html [CHECKLIST ITEM #2].
Overall, you've done a great job with the styling logic. Keep up the fantastic work!
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Footnotes
| .stars { | ||
| display: flex; | ||
| } | ||
|
|
||
| .stars__star { | ||
| width: 16px; | ||
| height: 16px; | ||
| margin-right: 4px; | ||
| background-image: url(images/star.svg); | ||
| background-repeat: no-repeat; | ||
| background-position: center; | ||
| } | ||
|
|
||
| .stars__star:last-child { | ||
| margin-right: 0; | ||
| } | ||
|
|
||
| .stars--1 .stars__star:nth-child(-n + 1) { | ||
| background-image: url(images/star-active.svg); | ||
| } | ||
|
|
||
| .stars--2 .stars__star:nth-child(-n + 2) { | ||
| background-image: url(images/star-active.svg); | ||
| } | ||
|
|
||
| .stars--3 .stars__star:nth-child(-n + 3) { | ||
| background-image: url(images/star-active.svg); | ||
| } | ||
|
|
||
| .stars--4 .stars__star:nth-child(-n + 4) { | ||
| background-image: url(images/star-active.svg); | ||
| } | ||
|
|
||
| .stars--5 .stars__star:nth-child(-n + 5) { | ||
| background-image: url(images/star-active.svg); | ||
| } |
There was a problem hiding this comment.
This violates checklist item #2: 'Each BEM block has its own separate file'.
As mentioned in the previous review, all styles for the .stars block should be moved into a dedicated file (e.g., src/stars.css). The main style.css should only contain general styles like the body reset, or be removed if all styles are component-based.
2 participants
