Skip to content
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.

Sign up for GitHub

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

Jump to bottom

create BEM block stars with styles #4962

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

create BEM block stars with styles #4962

wants to merge 3 commits into from

Conversation

TargoniyAnatoliy
Copy link

  • 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
mateacademy-ai-mentor suggested changes Oct 16, 2024
View reviewed changes
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

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

Great job so far! However, there are a few improvements that need to be made. Please consider using the gap property instead of margin-right for easier maintenance, specify a fallback background color, apply styles via a class instead of directly to the 'body' tag, and use more semantic tags. Also, pay attention to the formatting of your meta tag attributes and add empty lines between multiline sibling blocks for readability. Keep up the good work! 👍

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

src/index.html Outdated
Comment on lines 21 to 68
<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>
Copy link

Choose a reason for hiding this comment

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

According to the checklist, you should add empty lines between multiline sibling blocks of HTML to add some 'air' and simplify reading. But don't add them between parent and child elements.

Copy link
Author

Choose a reason for hiding this comment

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

in instruction to this task recommended to avoid gap, because it will block npm tasks

src/index.html Outdated
Comment on lines 7 to 10
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
Copy link

Choose a reason for hiding this comment

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

The attributes of the meta tag are correctly formatted. Each attribute starts on a new line with a 2-space indentation related to the tag. However, the closing bracket of the tag is not on the same level as the opening one. Please fix this.

src/index.html Outdated
Comment on lines 21 to 68
<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>
Copy link

Choose a reason for hiding this comment

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

The div elements are used for styling purposes. However, it would be better to use semantic tags where possible. Semantic tags like section or article improve your page's SEO and help screen readers. div and span do not have any meaning. Consider changing the div elements to semantic ones if possible.

src/style.css
Comment on lines +1 to +3
body {
margin: 0;
}
Copy link

Choose a reason for hiding this comment

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

The 'body' tag is being styled directly, which is generally not recommended. It would be better to use a class to apply styles to the body. This is a code style issue.

src/style.css
Comment on lines +16 to +21
width: 16px;
height: 16px;
background-image: url(./images/star.svg);
background-repeat: no-repeat;
background-position: center;
}
Copy link

Choose a reason for hiding this comment

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

It's a good practice to specify a fallback background color for the case when the background image is not loaded. This is a recommendation.

src/style.css Show resolved Hide resolved
mateacademy-ai-mentor
mateacademy-ai-mentor suggested changes Oct 16, 2024
View reviewed changes
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

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

You're doing great! 😊 However, there are a few areas that need your attention. Please consider using semantic tags instead of 'div' for better SEO and accessibility. Also, please pay attention to your HTML formatting, especially when dealing with multiple attributes and long attribute values. Lastly, remember to use the correct tags for styling in your CSS. Keep up the good work! 👍

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

src/index.html
<meta
name="viewport"

<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
Copy link

Choose a reason for hiding this comment

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

HTML Formatting issue: Remember to keep your attributes correctly formatted. If an HTML element has long attribute values or a number of attributes is more than 2, start each one on a new line with a 2-space indentation related to the tag. The tag's closing bracket should be on the same level as the opening one. In this case, the closing bracket '>' is on a new line which is not recommended.

src/index.html
<h1>Stars</h1>

<body class="body">
<div class="container">
Copy link

Choose a reason for hiding this comment

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

HTML Content issue: It's better to use semantic tags where possible. The 'div' tag does not have any meaning. In this case, you could use the 'section' tag instead of 'div' to improve your page's SEO and help screen readers.

src/index.html
<div class="stars__star"></div>

<div class="stars__star"></div>
</div>
Copy link

Choose a reason for hiding this comment

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

HTML Formatting issue: Add empty lines between multiline sibling blocks of HTML to add some 'air' and simplify reading. But don't add them between parent and child elements. In this case, there should be an empty line after this 'div' block.

src/style.css
@@ -1 +1,45 @@
/* add styles here */
.body {
margin: 0;
Copy link

Choose a reason for hiding this comment

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

You have used the .body class for styling, but according to the checklist, we should not use tag names for styling, except html and body. Here, it seems you wanted to apply styles to the body tag, but you used a class instead. If you want to apply styles to the body tag, you should use body instead of .body. If .body is a class used in your HTML, consider renaming it to something more meaningful.

Copy link
Author

Choose a reason for hiding this comment

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

it done due to your previous recomendation

mateacademy-ai-mentor
mateacademy-ai-mentor approved these changes Oct 16, 2024
View reviewed changes
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

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

Great job on your HTML and CSS files! Your code is well-structured and follows the necessary formatting rules. Your consistent and meaningful usage of classes is commendable. Keep up the good work and continue improving! 🚀👏

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mateacademy-ai-mentor mateacademy-ai-mentor mateacademy-ai-mentor approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@TargoniyAnatoliy @mateacademy-ai-mentor