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

Responsive landing page Blog preview card using HTML and CSS

@nikolapetkovicdev

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I feel proud of myself for completing this task. At first glance, it may seem easy, but it's actually not, at least not for me. I paid attention to details and noticed that on the "HTML & CSS foundations" title, there's a hover effect that should expand the shadow on the card. I went through solutions on Frontend Mentor and couldn't find anyone who implemented this in their task solution. Considering that I'm a beginner in this field, I spent a bit more time exploring how to achieve it and tried various approaches. To avoid making this explanation too lengthy, the solution is now in place. If anyone is interested, feel free to take a look. If there's another, perhaps simpler solution out there, I'd love for someone to share it with me. Please, feel free to provide feedback on where I could have done better or if I made any mistakes.

Community feedback

Daniel šŸ›øā€¢ 44,230

@danielmrz-dev

Posted

Hello @nikolapetkovicdev!

Your project looks great!

  • Using margin is not the best option to center an element. Here's a very efficient (and better) way to place an element in the middle of the page both vertically and horizontally:

šŸ“Œ Apply this to the body (in order to work properly, don't use position or margins):

body {
    min-height: 100vh;
    display: flex;  /* it works with grid too  */
    justify-content: center;
    align-items: center;
}

I hope it helps!

Other than that, great job!

Marked as helpful

0

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