All solutions

What are you most proud of, and what would you do differently next time?

I tried using CSS Grid for centering this time, as for first I used Flexbox. Centering blog card was a breeze!

I used line-height property, @font-face and even used font-weight.

What challenges did you encounter, and how did you overcome them?

1. Small but, I found :hover changing when it wasn't over the text, so I used

    .blog-card h2 {
        width: fit-content;
      }

2 . Responsiveness for Smaller Screen. I tried using fixed units with calc(), but it worked with relative layout (vw).

What specific areas of your project would you like help with?

Any alternative for responsive design

@media screen and (max-width: 768px) {
        .blog-card {
          width: 42vw;
        }
      }

As I had to try different values for this.

What are you most proud of, and what would you do differently next time?

I have try different display layout for this like CSS Grid, CSS Flexbox. I will use Firefox for CSS debugging, it suits me.

What challenges did you encounter, and how did you overcome them?

I initially faced a challenge centering a QR code without a container div or flexbox/grid. I realized that using flexbox would make this task much easier. This is a common challenge when working with HTML and CSS, and flexbox is a powerful tool for overcoming it.

What specific areas of your project would you like help with?

I am happy with this method.