Blog preview card

Community feedback

• 

  kepper104•90

  @kepper104Posted 7 months ago

  Hi, great job! Few things i've noticed:

  1 - The attribution bar at the bottom hangs a bit above the page bottom, you can fix it by changing height: 95vh; of the body selector in the CSS to

  display: flex;
  flex-direction: column;
  height: 100vh;
  

  and adding flex: 1; to the main selector in the CSS This way, the body will become a flex container and main page contents will fill maximum available height while leaving just enough space for the attribution bar.

  2 - You left out alt attribute of the image empty, which is a bad practice and fortunately, easy to fix, just change it to something like alt="An abstract programming related illustration"

  3 - Your paddings are a bit off, for example spacing around the image is 16px instead of 24px (like in the reference design)

  4 - Lastly, a minor thing, but in the reference design all the text has a line-height: 150%;, very easy to fix and will make your recreation almost pixel-perfect.

  Good luck in your front-end development journey!

  Marked as helpful

  1

  ---

  

  Bishwajeet•480

  @Bishwajeet-07Posted 7 months ago

  Thanks @kepper104 for noticing everything and for your suggestions. It has helped a lot.

  I'll correct it.☺️☺️

  1