add task solution #4667

Menwell · 2024-09-13T00:09:01Z

❗️ Copy this Checklist to the Pull Request description after links, and put - [x] before each point after you checked it.

All component follow BEM and use SCSS
repaeted sizes and special colors are put to variables
Grid is used for the columns
cards are shown in 1, 2, 3 or 4 columns based on screen resolution
All changes on :hover are smooth
Code follows all the Code Style Rules ❗️

mateacademy-ai-mentor

Great effort on the structure and organization of your SCSS files! 👏 However, before approving, we need to address a few critical issues to ensure the functionality and maintainability of your code:

Update the paths used for linking resources and images to be relative and correctly enclosed in quotes. This will ensure that your resources load correctly on all platforms.
Implement the DRY principle to avoid code repetition, which will make your codebase more maintainable in the long run.
Correct the use of CSS properties, such as align-items and transform, to ensure that your styles work as intended across all browsers.
Refactor code to use variables for repetitive values and ensure adherence to the code style rules, like using kebab-case for variable names and including a generic font family as a fallback.

Once these changes are made, your code will be in great shape! Keep up the good work, and remember to test your paths and styles across different browsers to catch any compatibility issues. 🛠️💻

✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨

mateacademy-ai-mentor · 2024-09-13T00:09:38Z

src/index.html

+        class="header__logo"
+      >
+        <img
+          src="/src/images/logo.png"


Avoid using absolute paths for images, use relative paths instead. This ensures that the image can be accessed regardless of the domain or directory structure.

mateacademy-ai-mentor · 2024-09-13T00:09:38Z

src/index.html

+        class="card"
+      >
+        <img
+          src="./images/imac.jpeg"


The src attribute should use a relative path, not a path that looks like it's absolute. Use './images/imac.jpeg' instead of '/src/images/imac.jpeg'.

mateacademy-ai-mentor · 2024-09-13T00:09:38Z

src/index.html

+
+      <div class="card">
+        <img
+          src="/src/images/imac.jpeg"


The src attribute should use a relative path, not a path that looks like it's absolute. Use './images/imac.jpeg' instead of '/src/images/imac.jpeg'.

mateacademy-ai-mentor · 2024-09-13T00:09:38Z

src/index.html

+      <div
+        data-qa="card"
+        class="card"
+      >
+        <img
+          src="./images/imac.jpeg"
+          alt="product"
+          class="card__image"
+        />
+
+        <h2 class="card__name">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </h2>
+
+        <p class="card__code">Product code: 195434</p>
+
+        <div class="card__rates">
+          <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>
+
+          <p class="card__rates-reviews">Reviews: 5</p>
+        </div>
+
+        <div class="card__price">
+          <p class="card__price-text">Price:</p>
+
+          <p class="card__price-cost">$2,199</p>
+        </div>
+
+        <button
+          class="card__button"
+          data-qa="card-hover"
+        >


Repeated code: The card component is repeated multiple times with the same content. Consider using a loop to generate these cards if you are using a templating engine or a front-end framework. If you are not using a templating engine, at least ensure that the content is unique for each card if they are meant to be different.

mateacademy-ai-mentor · 2024-09-13T00:09:38Z

src/styles/blocks/card.scss

+  border: 1px solid $main-card-border-color;
+  border-radius: 5px;
+  padding: 32px 16px 16px;
+  transition: scale 0.3s;


The CSS property for transitions should be transform instead of scale. Replace scale with transform to fix the transition effect.

mateacademy-ai-mentor · 2024-09-13T00:09:40Z

src/styles/blocks/page.scss

@@ -0,0 +1,10 @@
+html {
+  font-family: Roboto, serif;


According to the Code Style Rules ❗️, font-families should be listed with fallbacks. It's a good practice to include a generic font family as a fallback. In this case, 'sans-serif' should be used instead of 'serif' as 'Roboto' is a sans-serif font.

mateacademy-ai-mentor · 2024-09-13T00:09:40Z

src/styles/blocks/stars.scss

+  @for $i from 1 through 5 {
+    &--#{$i} &__star:nth-child(-n + #{$i}) {
+      background-image: url(../images/star-active.svg);
+    }
+  }


According to the Code Style Rules ❗️, when using SCSS loops, it's recommended to include a newline after the opening brace { and before the closing brace } to improve readability.

mateacademy-ai-mentor · 2024-09-13T00:09:40Z

src/styles/blocks/stars.scss

