-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
add task solution #4864
base: master
Are you sure you want to change the base?
add task solution #4864
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It looks like there are a few issues that need to be addressed before we can approve the Pull Request. These include a code style issue with spacing, an incorrect comment regarding line-height, and an incorrect file path in the href attribute. Once these are fixed, your code will be in great shape! Keep up the good work and don't hesitate to reach out if you need any help. 😊
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
src/index.html
Outdated
<link | ||
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The href attribute in the link tag should point to a CSS file, not an SCSS file. Ensure that the path is correct and that the file is compiled to CSS.
src/styles/blocks/card.scss
Outdated
border-radius: 5px; | ||
|
||
font-size: 14px; | ||
line-height: 40px; /* 16/14 */ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The comment '/* 16/14 */' seems incorrect for the line-height property. It should reflect the actual line-height ratio, which is 40/14 in this case.
src/styles/blocks/stars.scss
Outdated
} | ||
} | ||
|
||
&--4 :nth-child(-n + 4) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There is an extra space between &--4
and :nth-child(-n + 4)
. According to the code style rules, there should be no space between the element and the pseudo-class.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It looks like there are a few issues that need to be addressed before we can proceed. Specifically, the mixins regular-text
and small-text
need to be verified for their definitions, and the link tag should point to a CSS file instead of a SCSS file. Once these are resolved, you'll be all set! 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
<link | ||
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The href attribute in the link tag should point to a CSS file, not a SCSS file. Ensure that the correct CSS file is linked here.
src/styles/blocks/card.scss
Outdated
|
||
.description { | ||
&__name { | ||
@include regular-text; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Issue: The mixin regular-text
is used here, but it's not clear if it is defined in the project. Ensure that the mixin is defined in your mixins file or imported correctly.
src/styles/blocks/card.scss
Outdated
&__code { | ||
color: $secondary-color; | ||
|
||
@include small-text; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Issue: The mixin small-text
is used here, but it's not clear if it is defined in the project. Ensure that the mixin is defined in your mixins file or imported correctly.
src/styles/blocks/card.scss
Outdated
|
||
.rate { | ||
&__reviews { | ||
@include small-text; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Issue: The mixin small-text
is used here, but it's not clear if it is defined in the project. Ensure that the mixin is defined in your mixins file or imported correctly.
src/styles/blocks/card.scss
Outdated
&__text { | ||
color: $secondary-color; | ||
|
||
@include regular-text; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Issue: The mixin regular-text
is used here, but it's not clear if it is defined in the project. Ensure that the mixin is defined in your mixins file or imported correctly.
src/styles/blocks/stars.scss
Outdated
} | ||
} | ||
|
||
&--4 :nth-child(-n + 4) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There is an extra space between '&--4' and ':nth-child(-n + 4)'. According to the code style rules, there should be no space between the element and the pseudo-class.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great work on the HTML and SCSS structure! 🎉 While there are a few minor issues with class naming and spacing according to BEM conventions, you've done a solid job overall. Please review the comments to refine your code further. Keep up the good work and continue learning from these experiences!
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
src/styles/blocks/card.scss
Outdated
} | ||
} | ||
|
||
.description { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The class name .description
might conflict with the BEM naming convention used in the .card
block. Consider using a more specific class name that follows the BEM convention, such as .card__description
.
src/styles/blocks/card.scss
Outdated
} | ||
} | ||
|
||
.rate { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The class name .rate
might conflict with the BEM naming convention used in the .card
block. Consider using a more specific class name that follows the BEM convention, such as .card__rate
.
src/styles/blocks/card.scss
Outdated
} | ||
} | ||
|
||
.price { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The class name .price
might conflict with the BEM naming convention used in the .card
block. Consider using a more specific class name that follows the BEM convention, such as .card__price
.
src/styles/blocks/stars.scss
Outdated
} | ||
} | ||
|
||
&--4 :nth-child(-n + 4) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There is an extra space between &--4
and :nth-child(-n + 4)
. According to the code style rules, there should be no space between the element and the pseudo-class.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks great 🔥
<img | ||
class="card__image" | ||
src="./images/imac.jpeg" | ||
alt="Imac image" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
DEMO LINK
TEST REPORT LINK
there 2 BEM blocks
card
andstars
each in it own fileSCSS Nesting is used for
elements
,modifiers
andpseudo-classes
SCSS Variables are used for main values and placed in a separate file
all
stars--N
modifiers work as expected (Highlight firstN
stars)Code follows all the Code Style Rules ❗️