add task solution #5502
add task solution #5502
Conversation
There was a problem hiding this comment.
Hey there! 👋 The HTML and CSS structure look good overall, and you've correctly implemented the star blocks. However, please address the indentation in src/index.html (use 2 spaces) and add empty lines between multiline HTML blocks. Also, remember that each BEM block should have its own separate CSS file, so split the CSS rules for .stars and .star accordingly. Keep up the great 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.
There was a problem hiding this comment.
The HTML structure is mostly correct, and the code generally follows the guidelines. The indentation and spacing issues have been fixed. Keep up the good work! 🚀
However, there are still some issues that need to be addressed.
In src/index.html, the indentation is still incorrect. Use 2 spaces for indentation and add empty lines between multiline sibling blocks of HTML.
In src/style.css, each BEM block should have its own separate CSS file. You should split the CSS rules for .stars and .star accordingly. Also, according to the checklist, the yellow stars should be added with a container modifier and pseudo-selector (NO extra classes).
I am approving this PR to help you move forward with your learning. Please review the comments and address the mentioned issues to improve your code. Keep up the great work! 💪
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| .stars { | ||
| display: flex; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .stars__star { | ||
| height: 16px; | ||
| width: 16px; | ||
| background-image: url('./images/star.svg'); | ||
| background-repeat: no-repeat; | ||
| background-position: center; | ||
| list-style: none; | ||
| margin-right: 4px; | ||
| } | ||
|
|
||
| .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.
According to the checklist item "Each BEM block has its own separate file", you should split the CSS rules for .stars and .star into separate files.
DEMO LINK: https://mgad83.github.io/layout_stars/
TEST REPORT LINK: https://mgad83.github.io/layout_stars/report/html_report/
Yellow stars are added with container modifier + pseudo-selector (NO extra classes)
Each BEM block has its own separate file
All
Typical MistakesfromBEMlesson theory are checked.Code follows all the Code Style Rules ❗️