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 multi-page website | Built with Sapper

Connor Z 5,115

@zuolizhu

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


Feedbacks are welcome!

Community feedback

P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Wow! Your solution looks amazing!

How did you manage to make your solution nearly identical to the original design? My solutions always seem to be slightly too large or small or misaligned in some way!

1

Connor Z 5,115

@zuolizhu

Posted

@ApplePieGiraffe Thank you!

This is not an advertisement🤣, I just want to emphasize how great the design file helps to get the accurate result like this screenshot above😎. This project started with the design system, laying down the font sizes, line heights, letter spacing etc 🤯 (which are given in the sketch file) first and then building the pages.

After I finish a page, I will use a browser plugin called PerfectPixel(https://www.welldonecode.com/perfectpixel/), which you can put the design file overlay on your page, and adjusting the opacity to see the differences between your page and the design file 👀.

You do can use PerfectPixel plugin only to get the ideal result, but using design file + plugin will get the good result faster 🥳.

Hope I explained clearly, happy coding🙌!

4
P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

@zuolizhu

Thank you for your reply. I'll certainly look into PerfectPixel!

Happy coding to you, 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