Testimonials grid section

Community feedback

• 

  Andrey•3,890

  @dar-ju

  Posted 26 days ago

  Hi, Tetiana!

  Very nice work, done neatly, tags are almost correct.

  Look, this is a task on grid practice, you did not use all the grid features. You need to make a little more @media transitions, you only have 2 states - less than 1440px and more than 1440. On my laptop at 1360px the page looks like one narrow column. Your task is to check the work on all resolutions starting from 320 and ending with 1920. Grid allows you to conveniently manage elements. As the screen narrows, you can change the number of columns from 4 to 3 and so on.

  Next, about headings. It is not recommended to use more than one H1 heading on one page. This is not a full page, it is only a part of it, a component. It is assumed that the page will have an H1 header, use H2, H3 in the cards, but not H1.

  Before the release, use the HTML validator The code that does not have any warnings or errors will be considered clean.

  You get the idea about BEM, but usually the block is treated as a standalone component, like these testimonials. The review pieces themselves won't be reused.

  So you have whole component - class .testimonials, then the card is an element we get .testimonials__card, then the title is an element we get .testimonials__title or .testimonials__card-title - as you prefer, and so on.

  The third part of BEM is the Modifier, it is used when, for example, the cards have the same styles, but the background color of one of them is different, in this case it will look like this: <article class="testimonials__card testimonials__card--purple-background"> "purple-background" is Modificator, it describes the difference.

  Otherwise, everything is fine, it just needs some work. Good luck with your development!

  10

  Marked as helpful