Skip to content
Submitted almost 4 years ago

Solution using Next JS and Sass

Brian Farmer•210
@brianlfarmerllc
A solution to the Galleria slideshow site challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I really liked the way this turned out and it was a great project to learn Next.js.

I wish I could have figured out exactly how to get the Masonry layout moving across rows instead of down columns but I'll keep looking for a good solution to that.

Code

Please log in to post a comment

Log in

Community feedback

  • Matt Studdert•13,611
    @mattstuddert

    Awesome work on this project, Brian! I hadn't realised Next.js added the placeholder="blur" attribute now as well, which is nice. We'll need to do some refactoring to add the placeholder attribute to the Frontend Mentor site now as well! 😆

    My main piece of feedback would be to not put event listeners on non-interactive elements, like div elements. For example, the element you're using to bring up the gallery modal is a div. This means anyone using a keyboard or other assistive technologies to navigate the site might not be able to access that content.

    The best thing to do is use anchors or buttons for interactive content. In this instance, a button would make sense as you're staying on the same page. This will ensure people navigating in other ways beyond a mouse/trackpad will be able to interact with your content.

    I hope this helps. Keep up the great work! 👍

  • Ahmed Faisal•5,095
    @afrussel

    Nice work. Looking good in all types of device. I am learning reactjs. It helps me a lot to learn

  • Chamu•13,820
    @ChamuMutezva

    It's looking good on mobile. Well done, will go over your code when I am back on my desktop to learn how you did it.

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