Google Chrome Extensions for Web Design Students

Nov 10 2010 by Julia May | 29 Comments

Google Chrome Extensions for Web Design Students

Google Chrome — being a fast, extensible and user-friendly browser with a growing gallery of extensions — is perfect for work, study and communication on the Web. The browser is a great option for students, particularly those just getting started with web design and web development.

This is a list of essential Google Chrome extensions to enhance the studies of every student and make their journey through the art and science of web design more efficient and enjoyable. Though this collection is geared towards web design students, anyone with a passion for learning — whether you’re an information junkie, an avid reader, or a social media curator — will find many of these Chrome extensions to be useful.

Also, here are other Google Chrome extension collections that might interest you:

Awesome Screenshot

Awesome Screenshot

This extension has a number of screen-grabbing options, including whole-page and selected-area capturing. It also gives you the ability to annotate and draw on your screenshots. Awesome Screenshot also comes in handy for writing tutorials and blog posts, as well as cataloging your learning through screenshots and through annotating images of web designs.

Web Developer

Web Developer

This Chrome extension has a vast suite of tools and functions for dissecting and studying web page layouts. Web Developer is great for inspecting HTML elements and seeing style rules that affect them, determining colors using the color sampler, validating sites with its suite of validation tools, and much more. The Information set of features consists of 17 functions that allow you to examine the structure of a web page, all of which are wonderful for educational purposes. Web Developer is a versatile extension that both beginners and seasoned pros can utilize in their projects.

BuiltWith Technology Profiler

BuiltWith Technology Profiler

Beginning web designers are often curious about how certain websites are built. You can do this manually by inspecting a site’s source code, but if you want your browser to do all the hard work for you, then check out BuiltWith, a Chrome extension that generates a detailed website profile. It presents identifiable web technologies, frameworks, server information, open source publishing platforms used (such as WordPress or Drupal), and more. This extension is a wonderful tool for research and learning about how websites are produced.

Window Resizer

Window Resizer

Although Web Developer has a built-in window resize function, Window Resizer is a great alternative if you need a quick way to emulate various browser sizes. The default list of options includes commonly used screen sizes. This is a great way to study how web designs work under different resolutions and screen sizes. Especially with CSS3 media queries, this tool can give students ideas and lessons on how to create flexible web layouts that work well under various user agents (from desktops and netbooks to mobile devices).

StayFocusd

StayFocusd

There are plenty of distractions on the Web, and if you easily yield to them, StayFocusd is what you need. This Chrome extension keeps you on task by restricting the amount of time you can spend surfing the Web. Using it is simple: You schedule the extension to lock certain websites for specific blocks of time. It’s great for making sure Facebook and YouTube won’t distract you when you’re supposed to be studying or thinking over a design concept.

You can also configure StayFocusd to allow only specific subdomains and file paths while still blocking the other parts of a site. By allowing only certain portions of a website, you can (for instance) bookmark a site on Delicous.com even if the front page — which can drain your productivity by enticing you to click on deliciously popularized bookmarked links — is off-limits.

Apture Highlights

Apture Highlights

Whenever a question pops in your head, Apture Highlights pops out an answer. This ingenious Chrome extension allows you to get instant access to Google, YouTube, Flickr, Wikipedia and more without ever leaving the page. Just highlight a piece of text on a web page and search results from over 60 sources will be instantly delivered to you in a pop-up window. Not sure what a word means? Dictionary definitions are included in search results as well.

Apture Highlights is a great study aid. For example, say you were reading about HTML5 on a blog, and you encountered a term or phrase that was unfamiliar to you. All you have to do is highlight the term/phrase and the Chrome extension will help you discover resources pertaining to the highlighted item.

DayHiker

DayHiker

DayHiker is a straightforward yet versatile calendar app for Chrome that is integrated with Google Calendar, extending its basic functionality to fit a student’s needs.

If you’re a student, then there’s a big chance you are juggling academics, sports, a part-time freelance design gig, and social activities. DayHiker lets you keep track of your busy schedule and allows you to stay on top of your tasks while you browse the Web. You can check your tasks and upcoming events, set reminders, and more. DayHiker also supports Google Apps, which will especially appeal to devoted Google users.

Diigo Web Highlighter and Bookmark

Diigo Web Highlighter and Bookmark

This Chrome extension allows you to highlight, bookmark and tag the text on any web page and permits you to leave yourself sticky notes. You no longer have to bookmark the entire page when you need only a specific chunk of text from it. The extension stores a record of any website that you mark up, plus, you can save your highlights and stickies on the cloud for backup and access anywhere, anytime.

