Card #4876
Card #4876
Conversation
SemenVodolazskij
commented
Oct 16, 2024
SemenVodolazskij
commented
- DEMO LINK
- TEST REPORT LINK
There was a problem hiding this comment.
The issue with linking to the SCSS file instead of the compiled CSS file needs to be addressed as it impacts the functionality of the code. Please make this change and resubmit. Keep up the great work! 😊
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
src/index.html
Outdated
| href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" | ||
| rel="stylesheet" | ||
| /> | ||
|
|
||
| <link | ||
| rel="stylesheet" | ||
| href="./styles/index.scss" |
There was a problem hiding this comment.
The href attribute in the link tag should point to a CSS file, not an SCSS file. Please ensure you are linking to the compiled CSS file instead of the SCSS source file.
src/styles/index.scss
Outdated
| @@ -1,3 +1,95 @@ | |||
| body { | |||
| margin: 0; | |||
| font-family: Roboto, sans-serif, Arial; | |||
There was a problem hiding this comment.
The font-family declaration should list the generic family name 'sans-serif' last, after specific font names like 'Roboto' and 'Arial'. This ensures that if none of the specified fonts are available, a generic sans-serif font will be used.
There was a problem hiding this comment.
It looks like there's a critical issue with linking the SCSS file directly, which can affect the functionality of the webpage. Please compile the SCSS into CSS and update the link to ensure everything works smoothly. Keep up the great work, and you'll have this sorted in no time! 😊
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
src/index.html
Outdated
| href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" | ||
| rel="stylesheet" | ||
| /> | ||
|
|
||
| <link | ||
| rel="stylesheet" | ||
| href="./styles/index.scss" |
There was a problem hiding this comment.
The stylesheet link references a SCSS file (index.scss). Typically, browsers do not directly understand SCSS files, so you should compile your SCSS into CSS and link to the resulting CSS file instead.
There was a problem hiding this comment.
Great job on the HTML structure! While there are some issues related to class naming conventions and accessibility, these are excellent learning opportunities. Please review the comments to enhance your code quality. Remember, addressing these points will help you avoid similar issues in the future. Keep up the good work and continue improving! 🚀
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| <div class="stars_active"></div> | ||
| <div class="stars_active"></div> | ||
| <div class="stars_active"></div> | ||
| <div class="stars_active"></div> |
There was a problem hiding this comment.
It seems like you have multiple divs with the class 'stars_active'. If these are meant to represent individual stars in a rating system, consider using a more semantic approach, such as using a list or a span with appropriate ARIA attributes for better accessibility.
| @@ -0,0 +1,95 @@ | |||
| body { | |||
| margin: 0; | |||
| font-family: Roboto, sans-serif, Arial; | |||
There was a problem hiding this comment.
The font-family property should list generic font families at the end. Consider placing 'Arial' before 'sans-serif'.
| background-image: url(../images/imac.jpeg); | ||
| } | ||
|
|
||
| .product_code { |
There was a problem hiding this comment.
Class names should use hyphens instead of underscores according to the BEM naming convention. Consider renaming '.product_code' to '.product-code'.
| line-height: 14px; | ||
| } | ||
|
|
||
| .star_review { |
There was a problem hiding this comment.
Class names should use hyphens instead of underscores according to the BEM naming convention. Consider renaming '.star_review' to '.star-review'.
| justify-content: space-between; | ||
| } | ||
|
|
||
| .reviews { |
There was a problem hiding this comment.
Class names should use hyphens instead of underscores according to the BEM naming convention. Consider renaming '.reviews' to '.review'.
| margin-right: 4px; | ||
| } | ||
|
|
||
| .stars { |
There was a problem hiding this comment.
Class names should use hyphens instead of underscores according to the BEM naming convention. Consider renaming '.stars' to '.star'.
| margin-right: 4px; | ||
| } | ||
|
|
||
| .price { |
There was a problem hiding this comment.
Class names should use hyphens instead of underscores according to the BEM naming convention. Consider renaming '.price' to '.pricing'.
| margin-bottom: 16px; | ||
| } | ||
|
|
||
| .text_price { |
There was a problem hiding this comment.
Class names should use hyphens instead of underscores according to the BEM naming convention. Consider renaming '.text_price' to '.text-price'.
| color: #616070; | ||
| } | ||
|
|
||
| .numeric_price { |
There was a problem hiding this comment.
Class names should use hyphens instead of underscores according to the BEM naming convention. Consider renaming '.numeric_price' to '.numeric-price'.
| font-weight: 700; | ||
| } | ||
|
|
||
| .button_buy { |
There was a problem hiding this comment.
Class names should use hyphens instead of underscores according to the BEM naming convention. Consider renaming '.button_buy' to '.button-buy'.
