testing try #4965
testing try #4965
Conversation
GrzegorzLasota
commented
Oct 16, 2024
GrzegorzLasota
commented
- DEMO LINK
- TEST REPORT LINK
There was a problem hiding this comment.
Your code is generally well-structured and you've done a great job with indentation and naming conventions! However, there are a few areas that need attention. Please avoid using the body tag for styling and consider using a CSS preprocessor to avoid repeating code. Keep up the good work and remember, every feedback is a step forward in your learning journey! 😊
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
src/style.css
Outdated
| @@ -1 +1,47 @@ | |||
| /* add styles here */ | |||
| body { | |||
| margin: 0; | |||
There was a problem hiding this comment.
Using the body tag to apply styles is against the checklist. It's better to use a class to apply styles. (CSS Checklist: Don't use tag names for styling except html and body)
src/style.css
Outdated
| .stars--1:nth-child(1) { | ||
| background-image: url('./images/star-active.svg'); | ||
| background-repeat: no-repeat; | ||
| background-position: center; | ||
| } | ||
|
|
||
| .stars--2:nth-child(2) { | ||
| background-image: url('./images/star-active.svg'); | ||
| background-repeat: no-repeat; | ||
| background-position: center; | ||
| } | ||
|
|
||
| .stars--3:nth-child(3) { | ||
| background-image: url('./images/star-active.svg'); | ||
| background-repeat: no-repeat; | ||
| background-position: center; | ||
| } | ||
|
|
||
| .stars--4:nth-child(4) { | ||
| background-image: url('./images/star-active.svg'); | ||
| background-repeat: no-repeat; | ||
| background-position: center; | ||
| } | ||
|
|
||
| .stars--5:nth-child(5) { | ||
| background-image: url('./images/star-active.svg'); | ||
| background-repeat: no-repeat; | ||
| background-position: center; | ||
| } |
There was a problem hiding this comment.
There is a lot of repeated code here. To avoid this, you can use a CSS preprocessor like SASS or LESS, which supports variables and mixins. This will help you to keep your code DRY (Don't Repeat Yourself).
There was a problem hiding this comment.
Great job on structuring the HTML file! While there are some suggestions for improving readability, these are minor and don't affect the functionality. Keep up the good work and consider the feedback for future improvements! 😊
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| </div> | ||
|
|
There was a problem hiding this comment.
Consider adding an empty line here to separate sibling blocks and improve readability.
| </div> | ||
|
|
There was a problem hiding this comment.
Consider adding an empty line here to separate sibling blocks and improve readability.
| </div> | ||
|
|
There was a problem hiding this comment.
Consider adding an empty line here to separate sibling blocks and improve readability.
| </div> | ||
|
|
There was a problem hiding this comment.
Consider adding an empty line here to separate sibling blocks and improve readability.
| </div> | ||
|
|
There was a problem hiding this comment.
Consider adding an empty line here to separate sibling blocks and improve readability.
src/style.css
Outdated
| background-position: center; | ||
| width: 16px; | ||
| height: 16px; | ||
| padding: 1px; |
There was a problem hiding this comment.
Consider using only top or bottom margin/padding to avoid potential margin collapse. The checklist suggests being consistent with your margins.
