Submitted 10 months ago

Blog Preview Card using semantic HTML and CSS

Selina Lavery•50

@SelinaLaveryDev

A solution to the Blog preview card challenge

Preview Code

Solution retrospective

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

I am proud of how much better I am getting at creating the semantic html, and CSS based on the figma file. And my use of variables for the presets. Will try to use less fixed measurements next time.

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

With the image for the mobile screen I noticed that the border radius disappeared, then realised to use the object-fit property and set to cover.

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

How best to set responsive measurements and still be able to get the card and content to be exact, for both desktop and mobile.

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on Selina Lavery's solution.

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