Design comparison
SolutionDesign
Solution retrospective
My solution to this challenge. It was my first experience with Tailwind and I can't imagine going back to vanilla css already...
The main problem of this challenge is usage of the <picture> tag in nextjs. It does not leverage the benefits of next/image which results in CLS. Recently, there have been some developments in bringing <picture> to nextjs but I must say that I still do not understand how to use them to create a <picture> component (and if they even can be used to enable "art-direction-based" images). If someone could point me in the right direction I would be much obliged.
Community feedback
Please log in to post a comment
Log in with GitHub
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