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

Gatsby, Art-direction, Transitions

@flquenano

Desktop design screenshot for the Photosnap multi-page website coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
4advanced
View challenge

Design comparison


SolutionDesign

Solution retrospective


First time using gatsby, still alot to learn specially on animation and transitions. All feedbacks are greatly appreciated.

-edit Code refactored, SEO and Manifest added. fixed some alignment issues at pricing page.

Community feedback

@justAdevTV

Posted

@flquenano this is AMAZING! Super clean and I love the animations you added in.

Suggestions for improvement:

  • Add alt tags for images (it's good for accessibility).
  • The /pricing page has a horizontal scroll starting at screen width ~540 and lower. Removing the horizontal scroll will make it a lot better.

Again, really nice work. It's hard to find points for improvement at this stage.

Keep up the great work 🙏

2

@flquenano

Posted

@justAdevTV Thank you for your feedback, greatly appreciated it.

found all of the images without alt using img:not([alt]){ border: 5px solid red; }

For the pricing page, i made some adjustments, mainly at the min length of the card.

1

@justAdevTV

Posted

@flquenano awesome! Glad I could help :)

0
P
Matt Studdert 13,611

@mattstuddert

Posted

You've done an awesome job on this challenge! I'm just diving into Gatsby myself and I'm loving it so far. I've typically used NextJS (Frontend Mentor is built using it), but from what I'm learning about Gatsby it's giving NextJS a run for its money!

Keep up the great work!

1
P
ApplePieGiraffe 30,565

@ApplePieGiraffe

Posted

Really nice, Francis Luigie Quenano!

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