The application is also great for collaborative projects as it allows you to create groups for pooling in findings and sharing resources.

GradeGuru Citation Manager

GradeGuru Citation Manager

When you’re working on essays and assignments, managing references and citations can be a real headache. GradeGuru Citation Manager can help you cope with that task painlessly and from right within your browser. The idea behind GradeGuru is pretty simple: just highlight text on any web page and the extension will automatically generate the associated citation data. You can then paste separate citations and an entire bibliographic list into MS Word, MS PowerPoint and Google Docs. Currently the extension supports three popular citation systems: Harvard, APA and MLA.

GradeGuru Citation Manager can hardly compete with Zotero, a comprehensive bibliography manager for Firefox, but GradeGuru does what it promises, and as long as you are on Chrome, it will make your academic pursuits easier.

Yoono

Yoono

With Yoono, you can have access to Facebook, Twitter, LinkedIn, Flickr, Yahoo IM and more, all in one place–your Chrome browser. The number of options the application provides is truly impressive. To mention a few: you can use most popular social networking services in a central location; the Share feature allows you to share both the entire page you’re viewing and individual items on the page (like an image or block of text); you can upload images to Facebook, Twitter and other networks through Yoono. Yoono is a timesaving Chrome extension for efficiently managing your social networks so that you can spend more time on your studies.

Chromey Calculator

Chromey Calculator

Chromey Calculator is a scrolling calculator for Chrome that uses Google and Wolfram|Alpha to generate results. Now you’re probably thinking that’s just for math geeks. Hold on. Whatever discipline you’re in, Chromey Calculator will likely come in handy to you. In addition to basic calculator functions, it has lots of other features such as unit/currency conversion, equation-solving, mixed-unit calculations, user variables, permanent calculation history and more. Whether you’re trying to accomplish your homework in math class or wanting to calculate the dimensions for a grid-based design layout, Chromey Calculator makes it easy to find the answer in seconds.

EM Calculator

EM Calculator

Pixel-to-em conversion is something web designers occasionally have to do. To simplify this task, you might want to use EM Calculator, a straightforward Google Chrome extension that allows you to convert pixels to em units (and vice versa).

Firebug: to Chrome or Not to Chrome?

Firebug is probably the most popular web browser add-on for web developers and web designers. Firebug was built as a Firefox add-on, and though there is Firebug Lite for Google Chrome, the Lite version is not as robust as Firebug for Firefox. It works quite well for basic inspection of elements, but in order to leverage the real power of Firebug, you need to use it in Firefox.

However, there is the built-in Google Chrome Developer Tools that is equally capable (access it by going to Tools > Developer Tools or pressing Ctrl/Cmd + Shift + J).

Google Chrome Developer Tools

Google Chrome Developer Tools has all the major features that Firebug has (HTML element inspection, console, error reporting, and so forth).

Related Content

About the Author

Julia May is a freelance writer and blogger now working at CustomEssays, a qualified essay writing service provider in the UK. You can follow Julia on Twitter @indigomay.

29 Comments

Sensitive Designs

November 10th, 2010

I wanna try this “BuiltWith Technology Profiler”.. Looks cool :)

Joshua Chase

November 10th, 2010

I’ve been waiting for someone to put an article like this together. Thank you for this awesome resource. It’s nice to see there are such a plethora of great extensions available now. Maybe I can stop having multiple browsers open all the time. It’s hard to move away from Firefox with Firebug for debugging but I’m going to try :)

Thanks for the post Julia, great stuff.

Dan

November 10th, 2010

Some good extensions here I have not seen before, thanks!

The Evernote extension is also really great (your need an evernote account of course!!)

I’ve also just started using ScribeFire, which is pretty powerful too

Sarbartha

November 10th, 2010

“https://chrome.google.com/extensions/featured/web_dev?hl=en-US” is the best link to find web developer extension on Chrome

A reader

November 10th, 2010

