create stars layout #4889

yzhyhaliuk · 2024-10-03T10:05:30Z

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

Great job on your Pull Request! All the main functionalities seem to be in place and working correctly. 👍 Just remember to keep an eye on the details like fallback fonts and consistent indentation in the future to make your code even better. Keep up the good work! 🚀

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

mateacademy-ai-mentor · 2024-10-03T10:05:47Z

src/index.html

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


The indentation within the <body> element seems to be off by one space. Ensure that child elements have a 2-space indentation from their parent elements to maintain consistency and readability.

mateacademy-ai-mentor · 2024-10-03T10:05:47Z

src/index.html

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


Add empty lines between sibling blocks of HTML to add some 'air' and simplify reading. For instance, there should be an empty line between the closing </div> of one .stars block and the opening <div> of the next one.

mateacademy-ai-mentor · 2024-10-03T10:05:47Z

src/style.css

@@ -1 +1,42 @@
-/* add styles here */
+.page {
+  margin: 0;


Avoid using the margin property to zero out the margin on the body element. Instead, set the margin property on the body tag directly in your CSS to ensure consistency and to avoid potential issues with global styles.

mateacademy-ai-mentor · 2024-10-03T10:05:47Z

src/style.css

+.stars__star {
+  background-image: url(images/star.svg);
+  background-repeat: no-repeat;
+  width: 16px;
+  height: 16px;
+  background-position: center;
+  margin-right: 4px;
+}


Consider adding a fallback font in case the main one doesn't load. For example, if you're using a web font for the .stars__star, you can specify a generic font family as a backup.

mateacademy-ai-mentor · 2024-10-03T10:05:47Z

src/style.css

+
+.stars {
+  display: flex;
+  width: fit-content;


It's a good practice not to fix container sizes unless required. Here, the width is set to fit-content, which is good as it allows the content to dictate the size of the element. Just ensure this is the desired behavior in your layout.

volodymyr-soltys97

Good job 👍
Let's improve your code
Remove the margin right for the last stars

volodymyr-soltys97 · 2024-10-03T10:12:44Z

src/index.html

-  <body>
-    <h1>Stars</h1>
+  <body class="page">
+    <div class="container">


Redundant wrapper

Suggested change

<div class="container">

volodymyr-soltys97 · 2024-10-03T10:13:01Z

src/index.html

+      </div>
+      <div class="stars stars--1">


Add the blank line between the blocks

Suggested change

</div>

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

</div>

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

volodymyr-soltys97 · 2024-10-03T10:14:22Z

src/style.css

+
+.stars {
+  display: flex;
+  width: fit-content;


Redundant

Suggested change

width: fit-content;

volodymyr-soltys97 · 2024-10-03T10:14:50Z

src/style.css

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


These selectors must be separated by commas

selector1, selector2, ...... { // .... }

volodymyr-soltys97 · 2024-10-03T10:15:48Z

src/style.css

+  margin-right: 4px;
+}
+
+.stars.stars--1 .stars__star:nth-child(1) {


Fix it everywhere

Suggested change

.stars.stars--1 .stars__star:nth-child(1) {

.stars--1 .stars__star:nth-child(1) {

anastasiiavorobiova

Great work! Consider using commas to group selectors

anastasiiavorobiova · 2024-10-03T11:08:04Z

src/style.css

+.stars--2 .stars__star:nth-child(-n + 2) {
+  background-image: url(images/star-active.svg);
+}
+
+.stars--3 .stars__star:nth-child(-n + 3) {
+  background-image: url(images/star-active.svg);
+}
+
+.stars--4 .stars__star:nth-child(-n + 4) {
+  background-image: url(images/star-active.svg);
+}
+
+.stars--5 .stars__star:nth-child(-n + 5) {
+  background-image: url(images/star-active.svg);
+}


Suggested change

.stars--2 .stars__star:nth-child(-n + 2) {

background-image: url(images/star-active.svg);

}

.stars--3 .stars__star:nth-child(-n + 3) {

background-image: url(images/star-active.svg);

}

.stars--4 .stars__star:nth-child(-n + 4) {

background-image: url(images/star-active.svg);

}

.stars--5 .stars__star:nth-child(-n + 5) {

background-image: url(images/star-active.svg);

}

anastasiiavorobiova · 2024-10-03T11:08:47Z

src/style.css

+  margin-right: 4px;
+}
+
+.stars--1 .stars__star:nth-child(1) {


Suggested change

.stars--1 .stars__star:nth-child(1) {

.stars--1 .stars__star:nth-child(1),

.stars--2 .stars__star:nth-child(-n + 2),

.stars--3 .stars__star:nth-child(-n + 3),

.stars--4 .stars__star:nth-child(-n + 4),

.stars--5 .stars__star:nth-child(-n + 5) {

anastasiiavorobiova

Awesome!

create stars layout

2304bc1

mateacademy-ai-mentor approved these changes Oct 3, 2024

View reviewed changes

volodymyr-soltys97 suggested changes Oct 3, 2024

View reviewed changes

fix .stars.stars--n

46ee044

yzhyhaliuk requested a review from volodymyr-soltys97 October 3, 2024 10:40

anastasiiavorobiova suggested changes Oct 3, 2024

View reviewed changes

use selectors with a comma

6fc3983

yzhyhaliuk requested a review from anastasiiavorobiova October 3, 2024 11:31

anastasiiavorobiova approved these changes Oct 3, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

create stars layout #4889

create stars layout #4889

yzhyhaliuk commented Oct 3, 2024

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Oct 3, 2024

mateacademy-ai-mentor Oct 3, 2024

mateacademy-ai-mentor Oct 3, 2024

mateacademy-ai-mentor Oct 3, 2024

mateacademy-ai-mentor Oct 3, 2024

volodymyr-soltys97 left a comment

volodymyr-soltys97 Oct 3, 2024

volodymyr-soltys97 Oct 3, 2024

volodymyr-soltys97 Oct 3, 2024

volodymyr-soltys97 Oct 3, 2024

volodymyr-soltys97 Oct 3, 2024

anastasiiavorobiova left a comment

anastasiiavorobiova Oct 3, 2024

anastasiiavorobiova Oct 3, 2024

anastasiiavorobiova left a comment

	.stars.stars--1 .stars__star:nth-child(1) {
	.stars--1 .stars__star:nth-child(1) {

-.stars--1 .stars__star:nth-child(1) {
+.stars--1 .stars__star:nth-child(1),
+.stars--2 .stars__star:nth-child(-n + 2),
+.stars--3 .stars__star:nth-child(-n + 3),
+.stars--4 .stars__star:nth-child(-n + 4),
+.stars--5 .stars__star:nth-child(-n + 5) {

create stars layout #4889

Are you sure you want to change the base?

create stars layout #4889

Conversation

yzhyhaliuk commented Oct 3, 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

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

anastasiiavorobiova left a 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