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

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

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

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

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

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

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 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

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

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

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 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

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).

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.