add task solution #4861

mmmy33 · 2024-09-25T11:40:04Z

DEMO LINK
TEST REPORT LINK
Yellow stars are added with container modifier + pseudo-selector (NO extra classes)
Each BEM block has its own separate file
All Typical Mistakes from BEM lesson theory are checked.
Code follows all the Code Style Rules ❗️

mateacademy-ai-mentor

While your CSS code is generally well-written and follows good practices, I've noticed a few areas that could use some improvement to enhance the consistency and maintainability of your project. Don't worry, these are not major issues, but addressing them will help you write even cleaner and more professional code. Keep up the good work, and with a bit of polishing, your code will be top-notch! 🌟🛠️

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

mateacademy-ai-mentor · 2024-09-25T11:41:46Z

src/index.html

-    <h1>Stars</h1>
+    <div class="stars stars--yellow">
+
+      <div class="stars__row">


Remember about correct indentation between parent and child elements. The div with class 'stars__row' should be indented with 2 spaces inside its parent div.

mateacademy-ai-mentor · 2024-09-25T11:41:46Z

src/index.html

+        <span class="stars__star"></span>
+      </div>
+
+      <div class="stars__row">


Add empty lines between multiline sibling blocks of HTML. There should be an empty line before this div to separate it from the previous sibling div.

mateacademy-ai-mentor · 2024-09-25T11:41:46Z

src/index.html

+        <span class="stars__star"></span>
+      </div>
+
+      <div class="stars__row">


Add empty lines between multiline sibling blocks of HTML. There should be an empty line before this div to separate it from the previous sibling div.

mateacademy-ai-mentor · 2024-09-25T11:41:46Z

src/index.html

+        <span class="stars__star"></span>
+      </div>
+
+      <div class="stars__row">


Add empty lines between multiline sibling blocks of HTML. There should be an empty line before this div to separate it from the previous sibling div.

mateacademy-ai-mentor · 2024-09-25T11:41:46Z

src/index.html

+        <span class="stars__star"></span>
+      </div>
+
+      <div class="stars__row">


Add empty lines between multiline sibling blocks of HTML. There should be an empty line before this div to separate it from the previous sibling div.

mateacademy-ai-mentor · 2024-09-25T11:41:46Z

src/style.css

+.stars__star {
+  width: 30px;
+  height: 30px;
+  display: inline-block;
+  background-size: cover;
+  background-image: url('../src/images/star.svg');
+}


The use of display: inline-block is unnecessary here since you are already using display: flex in the parent container .stars__row. Flex items are automatically block level in the context of a flex container.

mateacademy-ai-mentor · 2024-09-25T11:41:46Z

src/style.css

+  height: 30px;
+  display: inline-block;
+  background-size: cover;
+  background-image: url('../src/images/star.svg');


Consider using a more descriptive name for the image file to reflect its purpose or appearance, such as 'star-icon.svg' or 'star-outline.svg'. This can improve maintainability and readability of the code.

mateacademy-ai-mentor · 2024-09-25T11:41:46Z

src/style.css

