Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Blog preview card HTML and CSS

Jani-B 270

@Jani-B

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@VitorEmanoelNogueira

Posted

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 270

@Jani-B

Posted

@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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord