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 design w/touch control, animations, React, SCSS, CSS Grid

@anglicus

Desktop design screenshot for the Galleria slideshow site coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


I thought this would be a fairly easy challenge, but the layout presented some tricky problems that weren't obvious on first glance. I'm fairly satisfied with my solution, though I'm sure my code could use improvements. Suggestions welcome. I tested on a variety of devices to ensure consistent performance, but if anyone notices weird behavior or a bug, let me know.

Navigation of the slideshow can be done via clicking on the buttons, arrow keys, or swiping left/right on a touch-enabled device. The light box can also be opened and closed with the space bar.

Community feedback

Warren 630

@warrenlee

Posted

Hey James, good work! I am currently on a 27" screen and the layout for both homepage and slideshow looks very spaced out so you might want to add a container/max-width to prevent this from happening, and the snap of the slideshow doesn't seem to flow very smoothly, especially at the end where it snaps a little awkwardly, but that's just my preference. Other than those, seems to work flawlessly! Good job on that

Marked as helpful

1

@anglicus

Posted

@warrenlee Thanks for the feedback. Yeah, I should have though someone might have a larger screen than 1440. I will work on fixing that. I will see if I can fine tune the page scrolling a little, too.

1

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