Notification Page with NextJS
Solution retrospective
When working on a project and you don't have adesign file to work with just an image, what is the best way to match the design, especially with media queries? Just eyeball it?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @kabir-afk
Well the design images provided to us have a desktop resolution of 1440 x 900, height can vary in some designs but majority of the times it is somewhere around 800 and 900 . . . in order to match the design and generate a pixel perfect screenshot, you can check out this article here. It'll give you a step-by-step guide on how to achieve design accurate web page.
But that's just the first part . . . in order to achieve pixel perfection , you'll need to get the dimensions of your components right as well. Mere eyeballing isn't gonna get you anywhere. You can check the dimensions in your design using photoshop and reassure those dimensions in your webpage either by inspecting the element or using extensions like Meausre It. Since we have to make our sites responsive , we obviously need to use relative units , and inspecting the element again and again only slows us down , so I prefer using the extension . This'll help you be more accurate . . . hope I was able to help , keep grinding!! 💪💪
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