I prefer the official Google Screen Capture plugin (https://chrome.google.com/extensions/detail/cpngackimfmofbokmjmljamhdncknpmg) but other than that, it’s a great list!

thecodezombie

November 10th, 2010

Nice Article.

But strangely enough, my main concern is the author (or at least the company she works for – not a personal attack).

Essay Writing Service? I understand that everyone (inc. writers) have to pay the bills, but, it’s perhaps the most immoral ‘legal’ business I can think of.

Would have thought of all people, someone that wants / has a career in writing would uphold the ideals of students writing their own content.

Also, would’ve thought better of SixRevisions.

“brb, just going to finish off the website I’m making for the BNP. It looks just like SixRevisions but I swear I didn’t steal any of the design or code”

Marcus

November 10th, 2010

Great article! I was looking for that extra push over the Firefox cliff.

Bfred.it

November 10th, 2010

While Chrome’s integrated dev tools are “pretty cool,” in my opinion they are not as good as Firebug. For example, it often takes seconds for the DOM change in Chrome’s Elements tab, while they change almost quickly and with highlighting in Firebug. So, basically, when it comes to Javascript testing and debugging I just open Firefox (+FireBug+FireQuery)

Instead of BuiltWith I use Chrome Sniffer, which is just perfect. I mean, I really don’t need to read what jQuery is every time I check a website: https://chrome.google.com/extensions/detail/homgcnaoacgigpkkljjjekpignblkeae

And, wow, the Web Developer is great! Although it should probably be a panel rather than a popup. Perhaps they could make it an actual “popup window”.

Usi

November 10th, 2010

2 of these extensions are really help ful for me, I usually takes screen shots but I am fed up of whole page extensions but this extension is good I am going to take it.

the calculator one is also helpful for me.
thanks for the share.

Dainis Graveris

November 10th, 2010

Very good collection of Chrome extensions. Of all them, I like StayFocusd the most. Will come in handy especially when I really need to focus on the tasks at hand. Thanks!

Young

November 10th, 2010

It’s about time! I haven’t looked at chrome extensions in a while – last time I checked it was nowhere near as useful to us web designers as FF plugins…but this list looks promising. StayFocusd is hilarious. Thanks for great tips.

and yeah @thecodezombie that essay writing service don’t sit right with me either…but that’s another forum.

Theo

November 10th, 2010

Great list of Google Chrome Extensions not just for Web Design Students!

Jacob

November 10th, 2010

While a lot of these plugins are excellent, for web design students I would recommend working in Firefox with Firebug and the other developer extensions over Chrome.

Also TabCloud. Great for saving and syncing your windows/tabs/sessions. :)

Marie

November 10th, 2010

BuiltWith is going to be my new best friend, thanks for this.

ValeraZ

November 10th, 2010

Thank You, nice collection.
For now, my favorite will be StayFocusd.
thanks again!

Carrie

November 10th, 2010

Surprised Glass (https://writeonglass.com) isn’t mentioned for collaborating and writing notes on top of pages. Been using for a few months and it keeps getting better. All notes are private for only who you choose to share with and work as chat if everyone on same page. Really clean design too.

Looks like they’re still private but I joined using code “miranda” which might still work.

Going to check out some of the others too. Thanks!

Martin Oxby

November 10th, 2010

I think I need the StayFocusd extension. I will be book-marking this and building things into Chrome to aid my cross-compatibility work.

Thank you.

Eko Setiawan

November 11th, 2010

Very useful…helped me to work on chrome.
Thanks…

Pltka

November 11th, 2010

Nice lot of extensions. By the time Chrome will be No.1 in business of internet explorers, i believe.

Federico

November 11th, 2010

Thanks for the list. I really want to use only chrome as my browser, this helps a lot.

Felipe

November 11th, 2010

Thanks for the list. I really want to use only chrome as my browser, this helps a lot. [2]

Jeff Woodruff

November 11th, 2010

CSSViewer is by far the most useful extension (as a developer) that I use with chrome. I really like the web developer extension a lot too but I’ve found it to be finicky in chrome.

Anthony Madhvani

November 12th, 2010

Am I the only one who would love an extension that puts all other extensions in a drop down menu? :(

Sagar Gholap

November 13th, 2010

Hey Julia, I really appreciate your efforts in compiling this extremely useful list of extension for new Web Designers like me.

But while getting some of them installed in my chrome, I found that the url for Aputure Highlights goes to a 404 page on this site itself. Please fix it as soon as you can.

Regards,
Sagar Gholap

Jacob Gube

November 13th, 2010

@Sagar Gholap: Thanks. It’s fixed.

Sam

November 14th, 2010

One of the biggest complaints I see about Chrome is the lack of extensions compared to Firefox.

Hopefully the amount of extensions will grow and grow.

Jordon Allen

November 14th, 2010

Nice collection I just installed most of these right before I read this article. Although I did find a few more that will be helpful nice collection

adechriz

November 15th, 2010

i use firefox, but after reading this i want to try google chrome

Leave a Comment

Subscribe to the comments on this article.