12 Best Google Chrome Extensions for Web Design Students

chromehands 12 Best Google Chrome Extensions for Web Design Students

As a Web design student you’re constantly learning new and often complex concepts that can sometimes seem overwhelming. You’ll need all of the tools possible in order to help you learn and to also make your job easier. With Google Chrome’s speediness and growing popularity, it’s a perfect browser for Web design students to get their feet wet with. This list of extensions are especially great for Web designers just starting out. They’re not only easy to use, but they will also help inspire students and make learning fun.

1. Chrome Palette

photo1 12 Best Google Chrome Extensions for Web Design Students

Lets you create a color palette from any image. This is useful for finding out the different colors used in an image that can then be used for your website. You can use these colors to make everything blend and look aesthetically pleasing.

2. Google Font Previewer

A great way to preview different fonts in different variations before using them on your own website. This is useful for finding a font that will look good with the design of your site. The fonts are taken from the Google Font Directory.

3. Window Resizer

photo3 12 Best Google Chrome Extensions for Web Design Students

The concept is simple: it resizes the browser window for you so that you can see what the page will look like at other resolutions. This is important because not every computer user will have the same screen size. You’ll need to know what your website will look like to those with smaller or larger monitors as well as those on mobile devices.

4. Web Developer

An easy way to add numerous advanced Web developer tools to your browser in an organized format. You can edit CSS as well as display and disable other types of information and elements on the current Web page. Great for doing extensive developing and debugging.

5. BuiltWith Technology Profiler

Are you wondering what the currently website you’re viewing was built with? Wondering how they got that cool feature to work? This extension can tell you all of that by looking up a page and telling you all of the technologies used on it. This is great for learning about new technologies that you may be able to implement on your own website.

6. Eye Dropper

A very handy tool that can pick colors from any Web page and show you the exactly what the hexadecimal and RGB values are for it. This is great for matching colors on a website without having to look through the code. If you see a color that you like as you’re browsing the Web, you can just use this to find out what it is and then use it on your own site.

7. MeasureIt!

photo11 12 Best Google Chrome Extensions for Web Design Students

With this you can draw a ruler around any element on a Web page to find out its exact measurement in pixels. Web design is all about measurements and making sure everything fits perfectly without overlapping and this extension can help you with that.

8. Firebug

Another great Web development tool that is meant to be used in conjunction with other development tools for modifying and debugging websites. “Provides some cool features like inspecting HTML elements with your mouse, and live editing CSS properties.”

9. Lorem Ipsum Generator

photo31 12 Best Google Chrome Extensions for Web Design Students

A very easy way to create the ever-popular “Lorem Ipsum” dummy text for your website templates. “The main purpose of this is to use the less amount of code (and also memory) and help the developer get the job done.”

10. Validity

The easiest way to validate the HTML coding of any website. Just click on the icon and within seconds you’ll be given any validation errors for the page. Since it’s so important to have valid code for performance as well as SEO, this is a must-have extension.

11. Webpage Screenshot

photo2 12 Best Google Chrome Extensions for Web Design Students

They say a picture is worth 1,000 words, so does that mean a screenshot is too? Well with this extension you can take screenshots and then save, share, print or edit them. Sometimes you may come across a Web page that will inspire you or give you a great idea to use on your own site. With this you can capture it, add notes and then save for later reference.

12. Code Cola

A great tool for modifying the CSS styling of any Web page. “Operators can type the generated code in the cms’ node style properties; no need to open Photoshop, Axure and other tools, but directly open the tools to edit, save and then throw the file to front-end; front-end check the code, then coding based on the generated code.”
If you’re also looking to enhance your productivity while working, StayFocused may be your best bet. It’s normal to get frustrated and give into distractions, but StayFocused can help you overcome all of that by blocking out those distracting sites and forcing you stay focused on work – thus increasing productivity. With all of these cool extension though, it should be pretty easy to stay focused on Web designing. Good luck!

This guest post is written by Lior Levine, a marketing advisor for an online company specializing in a to-do list app. Lior also advises at a cancer treatment center that specializes in personalized oncology exams.