Design comparison
Solution retrospective
Any advice is greatly appreciated, just starting out so I could use all I can get.
Also if anyone has any advice for which chrome Extensions can be used to better assist in developing websites please help me out and drop me a line!! Thanks
Community feedback
- @RyukioMiyamotoPosted over 2 years ago
@RJC26 I use Figma for this purpose, it's not optimal but you can open the design files and measure the spacings with it. I tried using VisBug too, which is a chrome extension, but I had a hard time using it, but it's worth a shot
Marked as helpful1@RJC26Posted over 2 years ago@RyukioMiyamoto Thanks man thats honestly a massive help, im going to try figma so that alteast as you said I can measure the spacings and that should help with matching the designs with less guessing. your a hero my friend!
1 - @RyukioMiyamotoPosted over 2 years ago
You just missed a few details like the shadows, and the background image could cover everything by using background-image: contain, but you did a great job overall! As for the extensions, I would recommend using Lighthouse, for checking accessibility, SEO, perfomance and more, for both desktop and mobile.
Good coding!
Marked as helpful1@RJC26Posted over 2 years ago@RyukioMiyamoto AHH Jeez thats what i was looking for with the background I was trying to use background-size: cover; but couldnt get it going so I ended up settling for what I achieved! Thanks will defo get lighthouse, also I was wondering if there is any extension or program where you can open an image and do on screen measurements. So when you get the templates you could measure pixel lengths more accurately? Thanks for the help!!
1
Please log in to post a comment
Log in with GitHubJoin 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