Four-card-features-sectio-master challenge completed with Flex / Grid

Community feedback

• 

  Alex•120

  @CaplexWPosted about 1 month ago

  Good job! Here’s some tips to make it easier:

  • You can use utility classes. instead of creating repeated classes like ‘card1’ and ‘card2’ and repeat all the css in it, you can create a single class ‘card’ and whrite there all the code that suppose to be in every card. And then you can create utility class like ‘red-line’, ‘cyan-line’ etc… and write there code that declares the colors.
  • Margin-auto to position elements. When you need to position single element, you can create a flex-parrent or also you can giv the element ‘display: block’ (if it hasn’t already) and ‘margin-inline: auto’ to center it or ‘margin-right/left’ to send the element to start/end of the block. It’s also better to use ‘margin-inline: auto’ or ‘margin: 0 auto’ to prevent unexpected inheritance.
  • Simplify grid. Sometimes it’s needed to specify columms and rows, but when it possible it’s better to let algorithms deside. Here’s video of Kevin Powell with some smart grid manipulations.

  0