Develop #4964

IvanIlnytskyy · 2024-12-30T12:37:08Z

mateacademy-ai-mentor

Great job on meeting most of the task requirements! 🎉 While there are a few areas for improvement, such as ensuring unique content for SEO, addressing redundant styles, and adding consistency in class attributes, these are minor issues that don't critically impact the functionality. Keep up the good work and consider these suggestions for future enhancements! 😊

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

mateacademy-ai-mentor · 2024-12-30T12:38:06Z

src/index.html

+              Photo
+            </a>
+          </li>
+          <li>


The last list item in the navigation does not have a class attribute like the others. Consider adding a class for consistency and easier styling.

mateacademy-ai-mentor · 2024-12-30T12:38:06Z

src/index.html

+          data-qa="card"
+        >
+          <img
+            src="./images/imac.jpeg"


The image source for the product card is repeated multiple times. If these are meant to be different products, ensure each has a unique image and description.

mateacademy-ai-mentor · 2024-12-30T12:38:06Z

src/index.html

+          />
+          <div class="content">
+            <h2 class="content__title">
+              APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)


The product title and description are repeated for each product card. Consider using unique content for each card to improve SEO and user engagement.

mateacademy-ai-mentor · 2024-12-30T12:38:07Z

src/index.html

+              <div class="price__numeric">$2,199</div>
+            </div>
+            <a
+              href="#"


The href attribute for the 'BUY' button is set to '#', which is a placeholder. Ensure this links to the appropriate product page or action.

mateacademy-ai-mentor · 2024-12-30T12:38:07Z

src/styles/index.scss

