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 | Flexbox + Responsive Layout

@TheNewbie-Coder

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?

I'm super proud that I'm able to actually apply what I've learnt from the self-study tutorials and our solid frontend community to apply them in real-time, and it's something i was not able to do for a very long time. But, i'm taking it one-step at a time and understanding the code from what i write and others as well instead of blindly following.

The cool thing is that i get to do trial and error with the elements and test out what works and what doesn't. long way to go but fingers crossed!

I would structure my code more categorically and cleaner as my css properties are all over the place.

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

Lots of overflow and mobile optimization issues. I just took a breather and tried to understand where i went wrong and saw another member's code and tried to understand it (didn't copy because there were some elements i didn't understand yet from that person's code but hopefully i will sometime soon).

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

Sand down the amount of CSS i've written because i feel there's tons of unnecessary properties i inserted in there and would like a cleaner and efficient way of making the code shorter but effective.

Community feedback

Adriano 36,730

@AdrianoEscarabote

Posted

Hello David Jonah, how are you? I was really pleased with your project, but I’d like to offer some advice that might help:

To center a div, you can do something like this:

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

About the excessive amount of css that you are relevant to above, I advise you later on when you want to learn something good and useful, learn tailwind css, it is an excellent tool and it helps a lot when organizing.

The rest is spot on.

Hope it’s helpful to you. 👍

Marked as helpful

1

@TheNewbie-Coder

Posted

Thank you for the feedback, brother! Truly appreciate it. Was struggling with this. @AdrianoEscarabote

Thanks!

1

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