add solution #4851
add solution #4851
Conversation
There was a problem hiding this comment.
Hey there! 👋 It looks like there are a few important things to address in your Pull Request. The file path for the image seems to be incorrect, which could lead to broken images in your project. Additionally, there's a bit of a mix-up with the CSS selector that won't select any elements. Also, remember to apply styles directly to the body tag when possible, and watch out for the formatting in your HTML to keep everything tidy and readable! These adjustments are key to making your code work correctly and look its best. Keep up the good work, and with a few tweaks, you'll be all set! 🚀
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
There was a problem hiding this comment.
It looks like there are a few issues that need your attention to ensure your code is in tip-top shape! 🛠️ While the problems mentioned don't seem to critically impact the functionality of your CSS, they do go against the best practices that we aim for. Let's address the file naming inconsistencies, ensure proper formatting, and add those fallbacks and empty lines where needed for better readability. These tweaks will not only make your code look professional but also easier to maintain in the long run! Keep up the good work, and with these small adjustments, your code will be even better! 👍
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
src/index.html
Outdated
| <html lang="en"> | ||
| <html | ||
| lang="en" | ||
| > |
There was a problem hiding this comment.
The opening HTML tag should be on a single line. Please combine lines 2-4.
| @@ -13,6 +15,53 @@ | |||
| /> | |||
| </head> | |||
| <body> | |||
| <h1>Stars</h1> | |||
|
|
|||
| <div class="stars stars--0"> | |||
There was a problem hiding this comment.
There should be an empty line between sibling elements to add some 'air' and simplify reading, as per the checklist.
src/index.html
Outdated
| <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> |
There was a problem hiding this comment.
Add an empty line before this sibling block for better readability.
src/index.html
Outdated
| <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> |
There was a problem hiding this comment.
Add an empty line before this sibling block for better readability.
src/index.html
Outdated
| <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> |
There was a problem hiding this comment.
Add an empty line before this sibling block for better readability.
src/style.css
Outdated
| .stars--1 .stars__star:nth-child(-n + 1) { | ||
| background-image: url(./images/star-active.svg); | ||
| } |
There was a problem hiding this comment.
The file name star-active.svg should be star_actived.png to match the file structure. Please correct the file extension and name.
src/style.css
Outdated
| .stars--2 .stars__star:nth-child(-n + 2) { | ||
| background-image: url(./images/star-active.svg); | ||
| } |
There was a problem hiding this comment.
Again, the file name should be star_actived.png instead of star-active.svg. Ensure that the file names are consistent with the provided file structure.
src/style.css
Outdated
| .stars--3 .stars__star:nth-child(-n + 3) { | ||
| background-image: url(./images/star-active.svg); | ||
| } |
There was a problem hiding this comment.
The file name should be star_actived.png instead of star-active.svg. Please correct the file names to maintain consistency with the file structure.
src/style.css
Outdated
| .stars--4 .stars__star:nth-child(-n + 4) { | ||
| background-image: url(./images/star-active.svg); | ||
| } |
There was a problem hiding this comment.
The file name should be star_actived.png instead of star-active.svg. Make sure to update the file name to match the provided file structure.
src/style.css
Outdated
| .stars--5 .stars__star:nth-child(-n + 5) { | ||
| background-image: url(./images/star-active.svg); | ||
| } |
There was a problem hiding this comment.
The file name should be star_actived.png instead of star-active.svg. Correct the file name to align with the file structure.
There was a problem hiding this comment.
While there are several issues that need attention, such as the incorrect CSS selector, the need for a fallback font-family, consistent indentation, and proper formatting of attributes, I'm approving this Pull Request to help you move forward. Please review and address these issues to improve your code. Keep up the good work, and always strive for clean, readable, and maintainable code! 🚀💻
✨ 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> |
There was a problem hiding this comment.
Add an empty line between sibling blocks of HTML for readability, but do not add them between parent and child elements.
| <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> |
There was a problem hiding this comment.
Add an empty line between sibling blocks of HTML for readability, but do not add them between parent and child elements.
| <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> |
There was a problem hiding this comment.
Add an empty line between sibling blocks of HTML for readability, but do not add them between parent and child elements.
| <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> |
There was a problem hiding this comment.
Add an empty line between sibling blocks of HTML for readability, but do not add them between parent and child elements.
| <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> |
There was a problem hiding this comment.
Add an empty line between sibling blocks of HTML for readability, but do not add them between parent and child elements.
| <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 an empty line between sibling blocks of HTML for readability, but do not add them between parent and child elements.
| .stars__star { | ||
| width: 16px; | ||
| height: 16px; | ||
| margin-right: 4px; | ||
| background-image: url(./images/star_desactived.png); | ||
| background-position: center; | ||
| background-repeat: no-repeat; | ||
| } |
There was a problem hiding this comment.
Consider adding a fallback font-family for your icons in case the image fails to load, ensuring that some form of icon is still displayed.
| background-repeat: no-repeat; | ||
| } | ||
|
|
||
| .stars--0 .stars__star:nth-child(-n + 0) { |
There was a problem hiding this comment.
It seems there is a mistake with the selector '.stars--0 .stars__star:nth-child(-n + 0)'. The ':nth-child(-n + 0)' part will never select any elements because it's asking for the 0th child and there is no such thing. If you want to select no stars in a 'stars--0' case, you can omit the rule entirely.
No description provided.