+.stars--yellow .stars__row:nth-child(4) .stars__star:nth-child(-n+3),
+.stars--yellow .stars__row:nth-child(5) .stars__star:nth-child(-n+4),
+.stars--yellow .stars__row:nth-child(6) .stars__star:nth-child(-n+5) {
+  background-image: url('../src/images/star-active.svg');


Similar to the previous suggestion, 'star-active.svg' could be renamed to something more descriptive, like 'star-filled.svg' or 'star-highlighted.svg', to better convey the purpose of the image.

mateacademy-ai-mentor

Hey there! It looks like there are a few things that need a bit more attention before we can move forward. The path to the background image should be corrected, and we need to switch from tag names to classes for styling the stars. Also, let's tidy up the HTML by adding some empty lines for better readability and fixing the indentation. Don't worry, these tweaks will make your code shine even brighter! 🌟 Keep up the great work, and let's polish these details for an awesome final product!

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

mateacademy-ai-mentor · 2024-09-25T12:00:01Z

src/index.html

@@ -13,6 +13,57 @@
    />
  </head>
  <body>
-    <h1>Stars</h1>
+    <div class="stars stars--yellow">


Use semantic tags where possible. For example, you could wrap the .stars element in a
or
tag with a semantic class name.

mateacademy-ai-mentor · 2024-09-25T12:00:01Z

src/index.html

@@ -13,6 +13,57 @@
    />
  </head>
  <body>
-    <h1>Stars</h1>
+    <div class="stars stars--yellow">


There is no need for a blank line between the and the first
element. Blank lines should not be between parent and child elements.

mateacademy-ai-mentor · 2024-09-25T12:00:01Z

src/index.html

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


Add an empty line between sibling blocks of HTML to add some 'air' and simplify reading. There should be an empty line between the closing of one .stars__row and the opening
of the next .stars__row.

mateacademy-ai-mentor · 2024-09-25T12:00:01Z

src/index.html

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


Add an empty line between sibling blocks of HTML to add some 'air' and simplify reading. There should be an empty line between the closing of one .stars__row and the opening
of the next .stars__row.

mateacademy-ai-mentor · 2024-09-25T12:00:01Z

src/index.html

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


Add an empty line between sibling blocks of HTML to add some 'air' and simplify reading. There should be an empty line between the closing of one .stars__row and the opening
of the next .stars__row.

mateacademy-ai-mentor · 2024-09-25T12:00:01Z

src/index.html

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


Add an empty line between sibling blocks of HTML to add some 'air' and simplify reading. There should be an empty line between the closing of one .stars__row and the opening
of the next .stars__row.

mateacademy-ai-mentor · 2024-09-25T12:00:02Z

src/style.css

+.stars__star {
+  width: 30px;
+  height: 30px;
+  background-size: cover;
+  background-image: url('../src/images/star-icon.svg');
+}


Don't use tag names for styling (except html and body). Instead, style elements using .classes. In this case, .stars__star should be used to style the stars, without the need to mention tag names.

mateacademy-ai-mentor · 2024-09-25T12:00:02Z

src/style.css

+  width: 30px;
+  height: 30px;
+  background-size: cover;
+  background-image: url('../src/images/star-icon.svg');


The relative path to the background image should be updated to reflect the CSS file's location. Since the CSS file is in src/, the correct path would be images/star-icon.svg without the ../src/ prefix.

mateacademy-ai-mentor · 2024-09-25T12:00:02Z

src/style.css

+.stars--yellow .stars__row:nth-child(4) .stars__star:nth-child(-n + 3),
+.stars--yellow .stars__row:nth-child(5) .stars__star:nth-child(-n + 4),
+.stars--yellow .stars__row:nth-child(6) .stars__star:nth-child(-n + 5) {
+  background-image: url('../src/images/star-filled.svg');


Similarly, the relative path to the background image should be images/star-filled.svg.

mateacademy-ai-mentor

Great work on your Pull Request! However, there are a few things to keep in mind for future improvements: 👍

Simplify your nth-child usage for clarity and ensure it matches your HTML structure.
Be consistent with your margins and consider using them only on one axis (top/bottom) to avoid collapse issues.
Use classes for styling instead of tag names where possible, except for html and body.
Improve readability by adding empty lines between multiline sibling blocks in your HTML.
Ensure proper indentation and formatting, especially within your <head> tag and its attributes.

Keep up the good work, and remember to address these points in your future code to enhance quality and maintainability! 🚀

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

mateacademy-ai-mentor · 2024-09-25T13:46:51Z

src/index.html

@@ -13,6 +13,54 @@
    />


Keep your attributes correctly formatted. The attributes of the tag should start each on a new line with 2-space indentation related to the tag.

mateacademy-ai-mentor · 2024-09-25T13:46:51Z

src/index.html

+    <div class="stars__box stars--yellow">
+      <div class="stars stars--0">
+        <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>
+      </div>
+
+      <div class="stars stars--1">
+        <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>
+      </div>
+
+      <div class="stars stars--2">
+        <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>
+      </div>
+
+      <div class="stars stars--3">
+        <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>
+      </div>
+
+      <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>
+      </div>
+
+      <div class="stars stars--5">
+        <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>
+      </div>
+    </div>


Remember about correct indentation between parent and child elements. Each level of nesting, including the
and elements, should have a 2-space offset from its parent.

mateacademy-ai-mentor · 2024-09-25T13:46:52Z

src/index.html

+      <div class="stars stars--1">
+        <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>
+      </div>


Add empty lines between multiline sibling blocks of HTML to add some 'air' and simplify reading.

mateacademy-ai-mentor · 2024-09-25T13:46:52Z

src/index.html

+      <div class="stars stars--2">
+        <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>
+      </div>


Add empty lines between multiline sibling blocks of HTML to add some 'air' and simplify reading.

mateacademy-ai-mentor · 2024-09-25T13:46:52Z

src/index.html

+      <div class="stars stars--3">
+        <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>
+      </div>


Add empty lines between multiline sibling blocks of HTML to add some 'air' and simplify reading.

mateacademy-ai-mentor · 2024-09-25T13:46:52Z

src/index.html

+      <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>
+      </div>


Add empty lines between multiline sibling blocks of HTML to add some 'air' and simplify reading.

mateacademy-ai-mentor · 2024-09-25T13:46:52Z

src/style.css

+html {
+  display: flex;
+  justify-content: center;
+}


Avoid using tag names for styling, with the exception of html and body. In this case, it's acceptable to style the html tag, but ensure it's necessary for the layout. If it is not required for the global layout, consider using a class instead.

mateacademy-ai-mentor · 2024-09-25T13:46:52Z

src/style.css

+.stars__star:not(:last-child){
+  margin: 0 4px 4px 0;
+}


Be consistent with your margins. It's recommended to add margins only to the top or bottom of elements to prevent potential margin collapse issues. In this case, you're adding margins to the right and bottom, which could lead to inconsistencies when stacking elements or when they wrap.

mateacademy-ai-mentor · 2024-09-25T13:46:52Z

src/style.css

+.stars--1:nth-child(2) .stars__star:nth-child(-n + 1 ),
+.stars--2:nth-child(3) .stars__star:nth-child(-n + 2),
+.stars--3:nth-child(4) .stars__star:nth-child(-n + 3),
+.stars--4:nth-child(5) .stars__star:nth-child(-n + 4),
+.stars--5:nth-child(6) .stars__star:nth-child(-n + 5) {
+  background-image: url('../src/images/star-filled.svg');
+}


The nth-child pseudo-class usage here seems incorrect and overly complex. It looks like you're trying to select stars within differently rated .stars elements, but the nth-child is not necessary unless there's a specific reason for its usage that's not apparent in the CSS alone. Simplify the selectors if possible, and ensure they match the actual HTML structure.

add task solution

57c9838

mateacademy-ai-mentor suggested changes Sep 25, 2024

View reviewed changes

add blank line. remove unnecessary styles, change icon names

05b2f1a

mmmy33 requested a review from mateacademy-ai-mentor September 25, 2024 11:59

mateacademy-ai-mentor suggested changes Sep 25, 2024

View reviewed changes

fixed styles, classes

aad5cc7

mmmy33 requested a review from mateacademy-ai-mentor September 25, 2024 13:46

mateacademy-ai-mentor approved these changes Sep 25, 2024

View reviewed changes

fixed mistakes

83aaa32

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add task solution #4861

add task solution #4861

mmmy33 commented Sep 25, 2024

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Sep 25, 2024

mateacademy-ai-mentor Sep 25, 2024

mateacademy-ai-mentor Sep 25, 2024

mateacademy-ai-mentor Sep 25, 2024

mateacademy-ai-mentor Sep 25, 2024

mateacademy-ai-mentor Sep 25, 2024

mateacademy-ai-mentor Sep 25, 2024

mateacademy-ai-mentor Sep 25, 2024

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Sep 25, 2024

mateacademy-ai-mentor Sep 25, 2024

mateacademy-ai-mentor Sep 25, 2024

mateacademy-ai-mentor Sep 25, 2024

mateacademy-ai-mentor Sep 25, 2024

mateacademy-ai-mentor Sep 25, 2024

mateacademy-ai-mentor Sep 25, 2024

mateacademy-ai-mentor Sep 25, 2024

mateacademy-ai-mentor Sep 25, 2024

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Sep 25, 2024

mateacademy-ai-mentor Sep 25, 2024

mateacademy-ai-mentor Sep 25, 2024

mateacademy-ai-mentor Sep 25, 2024

mateacademy-ai-mentor Sep 25, 2024

mateacademy-ai-mentor Sep 25, 2024

mateacademy-ai-mentor Sep 25, 2024

mateacademy-ai-mentor Sep 25, 2024

mateacademy-ai-mentor Sep 25, 2024

add task solution #4861

Are you sure you want to change the base?

add task solution #4861

Conversation

mmmy33 commented Sep 25, 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

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

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