develop

[Daniil-102]

• DEMO LINK
• TEST REPORT LINK

[mateacademy-ai-mentor]

Great job so far! 👍 However, there are a few areas that need improvement. Pay attention to your CSS code, avoid setting fixed width and height if not necessary, and be consistent with your margins. Also, avoid using the * selector as it impacts performance. In your HTML, ensure proper formatting of attributes and correct indentation for readability. Keep up the good work and make these changes for better code quality. 😊

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

[mateacademy-ai-mentor]

Remember about correct indentation between parent and child elements. Each level of nesting, including text, contained inside the element, requires 2-space offset. For instance, in line 16, the 'div' elements inside the 'stars' class should be indented with 2 spaces.

[mateacademy-ai-mentor]

Don't use the * selector as it impacts performance. Set styles only for elements that require them. Zeroing out your margins, paddings, or other styles with '*' is still inefficient for the browser.

[mateacademy-ai-mentor]

To avoid potential margin collapse, be consistent with your margins. Add only top or bottom, but not both. In this case, you have a margin-bottom: 0; which might not be necessary.

[mateacademy-ai-mentor]

Avoid fixing container size if there is no such requirement. Let the content size dictate it. To avoid overflow or accidental scroll bar, it would be better not to set a fixed width and height for .stars__star.

[mateacademy-ai-mentor]

Great job on your project! Your HTML and CSS files are well-structured and clean. There are a few formatting issues and places where the code could be improved, so make sure to review the comments. Keep practicing and continue to improve your coding skills. Happy coding! 🚀

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

[mateacademy-ai-mentor]

According to the checklist, if the HTML-element has long attribute values or number of attributes is more than 2, you should start each one, including the first, on the new line with 2-space indentation related to tag. Tag’s closing bracket should be on the same level as opening one. Please adjust the formatting accordingly.

[mateacademy-ai-mentor]

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. Add an empty line after this block.

[mateacademy-ai-mentor]

Add an empty line after this block.

[mateacademy-ai-mentor]

Add an empty line after this block.

[mateacademy-ai-mentor]

Add an empty line after this block.

[mateacademy-ai-mentor]

Add an empty line after this block.

[mateacademy-ai-mentor]

It's not recommended to use tag names for styling (except html and body). This can lead to unexpected results when your project grows and becomes more complex. I would suggest to add a class to the body tag and style it instead. Refer to the checklist item: 'Don't use tag names for styling (except html and body)'

[mateacademy-ai-mentor]

There is some code duplication here. You are setting the same background image for each condition. A better approach would be to set the background-image property once for all .stars__star elements and then just change it when needed. This will make your code DRYer and easier to maintain.