add task solution

[Robert-Mans]

• 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]

Hey! 👋 The HTML structure is good, but the CSS needs some adjustments. You're using tag names (div) for styling, but the task requires using container modifiers and pseudo-selectors for the yellow stars instead of adding extra classes or using tag names. Also, each BEM block should have its own separate file according to the task description. Finally, please add empty lines between multi-line sibling blocks of HTML to improve readability. Keep up the good work! ✨

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

🤖 If you have any comments about this review, please leave a message in the Add a comment field below and mention me with @mateacademy-ai-mentor tag. I will read your message when I perform the next review of your pull request.

[mateacademy-ai-mentor]

Consider adding an empty line between multi-line sibling blocks of HTML to improve readability, as described in the checklist under "HTML Formatting".

[mateacademy-ai-mentor]

Consider adding an empty line between multi-line sibling blocks of HTML to improve readability, as described in the checklist under "HTML Formatting".

[mateacademy-ai-mentor]

Consider adding an empty line between multi-line sibling blocks of HTML to improve readability, as described in the checklist under "HTML Formatting".

[mateacademy-ai-mentor]

Consider adding an empty line between multi-line sibling blocks of HTML to improve readability, as described in the checklist under "HTML Formatting".

[mateacademy-ai-mentor]

Consider adding an empty line between multi-line sibling blocks of HTML to improve readability, as described in the checklist under "HTML Formatting".

[mateacademy-ai-mentor]

Consider adding an empty line between multi-line sibling blocks of HTML to improve readability, as described in the checklist under "HTML Formatting".

[mateacademy-ai-mentor]

This styling uses tag names (div), which is not recommended. According to the task description, "Yellow stars are added with container modifier + pseudo-selector (NO extra classes)". Consider using a pseudo-selector to target the stars__star elements directly based on the parent's modifier class. Also, the task description says: "Each BEM block has its own separate file".

[Robert-Mans]

What is BEM?

[mateacademy-ai-mentor]

Great job completing the task! ✨ While the HTML structure is well-formatted and follows the instructions, there are a few things to keep in mind for future improvements:

• CSS Adjustments: You're using tag names (div) for styling, but the task requires using container modifiers and pseudo-selectors for the yellow stars instead of adding extra classes or using tag names. Also, each BEM block should have its own separate file according to the task description.
• File Structure: Remember that the task requires each BEM block to be in its own separate file. Currently, all CSS code is in a single style.css file.
• Selectors: Avoid using tag names (.stars--5 div, .stars--1 div:nth-child(1)) for styling. Instead, use container modifiers and pseudo-selectors as required by the task.
• HTML Formatting: Ensure there are empty lines between multi-line sibling blocks of HTML in src/index.html.

These points were considered when making the decision. Keep up the great work, and keep learning! 🚀

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

[mateacademy-ai-mentor]

According to the task requirements, you should reset the browser's default margin. Looks like you've done that, so this is correct.

[mateacademy-ai-mentor]

You're using tag names (div) for styling, but the task requires using container modifiers and pseudo-selectors for the yellow stars instead of adding extra classes or using tag names. Please, check the checklist item:

• Yellow stars are added with container modifier + pseudo-selector (NO extra classes)