Four Chrome extensions for people learning CSS

It's a known fact - to get better at CSS, you need to practice( a lot!! ).

I personally recommend copying live sites rather than building websites from PSDs.

Why?

Because most PSDs are really hard to work with and are hard to extract content from.

Websites on the other hand are easy and when you're done copying the site, you can check out the websites source code to check out how the developer structured his site and compare it to yours.

This will help you out a lot! You'll be surprised at how fast you'll get good with CSS by copying sites. This is what I did too and still do!

Here are some extensions that I personally use on Chrome to help me with the process of copying. Some of these are also available on other browsers.

1.Colorpeek:

This is a great little tool to extract the colors used in a website/web app. Have you ever seem a color on a website and wanted to used it for your own projects? Well this extension helps with just that. With a single click, it extracts all the colors used on the page and displays them in a tab with their hex codes.

You can grab it for Chrome from here.

Colorpeek Website

2.Fontface Ninja

Frontface Ninja is similar to Colorpeek but for fonts. It allows you to "mask" a page and you can view the font used, properties and font weight on some text. It also allows you to download that font for your own use.

This app is cross-platform. You can grab it for different browsers from here.

3.Image Downloader

What I don't like about PSDs is the process of extracting images. Well this extension makes the process of extracting images from websites a breeze. Just click on the extension icon and it will load up all the images and then allow you to download them to a destination on your computer. You can also choose which images to download.

Get it for Chrome

4.Window Resizer

There are a lot of devices out there and it's our job as web developers to make sure that our products look stunning on all devices. You have to resize your browser to specific sizes to test it for different screen sizes. That can be a bit tiring. This little extension makes that process easier by providing you with sizes for different devices. You can click on a device and your browser window will scale to that size.

Get it for Chrome