Frontend Mentor | Vite News Homepage coding challenge solution

Solution retrospective

Although a simple challenge, I had a difficult time trying to resize the images at the bottom of the page to have the same length in width and height without looking strange. But overall, it was a fun challenge. Any feedback is welcome. After all, that's how we grow and learn as developers.

Thank you!

Community feedback

S MD suleman• 3,530

@sulemaan7070

Posted over 1 year ago

hey Ebenezer😄, you really did a pretty good job. and your site looks accurate to the design🎉💯... The new thing which I have observed in the code is you used the useEffect and width of the screen to change the image... I had no idea we can do that...did you use that on purpose?....if it was on purpose then great job! otherwise since you have already used tailwind this following way is much simpler!!

<img  className="flex xl:hidden"  src="mobile-img"/>
<img  className="hidden xl:flex"  src="desktop-img"/>

Marked as helpful

Ebenezer• 540

@ekankam

Posted over 1 year ago

@sulemaan7070 Thank you Suleman. That was the only solution I could come up with to switch the images based on the breakpoint. But your solution is so much simpler than mine. I will try that in my next challenge. Thank you.

Vite News Homepage

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community