5 Basic Chrome Extensions Every Web Designer Must Have
As an intermediate web designer, there are a few things I wish I knew sooner. I mean I struggled to find the right font, the perfect color code, or that complex CSS bit my competitor is using.
And when I’m done with all these, I’d have spent a lot over an hour. That’s enough to kill our motivation. And there have been days when I felt like coding no more. It sucks.
However, that’s the fun part as well. That strong feeling of accomplishment after spending hours struggling on the bits of development is unparalleled for any developer.
But it’s all fun and games until you start getting pissed off of the routine. That’s when you need to find shortcuts and trim down the time on the tiniest stuff. That’s when you need a tool that actually helps.
Through the 3 months of learning web development, I stumbled upon a lot of resources, tips, and tools that have been shaped to make learning easier. A few of them work while the rest only make promises. So looking at the gone days, I decided to make a small list of tools that will actually help you speed up the process. They helped me so perhaps they will come in handy for you as well.
For easy reading, I’ve listed out everything in a ‘Short List’, followed by an expanded ‘Long List’. You can identify what you need in the short list and then jump to the more detailed version in the long list.
*Nothing listed in this article is commissioned or affiliated*
Long List
WhatFont
It’s evident from the name. The extension identifies the font used on a website. So if you ever come across a font that matches what you had in your head all this time, all you have to do is choose the extension, click on the text, and it’ll tell you everything about the font. This also includes info about its color, size, weight, and line-height.
ColorPick
WhatFont and ColorPick would be the most basic and the most useful extensions. ColorPick can identify any color used on a website. Clicking on the extension will bring up a new crosshair and it will instantly identify the colors as you hover it over. The extension will display the color code, including its RGB and HSL model.
CSS Viewer
As a beginner, I struggled to find the exact CSS code of my competitors. Figuring that complex bit will be a lot helpful for a designer. This extension can easily find and display every CSS code a website is using. Just click on the extension and it will instantly give you the CSS of elements that your mouse hovers over.
I have a similar story written on learning web development for free. In case you’re a wannabe/beginner developer, you can check it out for some of the best free resources and learning tips.
Page Ruler Redux
This is basically an on-screen ruler that’s extremely helpful for measuring the dimensions of a website. You can choose the extension and then measure by clicking and dragging your mouse anywhere across a website.
The width and height as shown in the screenshot is the measurement of the highlighted area. The left, top, right, and bottom is the margin from the highlighted area. It’s been pretty helpful for me, especially when I design clone websites to learn.
Window Resizer
Finding different browser dimensions for a responsive design really chugged a lot of my time. This extension can easily resize your browser into different dimensions depending on the different viewable devices. Be it a smartphone, tablet, or computer.
You can also give it a custom width and height and the extension will resize the window accordingly. Pretty neat, right?
Thank you so much for reading the article. I’m really happy to be sharing this with you.
These extensions have been helping me a lot so I believe they’ll prove effective for the designers out there. In case you have any questions or queries regarding the article or the extensions, please let me know in the responses and I’ll make sure to lend you a hand.
Have a great day, all :)
