Submitted 9 months ago

Blog Card Preview

DEVADE/• 80

@AdeMEDIA

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

This is my submission for the Blog Card project. The project focuses on creating a responsive and visually appealing card using HTML and CSS.

Features:

Structured content with semantic HTML elements.
Design with CSS.

Are there any suggestions for improvements?

I would greatly appreciate any feedback.

Thanks in advance, developers! ❤️

Community feedback

Daniel 🛸• 44,230

@danielmrz-dev

Posted 9 months ago

Hello @AdeMEDIA!

Your solution looks great!

I have a couple of suggestions for improvement:

For semantic reasons, replace your section.container with main.container. This tag change has no visual impact but they make your HTML code more semantic and improve SEO optimization as well as the accessibility of your project.
Also, that footer is supposed to be the footer of the page, so you can place it outside the card.

I hope it helps!

Other than that, great job!

DEVADE/• 80

@AdeMEDIA

Posted 9 months ago

Thanks for this mate, I will improve more on the next challenge ❤️🤗 @danielmrz-dev

Junior• 40

@ejmabunda

Posted 9 months ago

I might be nitpicking, but there's a border around the card which you forgot to add, and the author's name is too close to the avatar. Apart from that, it looks good.

DEVADE/• 80

@AdeMEDIA

Posted 9 months ago

Thanks for this comment mate @ejmabunda Can you recommend how I can shift the name for the pics please. I tried all method but it's not working

Junior• 40

@ejmabunda

Posted 9 months ago

@AdeMEDIA flex has a flex-gap property, you can use that to add space between the pic and the name.

DEVADE/• 80

@AdeMEDIA

Posted 9 months ago

I've actually use padding-left to add more space. Thanks 🙏🏿👍 @ejmabunda

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