add task solution

[MissDragi]

• DEMO LINK

• TEST REPORT LINK

• there 2 BEM blocks card and stars each in their own file

• SCSS Nesting is used for elements, modifiers and pseudo-classes

• SCSS Variables are used for main values and placed in a separate file

• all stars--N modifiers work as expected (Highlight first N stars)

• Code follows all the Code Style Rules ❗️

[mateacademy-ai-mentor]

---

Hello! 😊 You've done a great job with the HTML, CSS, and SCSS files, and most of your code meets the task requirements. However, there are a few critical issues that need to be addressed before we can approve the pull request:

1. SCSS Variables: The task requires the use of SCSS variables for main values, which should be placed in a separate file. This is currently missing, so please ensure to define and use SCSS variables appropriately.

2. BEM File Organization: The task specifies that each BEM block (card and stars) should have its own file. Currently, the files are not organized according to BEM methodology. Please separate them into individual files.

3. Background Image URL: The background-image: url() should be relative to the index.scss and start with ../images. The current implementation uses an absolute path, which needs to be corrected.

4. SCSS Nesting: There is an incorrect use of the & selector in the SCSS for the stars component. The selector should be .stars--4 .stars__star:nth-child(-n + 4) to correctly target the first four stars.

5. Unnecessary Files: Since SCSS is being used and compiled by Parcel, the card.css and stars.css files are not needed and should be removed to avoid confusion.

Please address these issues to ensure your code fully meets the task requirements. Keep up the great work, and I'm confident you'll have this sorted out in no time! 🚀

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

🔄 Fix the issues, commit the changes, and then re-request my review using the Re-request review button in the Reviewers tab.

[mateacademy-ai-mentor]

The selector '.stars--4 &__star:nth-child(-n + 4)' is incorrect. The '&' should be used to refer to the parent selector, but here it is used incorrectly. It should be '.stars--4 .stars__star:nth-child(-n + 4)' to correctly target the first four stars within an element with the 'stars--4' class.

[mateacademy-ai-mentor]

Great job on your progress! 🎉 Your HTML and SCSS files are well-structured, and you've effectively used BEM methodology. However, there are a few areas to improve:

1. SCSS Variables: Create a separate file for SCSS variables to manage main values efficiently.
2. Unnecessary Files: Remove the index.css file to avoid confusion since SCSS is being compiled by Parcel.
3. Universal Selector: Avoid using the universal selector (*) for resetting margins to prevent performance issues.
4. Background Image URL: Ensure the background-image: url() path is correct and relative to index.scss.

These adjustments will enhance your code quality. Keep up the great work, and make sure to address these points in future projects to continue improving your skills! 🚀

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

[mateacademy-ai-mentor]

The background-image: url() should be relative to the index.scss and start with ../images. Please ensure the path is correct as per the task requirements.

[mateacademy-ai-mentor]

The use of a universal selector (*) for resetting margins is generally not recommended as it can lead to performance issues. Consider using a more specific selector or a CSS reset/normalize file.

[mateacademy-ai-mentor]

This file seems to be a compiled CSS file from your SCSS sources. Since you are using SCSS and Parcel for compilation, this file is unnecessary and should be removed to prevent redundancy and potential confusion.