Testimonials grid section | CSS Grid, BEM and CSS variables

Community feedback

• 

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  Hi Sunny,

  Amazing final solution, very clear and responsive. I've got a few tips too for you if you don't mind:

  • I would like to recommend GRID course created by Wes Bos. It is for free, grid here;
  • try do not write CSS style in the HTML;
  • it is not good to use so many divs in the HTML structure. Why? Probably you know an answer. Generally, divs are semantically inert elements — elements that don’t really do or say anything. The term "semantic" refers to the meaning of a word or a thing, so "semantic elements" are elements designed to mark up the structure of a document in a more meaningful way, a way that makes it clear what they're for, what purpose they serve in the document. Check the MDN documentation. Therefore, it will be amazing to use semantics tags like section, main, article, header etc. You can divide the semantic block elements into two categories: primary structure (for example header, main, footer, then divide those regions into sections) and content indicators. There are lot's of tags and it is worth getting to know them gradually. In this case, please read an article from the Smashing Magazine, Structural Semantics: The Importance Of HTML5 Sectioning Elements.
  • what do you think about your RWD for tablets? It could be better to go from the mobile with one column, then create two pairs with two boxes (2x2) and below will be the 5th box at the bottom, finally the 5th will be on the right side like on the desktop version (design folder) but of course it is only another proposition of the solution;

  That's it from me. Ps. don't forget to upvote any comments on here that you find helpful.

  Greetings :D

  3