Submitted 5 months ago

Blog preview card with flexbox

Divadovitch• 190

@Divadovitch

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Blog preview card

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

A good use of the flexbox.

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

How to respect the same aspect ratio for the illustration, I used object-fit: cover; to help me with that.

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

With only the images as a model I wasn't sure whether the hover/focus should be applied only to the title of the card or also to the card itself. The same goes for changing the appearance of the cursor. I decided not to place a link on the title but to just change the appearance of it. A comment on these points would be welcome.

Community feedback

Boris• 2,870

@mkboris

Posted 5 months ago

Hi Divadovitch, great job on completing this challenge, overall this looks great.

The hover is applied only to the title and not the card as a whole and for the title being a link I think it's suitable to place an anchor tag around it.

Some suggestions.

Consider using a modern CSS reset at the start of the styles in every project. Like this one modern css reset. This will help reset a list of default browser styles.
It's best practice linking Google fonts directly in the HTML head section rather than directly in your CSS file as it enables asynchronous downloading, improving page load times.

Hope this helps.

Marked as helpful

Divadovitch• 190

@Divadovitch

Posted 5 months ago

@mkboris Hi Boris, Thank you for these suggestions, I have added the link to my favorites and I have taken note of the loading of Google fonts in the HTML head.

Please log in to post a comment

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