layout_stars

[GDG09]

• DEMO LINK

• TEST REPORT LINK

• 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 there are still a few checklist violations and a visual regression failure that together count as critical blockers for this task. Functionally your stars blocks and modifiers are set up well, but stars.css uses the universal selector * { box-sizing: border-box; }, which directly violates [CHECKLIST ITEM #9] and must be removed or replaced with allowed selectors (e.g. html { box-sizing: border-box; } plus .stars, .stars__star { box-sizing: inherit; }). The Backstop tests show noticeable pixel differences for the stars--0 to stars--4 rows, so you need to adjust src/stars.css so that star sizes, spacing, and background behavior match the reference (for example, avoid changing background-size to auto on the active stars and verify the 16×16 size and spacing). In reset.css, reset the default margin on html as well as body so the global margin reset matches the task description while still respecting [CHECKLIST ITEM #10]. In index.html, the long meta viewport line should be wrapped so all lines stay within 80 characters [CHECKLIST ITEM #18], and the commented-out <h1> plus stray blank lines between .stars blocks should be cleaned up to follow the “GOOD example” spacing pattern for sibling blocks. Once you fix the universal selector, align the visual appearance with the reference (re-running Backstop if needed), and address these formatting issues, your solution will fully satisfy both the functional and checklist requirements—overall you’re very close, just need these final adjustments.

---

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

Footnotes

1. Rate AI review example ↩

2. Re-request AI review example ↩

3. Add AI review comments example ↩

[raulriato]

It seems you didn't run npm run deploy after pushing your changes.

Since I can see you made the changes asked, I'll approve, but I highly recommend you run it agains so your portfolio keeps up with your code.