Design comparison
Solution retrospective
A lot of ideas were expressed in the code. Somewhat created a tailwindcss like utility in scss. Only problem was that I didn’t know how to express some-utility:desktop like media queries so this was abandoned. Also had a simple script that scaled the ui. Using font size of 10px on the body and writing everything in rem, you can use slope formula to scale your ui linearly. Could also use multiple regression in a similar way.
Any feedback on how to design this better. The image switching out to absolute positioning made this harder than it should be. The margins and padding are off I’m sure. This isn’t a perfect solution as this project made me quite frustrated. Didn’t feel like this was ‘newbie’.
Community feedback
- @louisdtbPosted over 1 year ago
Your submission matches many of the original features.
Some details to look for. The original has a defined page padding, allowing all content to line up nicely. If you are consistent in your padding, your nav and footer will line up with the body content.
There are some differences in font-size and spacing. Designers will notice if their design does not match the result. These same designers will love you for using Figma or Sketch to check that the spacing is the same. This is true for the spacing between grid items and between text elements.
Frontend Mentor also seems to have something where the colors provided sometimes don't match the ones in the screenshots. The dark blue in the original is lighter than in your design. There is also a vertical gradient in the original page background.
0
Please log in to post a comment
Log in with GitHub
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