add task solution #4873
add task solution #4873
Conversation
Shmyhelskiy
commented
Sep 29, 2024
Shmyhelskiy
commented
- DEMO LINK
- TEST REPORT LINK
There was a problem hiding this comment.
Great job on your Pull Request! 🌟 Just a few minor suggestions: consider adding a fallback font-family, optimizing your CSS for performance, and improving the readability of your HTML through consistent indentation and spacing. Keep up the good work, and these small tweaks will make your code even better! 👍
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| <div class="stars stars--0"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> | ||
| <div class="stars stars--1"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> | ||
| <div class="stars stars--2"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> | ||
| <div class="stars stars--3"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> | ||
| <div class="stars stars--4"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> | ||
| <div class="stars stars--5"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> |
There was a problem hiding this comment.
Add empty lines between multiline sibling blocks of HTML to add some 'air' and simplify reading. However, don't add them between parent and child elements. Insert empty lines between the different 'stars' div blocks.
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| } |
There was a problem hiding this comment.
Avoid using the universal selector '*' for setting margin and padding to zero as it impacts performance. It's better to set styles only for the elements that require them.
| .stars__star { | ||
| width: 16px; | ||
| height: 16px; | ||
| background-image: url(images/star.svg); | ||
| background-size: contain; | ||
| margin-right: 4px; | ||
| } |
There was a problem hiding this comment.
Consider specifying a fallback font-family for .stars__star in case the main font doesn't load. This ensures that the text remains legible and the layout consistent across different environments.
