Frontend Mentor | Blog Card Preview coding challenge solution

Solution retrospective

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

This second project was way easier than the first one, I am proud of my developments and am getting much better at using CSS.

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

I didn't encounter any hard challenges during this project. It was easy.

Community feedback

@DylandeBruijn

Posted 2 months ago

@Ibtehaj-Ali-1

Hiya! 👋

Congratulations on your solution, it looks very close to the design! I can tell you put a lot of effort into it.

Things you could improve ✍️

I suggest adding a bit of padding to your body element so the card has some space around it on smaller viewports.
Try using semantic HTML elements like main, section and article.
Try using using relative CSS units like rem and em they make your layout more adaptable.
Be careful with setting a fixed width and height on your elements. If the content in these elements grows beyond these restrictions you’ll run into overflow issues. Keeping the height at auto - which block elements are by default - will be fine in most cases.

@media screen and (max-width: 375px) {
    .card {
        width: 327px;
        height: 501;
    }
}

I would remove this media query, it would make your solution more responsive.

You don’t need to put width: 100% on block elements, they already take up the full width of their parents by default.

I hope you find my feedback helpful! 🌟

Let me know if you have more questions and I'll do my best to answer them. 🙋‍♂️

Happy coding! 😎

Marked as helpful

Blog Card Preview