Frontend Mentor | Responsive Blog Preview Card with hover state coding challenge solution

Solution retrospective

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

I am proud that this is my second challenge and l amazed at how much l am learning through tackling the coding challenges. This challenge took me less time than when l attempted the QR Code Component challenge because l now have some understanding of HTML5, Flexbox and how center elements and make them responsive.

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

I spent so much time trying to figure out why elements were displaying horizontally and next to each when there were block-level elements. I then read on the issue and realized that is the default flow of elements when using display: flex.

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

Read more on Flexbox (the execerices have allowed to just scratch the surface) Read on the difference between em and rem and best use case for each unit.

Community feedback

Dylan de Bruijn• 3,190

@DylandeBruijn

Posted 2 months ago

@ownedbyanonymous

Hiya! 👋

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

Things I like about your solution 🎉

Use of semantic HTML elements

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.
You could add a min-height: 100vh to your body element so it takes up the full height of the viewport while still being able to grow when the content inside it grows.
Try experimenting with CSS variables, they help you make your CSS values more reusable across your code.
I suggest using clear descriptive CSS classes like .card, .card-title and .card-description.
You don't need width: 100vw on your body. body is a block element which take up the full width of their parent by default.
Try making your solution more responsive.
I suggest not setting a fixed height and width on elements. If the content in these elements grows larger you'll run into overflow issues. Try keeping the height at auto which block elements have by default.
I suggest not using the small element and replacing it by a heading or paragraph element.
I suggest replacing the address element by a div. The address element is for addresses.

I hope you find my feedback valuable, and I would appreciate it greatly if you could mark my comment as helpful if it was! 🌟

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

Happy coding! 😎

Marked as helpful

ownedbyanonymous• 160

@ownedbyanonymous

Posted 2 months ago

Hie @DylandeBruijn 👋🏾 thank you so much for your feedback, it was really detailed and helpful. May you please kindly assist me with a bit of details on the first point. I get do get what you are saying, on smaller devices the card touches the right margin of which some padding and for the card to remain centered without having to scroll. I have an on pull-request on GitHub please feel free to leave some comments.

Responsive Blog Preview Card with hover state

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community