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 article preview component using Flexbox

P
hdgrid 40

@hdgrid

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I made the layout as a flex layout and learned more about nesting different flex containers together. It was pretty interesting to do it and get it to work, but I feel like it could have been simpler with grid.

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

I had a lot of problems with making the layout responsive. I learned quite a bit about positioning and the way it works, but honestly, I kind of felt like I brute-forced my way through it rather than implementing a well-written solution.

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

I'd like suggestions on how the responsiveness could've been handled differently.

Community feedback

kerekiwere 350

@kerekiwere

Posted

For better responsiveness, use max-width instead of fixed widths. This approach allows elements to scale down appropriately as the viewport size decreases. Otherwise, great job! 👍

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