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 using flexbox

@MesrouaDjamel

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 specific areas of your project would you like help with?

I've tried to redirect to social networks when the user clicks on the icon with different methods but it doesn't work. i'm using nextJs if anyone has any suggestions.

Community feedback

P

@raswonders

Posted

Hi, congratulation on finishing this challenge!

I like your take on shared component and using of inline svgs. They seem to render asap. In my solution I loaded them via <img> but they seem to have some delay to them.

If i can give you a tip how to make experience little better I'd make ArticleCard more responsive. ArticleCard has currently fixed size which make it quite rigid and hard to reuse. One place where rigidity shows up is distorted Image, which is sized up relative to its parent while ignoring its intrinsic aspect ratio.

I think solution in general could be to leave elements grow with their content and only cap the extremes either by putting hard stop to it with max-* or by shifting layout.

I'd also suggest cleaning up the code a little, removing unused code, fixing spelling mistakes like setiSClicked, running code through formatter etc. This would put a little bit of shine to it and showed that you care.

Hopefully you find my rumblings at least somewhat useful.

Good luck with future challenges!

Marked as helpful

1

@MesrouaDjamel

Posted

@raswonders thank you for your feedback it s very useful

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