+    &:hover {
+      display: block;
+      text-align: center;
+      padding: 12px;
+      font-size: 14px;
+      line-height: 16px;
+      text-decoration: none;
+      border-radius: 5px;
+      font-weight: 700;
+      position: relative;
+      background-color: $white;
+      color: $color;
+      box-sizing: border-box;
+      border: 1px solid $color;


The styles within the &:hover block for .bottom are mostly redundant with the styles defined outside of it. Consider removing the redundant properties to simplify the code.

mateacademy-ai-mentor · 2024-12-30T12:38:07Z

src/styles/index.scss

+    gap: 4px;
+    margin-right: 4px;
+
+    &:nth-child(-n + 4) {


The use of :nth-child(-n + 4) selector is correct for styling the first four stars as active. Ensure that this logic aligns with the intended design for the star rating system.

volodymyr-soltys97

Good job 👍
Let's improve your code

volodymyr-soltys97 · 2024-12-30T14:48:04Z

src/index.html

@@ -22,6 +22,389 @@
  </head>

  <body>
-    <h1>Catalog</h1>
+    <!-- #region header -->


Remove all comments

Suggested change

volodymyr-soltys97 · 2024-12-30T14:48:10Z

src/index.html

+      </a>
+      <nav class="nav">


Suggested change

</a>

<nav class="nav">

</a>

<nav class="nav">

volodymyr-soltys97 · 2024-12-30T14:48:29Z

src/index.html

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


Add the blank line between the links

Suggested change

</li>

<li class="nav__item">

</li>

<li class="nav__item">

volodymyr-soltys97 · 2024-12-30T14:49:48Z

src/index.html

+            <div class="mark__stars">
+              <span class="star"></span>
+              <span class="star"></span>
+              <span class="star"></span>
+              <span class="star"></span>
+              <span class="star"></span>


You need to use this block the previous tasks, fix classes everywhere and add the modifier class

Suggested change

<div class="mark__stars">

<span class="star"></span>

<span class="star"></span>

<span class="star"></span>

<span class="star"></span>

<span class="star"></span>

<div class="stars stars--4">

<span class="stars__star"></span>

<span class="stars__star"></span>

<span class="stars__star"></span>

<span class="stars__star"></span>

<span class="stars__star"></span>

src/index.html

volodymyr-soltys97 · 2024-12-30T14:52:54Z

src/styles/index.scss

+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #fff;


This color is default

Suggested change

background-color: #fff;

volodymyr-soltys97 · 2024-12-30T14:53:35Z

src/styles/index.scss

 }
+
+$hover-text-color: #34568b;
+$color: #00acdc;


Use a more descriptive name for this color, fix it everywhere

Suggested change

$color: #00acdc;

$main-color: #00acdc;

volodymyr-soltys97 · 2024-12-30T14:53:54Z

src/styles/index.scss

+.catalog {
+  display: grid;
+  gap: 46px 48px;
+  padding: 50px 40px;
+  align-items: center;
+  justify-content: center;
+
+  @media (min-width: 488px) {
+    grid-template-columns: repeat(2, 200px);
+  }
+
+  @media (min-width: 768px) {
+    grid-template-columns: repeat(3, 200px);
+  }
+
+  @media (min-width: 1024px) {
+    grid-template-columns: repeat(4, 200px);
+  }


Move these styles to the separate file

volodymyr-soltys97 · 2024-12-30T14:54:14Z

src/styles/index.scss

+.star {
+  background-image: url(../images/star.svg);
+  background-position: 50%;
+  background-repeat: no-repeat;
+  width: 16px;
+  height: 16px;
+  border-radius: 0.5px;
+  gap: 4px;
+  margin-right: 4px;
+
+  &:nth-child(-n + 4) {
+    background-image: url(../images/star-active.svg);
+  }
+}


Move stars styles to the separate file

volodymyr-soltys97 · 2024-12-30T14:54:31Z

src/styles/index.scss

+  font-weight: 500;
+  padding: 0 50px;
+  box-sizing: border-box;
+}
+
+.nav__list {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.nav__item {
+  margin-right: 20px;
+}
+
+.nav__link {
+  text-decoration: none;
+  color: $text-color;
+  line-height: 60px;
+  font-family: Roboto, sans-serif;
+  font-weight: 500;
+  text-transform: uppercase;
+  display: block;
+  text-align: center;
+  font-size: 12px;
+}


Move header styles to the separate file

volodymyr-soltys97

Hi, you need to fix all comments from the previous review and make a deploy again after your changes

volodymyr-soltys97 · 2024-12-31T07:59:43Z

src/index.html

+          </a>
+        </div>
+      </div>
+      <div class="product-cards">


Redundant wrapper, remove it everywhere

Suggested change

<div class="product-cards">

volodymyr-soltys97

Hi, the demo link isn't working, you need to make deploy again and check after demo

volodymyr-soltys97 · 2025-01-02T07:51:08Z

src/index.html

+    </header>
+    <main class="catalog">


Suggested change

</header>

<main class="catalog">

</header>

<main class="catalog">

volodymyr-soltys97 · 2025-01-02T07:51:27Z

src/index.html

+      </div>
+      <div


Add the blank line between the all cards

Suggested change

</div>

<div

</div>

<div

volodymyr-soltys97 · 2025-01-02T07:53:05Z

src/index.html

+    </header>
+    <main class="catalog">
+      <div
+        class="product-card"


Suggested change

class="product-card"

class="card"

volodymyr-soltys97 · 2025-01-02T07:53:13Z

src/index.html

+        <img
+          src="./images/imac.jpeg"
+          alt="imac"
+          class="product-card__image"


Suggested change

class="product-card__image"

class="card__image"

volodymyr-soltys97 · 2025-01-02T07:53:21Z

src/index.html

+          alt="imac"
+          class="product-card__image"
+        />
+        <h2 class="product-card__title">


Suggested change

<h2 class="product-card__title">

<h2 class="card__title">

volodymyr-soltys97 · 2025-01-02T07:53:29Z

src/index.html

+        <h2 class="product-card__title">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </h2>
+        <p class="product-card__description">Product code: 195434</p>


Suggested change

<p class="product-card__description">Product code: 195434</p>

<p class="card__description">Product code: 195434</p>

volodymyr-soltys97 · 2025-01-02T07:53:41Z

src/index.html

+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </h2>
+        <p class="product-card__description">Product code: 195434</p>
+        <div class="mark">


Suggested change

<div class="mark">

<div class="card__review">

volodymyr-soltys97 · 2025-01-02T07:54:12Z

src/index.html

+        <div class="price">
+          <p class="price__word">Price:</p>
+          <p class="price__numeric">$2,199</p>
+        </div>


Suggested change

<div class="price">

<p class="price__word">Price:</p>

<p class="price__numeric">$2,199</p>

</div>

<div class="card__price">

<p class="card__price-label">Price:</p>

<p class="card__price-value">$2,199</p>

</div>

volodymyr-soltys97 · 2025-01-02T07:54:23Z

src/index.html

+        <a
+          href="#"
+          data-qa="card-hover"
+          class="bottom"


Suggested change

class="bottom"

class="card__button"

volodymyr-soltys97

Great work! 🔥

mateacademy-ai-mentor approved these changes Dec 30, 2024

View reviewed changes

volodymyr-soltys97 suggested changes Dec 30, 2024

View reviewed changes

add task solution

8e8723c

IvanIlnytskyy force-pushed the develop branch from 41aeba2 to 8e8723c Compare December 30, 2024 21:24

IvanIlnytskyy requested a review from volodymyr-soltys97 December 30, 2024 22:04

volodymyr-soltys97 suggested changes Dec 31, 2024

View reviewed changes

IvanIlnytskyy added 4 commits December 31, 2024 16:11

add task solution

da0147a

add task solution

427b71b

add task solution

986b178

make build

0b6c87e

IvanIlnytskyy requested a review from volodymyr-soltys97 December 31, 2024 15:20

volodymyr-soltys97 suggested changes Jan 2, 2025

View reviewed changes

IvanIlnytskyy added 2 commits January 2, 2025 23:23

add task solution

2fb7984

add task solution

ff4f745

IvanIlnytskyy requested a review from volodymyr-soltys97 January 2, 2025 21:32

volodymyr-soltys97 approved these changes Jan 3, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Develop #4964

Develop #4964

IvanIlnytskyy commented Dec 30, 2024

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Dec 30, 2024

mateacademy-ai-mentor Dec 30, 2024

mateacademy-ai-mentor Dec 30, 2024

mateacademy-ai-mentor Dec 30, 2024

mateacademy-ai-mentor Dec 30, 2024

mateacademy-ai-mentor Dec 30, 2024

volodymyr-soltys97 left a comment

volodymyr-soltys97 Dec 30, 2024

volodymyr-soltys97 Dec 30, 2024

volodymyr-soltys97 Dec 30, 2024

volodymyr-soltys97 Dec 30, 2024

volodymyr-soltys97 Dec 30, 2024

volodymyr-soltys97 Dec 30, 2024

volodymyr-soltys97 Dec 30, 2024

volodymyr-soltys97 Dec 30, 2024

volodymyr-soltys97 Dec 30, 2024

volodymyr-soltys97 left a comment

volodymyr-soltys97 Dec 31, 2024

volodymyr-soltys97 left a comment

volodymyr-soltys97 Jan 2, 2025

volodymyr-soltys97 Jan 2, 2025

volodymyr-soltys97 Jan 2, 2025

volodymyr-soltys97 Jan 2, 2025

volodymyr-soltys97 Jan 2, 2025

volodymyr-soltys97 Jan 2, 2025

volodymyr-soltys97 Jan 2, 2025

volodymyr-soltys97 Jan 2, 2025

volodymyr-soltys97 Jan 2, 2025

volodymyr-soltys97 left a comment

-      </div>
-      <div
+      </div>
+      <div

	<p class="product-card__description">Product code: 195434</p>
	<p class="card__description">Product code: 195434</p>

Develop #4964

Are you sure you want to change the base?

Develop #4964

Conversation

IvanIlnytskyy commented Dec 30, 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

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

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

volodymyr-soltys97 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

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

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

volodymyr-soltys97 left a comment

Choose a reason for hiding this comment