Find Dimensions of frontendmentor design without pro
When tackling a Frontend Mentor challenge without a pro membership, figuring out the height, width, margins, and border-radius can be challenging. Often, you have to rely on your eyes and make educated guesses. However, here's a handy trick: open the design preview image in your browser, enter inspect mode, and add a simple HTML element to the body. Set its style to
position: absolute and adjust height, width, top, left, or inset to easily determine the dimensions of any component in the design.
In the video, I demonstrate how playing with these properties allows you to accurately find the dimensions of various elements. Additionally, if you need to pinpoint the exact color, use the browser's built-in color picker in inspect mode.
Remember, as a coder, you have the power to overcome challenges and achieve precise results. Watch the video to see this trick in action and enhance your Frontend Mentor experience!10 Replies
There’s a built in color picker ? That you can use without having a property to apply it to?
No you have to apply color property or you can use the already applied property on the body element
If you want to use a better way go for window powertoys it's more accurate and better than browser's one
couple things:
- You can take a screenshot and measure in any image editor as well, which also comes with a color picker. Even paint will tell you the size, and at least the RGB values of the color you picked. Anything more usually also includes HTML hexadecimal colors
- Don't copy designs pixel perfect. It's a myth anyway, just cause it'll be perfect on your device / browser / screen, doesn't mean it will be elsewhere. Just make sure it looks good in a variety of circumstances, and close enough is close enough
yess you can use image editor too, I just shared it a coding way
It's not the only way but it's one of them and felt like sharing so
thank you for sharing 🙂
I have an extension on Mac Chrome for color picker, was just wondering if there was a quicker way I didn’t know about
there is one in FF at least. When you have an element with a color property, you can click the color swatch and get a color wheel, which has an eyedropper on it that works in the webpage you're on:
there's one in chromium too. i always keep my devtools open lol
also this is awesome
https://youtu.be/IcdCae4MUtY?si=e4GOW8vMlYwNAMbf
Visual Studio Code
YouTube
1 click from browser to VS Code
You can make VS Code the default editor in Edge for the fastest debugging experience #shorts
Learn more: http://aka.ms/open-in-code
That is so cool! Although don't love that it auto syncs changes you make in dev tools. If I'm experimenting with values I don't want them to overwrite what I have automatically. I'm sure there's a setting for that though !
you can obviously disable this if you dont want it but gotta say it fixes more stuff than it breaks at least for me and seriously i love that feature