Submitted 3 months ago

Flexbox, BEM solution of Blog preview card challenge

josip-h• 90

@josip-h

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 am the most proud of completing the project and for sticking with practicing the skill of web development. I wouldn't do almost anything different the next time as the next project will have its lessons and the most I am hoping for is that the lessons I learned earlier will be of great help with solving new problems and in making me more efficient in the process.

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

There were a few challenges but nothing too serious. The first one was with using git. Since I'm somewhat new to using git and this time I was using two different computers for writing the solution I needed to learn how to fetch the newest versions of code. The process is relatively straightforward and was solved by using Chat GPT. The other small problem is with motivation for writing documentation as it's not as fun as writing code.

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

If anyone has some experience with the BEM naming convention I would be grateful for any comments regarding my implementation. Also, any other suggestions would be greatly appreciated. Thanks!

Community feedback

Motunrayo Adeneye• 750

@motuncoded

Posted 3 months ago

Well done on your attempt on the blog preview card challedge... You can do this by centering your card

body{
display:flex;
justify-conent: center;
align-items:center;
min-height:100vh
}

I hope you found this useful

josip-h• 90

@josip-h

Posted 3 months ago

Hi Motunrayo, thank you for your comment. In the QR code component challenge, I used a similar approach as you suggested to center the work with the difference that I was using the min-height property to specify the exact height adequate to show the entire page, and then as the second property, I specified height as 100vh. Now I see that in this case, it's sufficient to just set the min-height property to 100vh and achieve the same result with less code. Thank you!

Gilbert Koomson• 260

@Gilbert-Koom

Posted 3 months ago

Add more margin to the top of the the container so that it aligns vertically with the design

josip-h• 90

@josip-h

Posted 3 months ago

Thank you, Gilbert for commenting. Suggestion received and problem solved. Thanks.

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