Top Free Resources for Web Developers

The life of a web developer is ever-changing to keep up with the evolving industry that seems to spawn new trends and tools every week. There is so much to learn and discover that it can feel overwhelming, particularly for those who are new to the industry. Luckily, there are plenty of helpful, free resources out there that are designed purely to make developers’ lives easier, phew! We’ve gathered together a few of our favourites to share with you today:

Emmet

 

Emmet is a plugin for text editors that has been specifically developed to help save you time while you’re coding. Emmet has taken the popular ‘snippets’ concept that other text editors use and elevated it to a higher level that boosts productivity.

‘Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Emmet is developed and optimised for web-developers whose workflow depends on HTML/XML and CSS, but can be used with programming languages too.’

Responsinator

 

A fun little resource, Responsinator allows developers to quickly ascertain how their site will be displayed on a variety of different devices – perfect for anybody coding a responsive site.

Dribbble

 

Dribbble is a great way to get inspiration for your newest creations. A showcase site where developers and designers show off their latest designs, it’s a great visual resource that’s sure to get your creative juices flowing.

Cloud9

 

Blending an online code editor with a cloud-based Ubuntu workspace, Cloud9 allows you to see each other code in real time and is a valuable resource for developers working on a collaborative project.

‘Simply pick your configuration and develop your app. No need to spend valuable development time on system setup and maintenance. You can create, build and run any development stack in seconds. We maintain it, you control it.’

Koala

 

‘Koala is a GUI application for Less, Sass, Compass and CoffeeScript compilation, to help web developers to use them more efficiently. Koala can run in Windows, Linux and Mac.’

HailPixel

 

A fun way to find the perfect colours for a project, HailPixel provides you with the hex codes you need and keeps you entertained at the same time. Scroll to different parts of the screen to determine hue, lightness and saturation, and experiment with different colour palettes to find your ideal set of colours.

JavaScript Beautifier

 

Use this simple, to the point tool to beautify JavaScript and HTML code. It’s easy to use, effective and will help make JSON/JSONP readable.

PageRuler

 

A Google Chrome extension that allows you to measure any element on a web page, PageRuler is a pretty basic addition to any developer’s arsenal. It might be simple but it comes in extremely handy and can save a lot of time in the long run.

Vagrant

 

A beautifully-designed bit of kit, Vagrant takes mere seconds to create a full development environment for everybody on your team. Also worth looking into is PuPHPet, an online GUI configurator for Vagrant.

‘Run a single command — “vagrant up” — and sit back as Vagrant puts together your complete development environment. Say goodbye to the “works on my machine” excuse as Vagrant creates identical development environments for everyone on your team.’

Snipplr

 

An invaluable resource for developers, Snipplr is one you’re going to want to add to your bookmarks, if you don’t already use it.

‘Snipplr was designed to solve a simple problem. We had too many random bits of code and HTML scattered all over our computers. We’d hunt and dig around for five minutes looking for the couple lines of code we wrote four projects ago just so we wouldn’t have to retype them. We’re lazy. We needed a way to keep all of our stuff organized. Snipplr is our solution. Now, all of our code snippets are stored in one place. Best of all, the other guys at work have access to each others’ code library.

With Snipplr you can keep all of your frequently used code snippets in one place that’s accessible from any computer. You can share your code with other visitors and use what they post, too.’

Browser Shots

 

Another handy resource you might not realise you needed so much, Browser Shots allows you to select numerous different browser types and see how your work in progress will look on each one.

Hurl.it

 

‘Hurl.it makes HTTP requests.

Choose the request method, customize headers and POST parameters, add basic authorization or OAuth credentials, and even follow redirects. Then view the nicely formatted request and response.

It’s the perfect tool for testing APIs. Just enter a URL and click send.’

Color Thief

 

A great tool for a developer who is working with existing branding, Color Thief allows you to upload an image and see the dominant colour and full colour palette. All you need to do then is use your colour picker to grab the hex codes and you’re good to go.

Sublime Text

 

Billed as ‘the text editor you’ll fall in love with’, Sublime Text is a well-designed, attractive text editor that’s ideal for coding.

‘Key Bindings, Menus, Snippets, Macros, Completions and more – just about everything in Sublime Text is customizable with simple JSON files. This system gives you flexibility as settings can be specified on a per-file type and per-project basis.’

Pingdom

 

A simple tool but an important one nonetheless, Pingdom is a website speed checker that tests the load time of any site you’re working on. Pingdom also analyses the load time and can provide you with helpful information about where any bottlenecks are that might be slowing things down.