layout stars

[TaniaFedortsi]

• 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]

Hey there! 👋 It looks like you've done a great job overall, but there are a couple of issues that need your attention before we can move forward. The fixed container size might lead to content overflow, which could affect the layout of your page. Also, there are some formatting inconsistencies that could be improved for better readability. Keep up the good work, and with a few tweaks, your code will be even better! 🚀

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

[mateacademy-ai-mentor]

The attributes of the link tag should also be formatted with each attribute on a new line, following the same indentation rules as the meta viewport tag.

[mateacademy-ai-mentor]

Consider adding empty lines between sibling div blocks to improve readability, as recommended in the checklist.

[mateacademy-ai-mentor]

Don't fix container size (if there is no such a requirement). Let the content size dictate it to avoid overflow or accidental scrollbar. If this fixed size is not a specific requirement, consider using min-width and min-height instead or padding to control the size.

[mateacademy-ai-mentor]

The border-radius value of 0.5px is very small and might not be noticeable. If you intended to create a rounded effect, consider using a larger value.

[mateacademy-ai-mentor]

Be consistent with your margins. Add only top or bottom margins, but not both, to avoid potential margin collapse issues. Here you have a right margin, which is fine, but ensure consistency throughout your layout.

[mateacademy-ai-mentor]

Great job on your Pull Request! 🌟 There are a few minor suggestions to keep in mind for future work, such as ensuring consistency in image URLs and margin usage, letting content size dictate container dimensions, improving code readability with proper spacing, and adhering to best practices for indentation and attribute formatting. These are not critical issues but addressing them will enhance your code quality. Keep it up! 💻✨

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

[mateacademy-ai-mentor]

Use 2 spaces for indentation in your file instead of the 4 spaces currently used to align with the HTML formatting best practices.

[mateacademy-ai-mentor]

Add empty lines between multiline sibling blocks of HTML to add some 'air' and simplify reading, as per the checklist.

[mateacademy-ai-mentor]

Avoid fixing the container size like using min-width and min-height unless it is a specific requirement. Let the content size dictate the container size to prevent overflow or accidental scroll bars.

[mateacademy-ai-mentor]

Be consistent with your margins. It's recommended to add only top or bottom margins, but not both, to avoid potential margin collapse issues.

[mateacademy-ai-mentor]

The background-image URL in the .stars--* .stars__star selectors should be consistent with the one used in the .stars__star.active selector. Ensure they are the same to avoid loading different images that are meant to be the same.