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

Photosnap multipage website using React, styled components

@csoumya14

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


Any feedback and suggestions on how I can improve are very welcome!

Community feedback

T
Matt Studdert 13,611

@mattstuddert

Posted

Nice work on this challenge, Soumya! Your solution looks great. Did you learn anything new while working through this project?

My main piece of feedback would be to not use ranges in your media queries. For example, you've got queries like these:

@media only screen and (min-width: 421px) and (max-width: 767px) {

}

@media only screen and (min-width: 768px) and (max-width: 1023px) {

}

When you write queries like this it often leads to a lot of repetition and duplicate code. Instead, I typically use only min-width media queries and also use values like the minmax() function in CSS Grid to reduce the times I'm using media queries for layout shifts.

You've done a really good job on this challenge. I hope you enjoyed working through it! 🙂

0

@csoumya14

Posted

@mattstuddert

Hi Matt, Thanks for the feedback. I was uncertain about using media queries and this helps me a lot. I learned few things while working on this project.

  1. I tried to make the navigation bar accessible using React hooks.
  2. I also learned how to scroll to the top while navigating to different pages using React Router and hooks.
0
T
Matt Studdert 13,611

@mattstuddert

Posted

@csoumya14 nice! That's great to hear you picked up some new tricks!

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