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

Responsive Blog Card Using Flexbox

Osama 160

@osamabeinglagging

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?

This was actually my first project EVER. Before this I just copypasted a tutorial to get a feel for how real websites are actually structured. So I can't think of anything I'd do differently because I'm a total newb.

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

I had issues while trying to center a div so I looked at a few solutions of this problem. I know I'm sorry but I didn't copypaste anything really. Just ensured that using display: flex; on body wasn't a bad move and others were using it as well.

Also I learned about a new thing called width: fit-content. Very interesting can't wait to work with it in the future.

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

I guess any tip/feedback helps because I believe the code isn't really good so any tip will help me immensely.

Community feedback

@rzuanisko

Posted

Hi, im newb too, but i can tell you about nice method center a div. Give your .container - position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) // for center

I rly like this one.

0

Osama 160

@osamabeinglagging

Posted

@rzuanisko Yea I knew that but it felt too "hacky" in some way. But I did figure out a better way using grid/flex (both works :D) and I used those in my later projects. But thank you very much.

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