+  }
+
+  &__star {
+    background-image: url(../images/star.svg);


The paths to the images should be enclosed in quotes according to the code style rules.

mateacademy-ai-mentor · 2024-09-13T00:09:40Z

src/styles/blocks/stars.scss

+
+  @for $i from 1 through 5 {
+    &--#{$i} &__star:nth-child(-n + #{$i}) {
+      background-image: url(../images/star-active.svg);


The paths to the images should be enclosed in quotes according to the code style rules.

mateacademy-ai-mentor · 2024-09-13T00:09:40Z

src/styles/blocks/stars.scss

+    width: 16px;
+    height: 16px;


It's better to store repetitive values such as the width and height of the stars in variables for easier maintenance and to avoid magic numbers. Consider adding them to src/styles/utils/variables.scss.

Menwell · 2024-09-13T00:53:16Z

here in the task deploy doesn't work here is a screenshot with all the tests, I completed the task a week ago, tried everything, wrote to mentors, nothing helps, here is a screenshot

volodymyr-soltys97

Hi, your demo link isn't working, you need to make a deploy and check it after on the demo

volodymyr-soltys97 · 2024-09-13T06:02:47Z

src/index.html

+      <nav class="header__navigation navigation">
+        <ul class="navigation__list">
+          <li class="navigation__item">
+            <a
+              class="navigation__link is-active"


Suggested change

<nav class="header__navigation navigation">

<ul class="navigation__list">

<li class="navigation__item">

<a

class="navigation__link is-active"

<nav class="nav">

<ul class="na__list">

<li class="nav__item">

<a

class="nav__link is-active"

volodymyr-soltys97 · 2024-09-13T06:03:12Z

src/index.html

+          </li>
+          <li class="navigation__item">


Add the blank line between the links

Suggested change

</li>

<li class="navigation__item">

</li>

<li class="navigation__item">

volodymyr-soltys97 · 2024-09-13T06:03:52Z

src/styles/blocks/card.scss

+  transition: scale 0.3s;
+
+  &:hover {
+    scale: 1.2;


volodymyr-soltys97 · 2024-09-13T06:04:08Z

src/styles/blocks/card.scss

+    font-size: 12px;
+    font-weight: 500;
+    line-height: 18px;
+    letter-spacing: 0%;


anastasiiavorobiova

Great work! Consider deploying the page and fixing AI comments

anastasiiavorobiova · 2024-09-13T12:24:05Z

src/styles/blocks/navigation.scss

+
+.is-active::after {
+  content: '';
+  width: 37px;


Suggested change

width: 37px;

width: 100%;

add task solution

d20bab2

mateacademy-ai-mentor suggested changes Sep 13, 2024

View reviewed changes

Menwell added 2 commits September 13, 2024 02:28

add task solution

9e2fd52

fixed bags

22514d9

Menwell requested a review from mateacademy-ai-mentor September 13, 2024 00:31

volodymyr-soltys97 suggested changes Sep 13, 2024

View reviewed changes

fixed bag

d9b72b0

Menwell requested a review from volodymyr-soltys97 September 13, 2024 12:10

anastasiiavorobiova suggested changes Sep 13, 2024

View reviewed changes

src/styles/blocks/navigation.scss

.is-active::after {

content: '';

width: 37px;

Copy link

anastasiiavorobiova Sep 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change

width: 37px;

width: 100%;

Menwell closed this by deleting the head repository Sep 14, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add task solution #4667

add task solution #4667

Menwell commented Sep 13, 2024

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Sep 13, 2024

mateacademy-ai-mentor Sep 13, 2024

mateacademy-ai-mentor Sep 13, 2024

mateacademy-ai-mentor Sep 13, 2024

mateacademy-ai-mentor Sep 13, 2024

mateacademy-ai-mentor Sep 13, 2024

mateacademy-ai-mentor Sep 13, 2024

mateacademy-ai-mentor Sep 13, 2024

mateacademy-ai-mentor Sep 13, 2024

mateacademy-ai-mentor Sep 13, 2024

Menwell commented Sep 13, 2024

volodymyr-soltys97 left a comment

volodymyr-soltys97 Sep 13, 2024

volodymyr-soltys97 Sep 13, 2024

volodymyr-soltys97 Sep 13, 2024

volodymyr-soltys97 Sep 13, 2024

anastasiiavorobiova left a comment

anastasiiavorobiova Sep 13, 2024

add task solution #4667

add task solution #4667

Conversation

Menwell commented Sep 13, 2024

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Menwell commented Sep 13, 2024

volodymyr-soltys97 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

anastasiiavorobiova left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment