Blog preview card HTML and CSS

Community feedback

• 

  Vitor Emanoel da Silva Nogueira•170

  @VitorEmanoelNogueiraPosted 4 months ago

  Hello, Jani-B! Great job!

  After seeing your code, I have 4 tips to give:

  • Learn how to vertically centralize conteiners, instead of using margin, because while it can look good on your device, on others it can create scrollbars (like on mine XD) and it won't be really centralized like it should be. You can learn it seeing the position and transform:translate properties method first and then using flexbox when you get to study it, which it will make things easier;
  • Reset the padding and the margin of the HTML in general in the global selector of CSS (*) to 0 before starting to stylize everything. It helps to get rid of some unwanted paddings and margins that can be a problem while you stylize your own;
  • Adjust some of the paddings and margins. The main conteiner padding should be 24px and the margin between the image and the "learning" should be increased a little (24px);
  • Configure the cursor on the title so when the hover is active it changes. You can do that by going in the card:hover selector and adding the property "cursor: pointer;" to it.

  Overall, you did a great job and the design is pretty good, keep on improving!

  Marked as helpful

  0

  ---

  

  Jani-B•370

  @Jani-BPosted 4 months ago

  @VitorEmanoelNogueira

  Thanks Vitor

  I changed the top margin to flex as you advised. Now it works better. Thank you for that advise :)

  All the advises are good .

  Best Regards Jani

  1