Submitted 2 months ago

Blog preview card solution

cinquante six• 140

@Cinquantesix

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?

I'm really proud of making this challenge without @media (…){…}. I think It will really help me to build better website in the futur. This is a great new way of thinking.

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

I didn't know about the child size when you use flex-direction:column;. Tanks @gmagnenat for the help about this specific part.

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

I need to try to use more fluid properties like min-width or min-height and also value en fonction like clamp(…). If you know some good read about it…

Community feedback

Gwenaël Magnenat• 1,210

@gmagnenat

Posted 2 months ago

Hey ! Congrats on completing the challenge. There is a great improvement from your previous one. I still recommand you go and fix your QR-code challenge ;) you will practice refactoring and documenting your changes.

I noticed one issue here.

you set a height:100svh on the <main> element. Learn how to update your browser default font-size to test this. Currently your preview card will be cropped at the top and bottom because the height is set to a fixed value. You need to change this to a min-height:100svh instead and it will be fixed.

Happy coding !

Marked as helpful

Lyna• 260

@lynaIFR

Posted 2 months ago

Great work, I noticed that in the CSS reset there are elements that don't exist in the HTML code, you may want to delete them, other than that the code is clean and well written.

Gwenaël Magnenat• 1,210

@gmagnenat

Posted about 2 months ago

@lynaIFR I would not remove stuff from the reset. What if more components are added later to the project? And if the project gets bigger?

It's better to leave the reset like it is in my opinion.

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