Four card feature section

Community feedback

• 

  P

  Aaron Smith•280

  @medic-codePosted 6 months ago

  Not a bad go at the challenge.

  HTML

  1. Try to reduce the number of div's in the markup, they're non-semantic, use main, article, section

  2. Try to be a bit more mindful with your classes - check out BEM, makes it easier to implement CSS when you split the HTML into quickly noticable classes.

  CSS

  1. Try to setup your CSS with CSS variables rather than using precise px units for different parts of your CSS it will force you to be more consistent with the design
  2. The heart of this challenge is to try your hand at CSS Grid in desktop view as its tricky to set up the cards without it - you've managed to do this so well done but the styling compared to the design are slightly off and you could probably achieve near the design using grid a lot easier.
  3. Using grid for mobile is probably not the best choice - flexbox is great for doing layout in one axis like mobile. Use grid for larger layout concerns and when you need to layout something in both x and y directions.
  4. I would adjust your boxshadows to be more blurred
  5. The icon margin is off in the cards should be 40px
  6. Try to refrain from using px for everything, px are great for when you really need a fixed container - mostly you want max-width rather than a specific fixed container size. REM works well for font-sizes, padding and margins, using CSS variables will help you keep your spacing consistent which is important in UI
  7. The header title should be h1 not h2 and should have atleast 64px of space between subheading and the cards
  8. The card heading and descriptions spacing is little too large and the description font weight is a little too much
  9. The cards themselves are a little too short in both width and height in desktop mode
  10. The fontweight in your heading is too much should be around 200
  11. The space between the heading title and the top of the view port is too large, look at the design to re-arrange this.
  12. The fontweight of the card headers are too much reduce that done a touch in line with the design

  A lot of the CSS feedback is nit picky about the UI which are lesser concerns. Do try to attempt to do the desktop cards in CSS grid though as it'll exposure you to grid.

  Also worth thinking about when flexbox is useful to use and when CSS grid is more useful. i've provided a little bit on this but worth searching the web around this.

  0

  ---

  

  Sadiki Benda•180

  @SadikibendaPosted 6 months ago

  Thank you so much @medic-code for your feedback, is truly what I wanted. I am not so good in CSS grid. I will put more effort into learning it.

  I appreciate it

  0

  

  P

  Aaron Smith•280

  @medic-codePosted 5 months ago

  You're welcome! Happy to review when you've made changes@Sadikibenda

  0