Blog preview card HTML and CSS

Community feedback

• 

  Vitor Emanoel da Silva Nogueira•170

  @VitorEmanoelNogueira

  Posted about 1 year 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!

  01

  Marked as helpful