Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Blog preview card

@Alexandru-Enescu

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

It didn't take me a lot of time to finish the challenge.

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

I was confused what is the most efficient way to adjust the size of the image.

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

I'm not completely sure if my code is maintainable. For example, is it more correct to add margin to each element or to use flexbox?

Community feedback

Juan 480

@JEWebDev

Posted

Hello @Alexandru-Enescu!

Well done! Let me answer your questions:

1. What's the most efficient way to adjust the size of the image?

I think the best way of adjusting the size of an image in this case is to make it full size of the parent element and adjust the parent element instead. like this:

.img{
    min-width: 100%
}

in this case you can wrap the image with a header tag.

2. Do i add margin to each element or use flexbox?

Using flexbox and gap will make it easier to make changes in the long run.

Imagine you have 4 components like this and want to change the spacing a bit. using margin on each of them you will have to change it on each element of each card. if you use flexbox you only have to change the gap property of each card container in case they have different spacing.

Happy coding!

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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