add task solution #4936
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,140 @@ | ||
| html, | ||
| body, | ||
| div, | ||
| span, | ||
| applet, | ||
| object, | ||
| iframe, | ||
| h1, | ||
| h2, | ||
| h3, | ||
| h4, | ||
| h5, | ||
| h6, | ||
| p, | ||
| blockquote, | ||
| pre, | ||
| a, | ||
| abbr, | ||
| acronym, | ||
| address, | ||
| big, | ||
| cite, | ||
| code, | ||
| del, | ||
| dfn, | ||
| em, | ||
| img, | ||
| ins, | ||
| kbd, | ||
| q, | ||
| s, | ||
| samp, | ||
| small, | ||
| strike, | ||
| strong, | ||
| sub, | ||
| sup, | ||
| tt, | ||
| var, | ||
| b, | ||
| u, | ||
| i, | ||
| center, | ||
| dl, | ||
| dt, | ||
| dd, | ||
| ol, | ||
| ul, | ||
| li, | ||
| fieldset, | ||
| form, | ||
| label, | ||
| legend, | ||
| table, | ||
| caption, | ||
| tbody, | ||
| tfoot, | ||
| thead, | ||
| tr, | ||
| th, | ||
| td, | ||
| article, | ||
| aside, | ||
| canvas, | ||
| details, | ||
| embed, | ||
| footer, | ||
| header, | ||
| hgroup, | ||
| menu, | ||
| nav, | ||
| output, | ||
| ruby, | ||
| section, | ||
| summary, | ||
| time, | ||
| mark, | ||
| audio, | ||
| video { | ||
| margin: 0; | ||
|
There was a problem hiding this comment. You're styling a lot of elements using their tag names, which goes against the checklist. The only exceptions should be the |
||
| padding: 0; | ||
| border: 0; | ||
| font-size: 100%; | ||
| font-size: inherit; | ||
| vertical-align: baseline; | ||
| } | ||
|
|
||
|
There was a problem hiding this comment. You're using the There was a problem hiding this comment. You are using There was a problem hiding this comment. You are using tag names for styling. It's recommended to style all elements using |
||
| /* Для забезпечення належного відображення */ | ||
| article, | ||
| aside, | ||
| details, | ||
| figcaption, | ||
| figure, | ||
| footer, | ||
| header, | ||
| hgroup, | ||
| menu, | ||
| nav, | ||
| section { | ||
| display: block; | ||
| } | ||
|
|
||
| body { | ||
| line-height: 1; | ||
| } | ||
|
|
||
| ol, | ||
| ul { | ||
| list-style: none; | ||
| } | ||
|
|
||
|
There was a problem hiding this comment. Here you're styling the |
||
| blockquote, | ||
| q { | ||
| quotes: none; | ||
| } | ||
|
|
||
|
There was a problem hiding this comment. According to the checklist, you should avoid using tag names for styling (except |
||
| .stars { | ||
| display: flex; | ||
| } | ||
|
|
||
| .stars__star { | ||
| box-sizing: border-box; | ||
| background-repeat: no-repeat; | ||
| height: 16px; | ||
| width: 16px; | ||
| background-position: center; | ||
| background-image: url('./images/star.svg'); | ||
| } | ||
|
|
||
|
Comment on lines
+7
to
+17
There was a problem hiding this comment. This part of the code is well written. You've used classes for styling, which is good practice. There was a problem hiding this comment. It's a good practice to provide alternative images in case the main one doesn't work or takes time to load. You can use the CSS |
||
| .stars__star:not(:first-child) { | ||
| margin-left: 4px; | ||
| } | ||
|
|
||
|
Comment on lines
+19
to
+21
There was a problem hiding this comment. This is a good use of the There was a problem hiding this comment. Be consistent with your margins. It's better to add only top or bottom margins, but not both, to avoid potential margin collapse. Here, you are adding a left margin which is fine as long as you are consistent with it throughout your CSS. |
||
| .stars--1 .stars__star:nth-child(-n + 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) { | ||
| background-image: url('./images/star-active.svg'); | ||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You should add empty lines between sibling elements to improve readability. This is especially important for multi-line blocks. But remember, don't add them between parent and child elements.