Preview card

Community feedback

• 

  Rok Krhlikar•70

  @rkrhlikarPosted 3 months ago

  Great job matching the box shadow and rounded edges!

  A couple of things I noticed that make your implementation differ from the reference:

  • You could give the illustration a bit more breathing room by adding some margin-bottom to it. (Or use some other approach to add some spacing there.)
  • The publish date uses a different color value than the main paragraph in the reference but your implementation uses the same for both, making that section a bit too light.
  • The font-size used for the title is significantly larger in your implementation.
  • You could give the main paragraph a larger line-height to space the lines a bit further apart.
  • Your card is both wider and taller than the reference, because the width and height of your .container are set explicitly to the full dimensions of the card in the reference. The reason for this discrepancy has to do with the way borders and padding are handled. The default behavior adds padding and border size to the defined width and height. You can read more about this in MDN's documentation for the box-sizing CSS property. By playing around with this property you can get the browser to take padding and borders into account when you specify the size.

  Related to the last point about sizing: you can leave the height unspecified and if you get the font sizes and spacing right the automatically determined height (based on the content height) should match the reference.

  Additionally, if you wanted to play around with making the card width responsive, reading about min-width and max-width is probably a good starting point.

  Looking at the Figma files provided with these Free+ challenges is a great way to see what the actual font sizes, colors and spacing values are which takes a lot of guess work out of getting your implementation looking pixel-perfect. Unfortunately the style-guide.md doesn't quite give you all of the information.

  I hope that the linked resources are helpful and not (too) overwhelming.

  Good luck on the rest of your frontend development journey!

  Marked as helpful

  0

  ---

  

  RoxanaAnamariaTurc•40

  @RoxanaAnamariaTurcPosted 3 months ago

  @rkrhlikar Hey, thank you for the feedback , really great to receive so in depth advice. I saved the links and made some changes based on the feedback you gave :)

  0