Become a Front-End Web Developer in 4 months.
Start Learning

Web development is something that can be picked up using a text editor as simple as Notepad, but that can quickly evolve into something requiring an entire arsenal of tools.

At the core of great web development are code editors, as well as testing and build tools. These are the tools you’ll likely not be able to live without. Depending upon the scope of your work, you might dabble in design tools as well.

But with so many out there, how do you choose? Here’s a list of some of the best web dev tools to date, according to working web developers. Now, no one toolset works for every developer in every situation. You will develop your own toolsets, picking tools based on the tasks you need to accomplish on any given project — and on what works for you. Some tools are better designed than others for particular working habits or design preferences. So take some of these tools for a spin, and see if they don’t become part of your must-have toolkit.

Code Editors

There is currently no shortage of code editors to choose from. Some are lean and lightweight, while others provide an entire suite of tools built in for tasks such as testing and compiling, so that you end up with a single tool that can handle everything.

Atom

URL: https://atom.io/

Price: Free

Atom

Atom is built from the ground up in HTML, CSS, and JavaScript, which means it’s both quick and extensible. You can easily customize Atom to fit your needs, and there are also a great number of add-ons and themes that can be installed to enhance your experience.

Some of the most useful add-ons for Atom include linter, which allows you to lint (detect suspicious syntax, which you can then double-check) almost any code with a large variety of linting tools. There is also autocomplete-plus, which enhances code autocompletion as you are working. Lastly, one of my favorites is emmet, which aims at turbocharging your HTML and CSS workflow so that you are much more efficient while writing code.

These great add-ons make it easy to customize Atom for whatever your workflow is, without bogging it down with unnecessary features.

Sublime Text

URL: http://www.sublimetext.com/

Price: Free with nag window, $70 without

sublime text

Sublime has been one of the most popular code editors for a number of years, and for good reason. It is extremely fast, has advanced features, and has a great plugin API. It is free to use for a period of time, but then you will get a nag window asking you to purchase the software, which is $70.

One great feature of Sublime is that it comes packed with a Python console, so you can write and play with code without even leaving the editor. Sublime also comes packed with a ton of keyboard shortcuts, so you can navigate around your project easily, improving the speed at which you write code.

Testing

Just as there is no shortage of code editors, there is no shortage of devices, browsers, and users to test your website or web application for. Because of this, most web developers have a solid set of testing tools, to better ensure that all users of their website or web application get the best experience possible, no matter how they access it.

BrowserStack

URL: https://browserstack.com

Price: Free for 30 minutes then $39/month – $399/month.

Browserstack

BrowserStack is an online service that allows you to test websites and web applications on a myriad of browsers and devices. When you select a browser or device on BrowserStack, the service will actually boot a virtual machine (or emulator, for mobile devices) that allows you to do extensive testing of your website or web application. The service is free for 30 minutes of use, and then you have to pay based on a tier structure to continue using it. BrowserStack is painless compared to the alternative of booting virtual machines yourself and testing on multiple devices that you then must also own.

Google PageSpeed Insights

URL: https://developers.google.com/speed/pagespeed/insights/

Price: Free

Google PageSpeed Insights allows you to enter the URL of your web page and get an evaluation of speed and user experience on both mobile and desktop. Aspects such as JS, CSS, optimized images, and appropriate tap targets for mobile devices help determine the score for your web page. This is a super-simple and free tool that allows you to tackle common problems that make websites slow or difficult to use.

While the tool seems simple to use at first, some of the tips can be hard to understand, and you may find yourself digging deeper to understand what each suggestion means, and why it is important.

BrowserSync

URL: http://www.browsersync.io/

Price: Free

Browsersync

BrowserSync is a tool that allows you to live-reload pages as you make changes to the code, so that you can see the corresponding changes instantly. Not only that, you can see the changes on multiple devices, so you don’t need to move from desktop to tablet to phone. BrowserSync also integrates with many build tools, so you can use it with your existing Grunt or Gulp tasks.

“I’m currently completely in love with BrowserSync. It allows me to automatically inject CSS into a page without reloading when I save a file, and furthermore it synchronises all actions like scrolling or clicking between browsers. Not only on the same device but cross-device. I can develop a site simultaneously on my MacBook, iPad, iPhone, Galaxy Nexus, and so on. It’s like magic!” — Martin Wolf 

WebPagetest

URL: http://www.webpagetest.org/

Price: Free

WebPagetest is an online, open source project that allows users to test and compare website performance with a great level of detail. There are also advanced features that let you run scripts as you test sites, capture video, and so on.

“When I really want to be thorough about performance, I’ll run my sites through webpagetest.org. It combines the granularity of the DevTools Timeline with customizable server response metrics, giving you a good high-level and low-level view of your site’s performance on different browsers from different locations around the world.” — Cameron Pittman (Udacity)

Firebug

URL: http://getfirebug.com/

Price: Free

Firebug is a Firefox add-on that provides great tools to help with web development. You can easily edit and view CSS and HTML while on the page, view and debug JavaScript, and really fine-tune your website. You can also use Firebug to view a timeline of assets being loaded so you can see things that might possibly be slowing your site down.

Build Tools

Build tools are available to help you automate tedious tasks so that they’re less of a hassle. This can range from compiling SASS or LESS into CSS, optimizing images, launching a web server, linting your code, and much more. There are many tools out there for both the terminal and GUI, and I’ve listed my favorite of each type, respectively.

Gulp

URL: http://gulpjs.com/

Price: Free

Built on Node.js, Gulp is what is known as a build system. A build system’s job is to perform certain tasks as you are building or distributing your project. You can do things such as start a testing server so you can preview changes as you make them. You can also compile SASS, LESS, Stylus, and CoffeeScript, lint your code, autoprefix your CSS, and much more. Plus, Gulp is entirely open source!

While all of these capabilities sound great, Gulp does have a bit of a learning curve, so you may find yourself diving into tutorials and how-to’s just to understand how to write tasks for compiling or testing your code. The investment of time is worth it in the long run, but don’t expect it to be a tool that you can just pick up and start using.

[…] I like using build tools because I’m lazy. They let me automate most of the grunt work that I really just don’t want to ever do by hand. — Cameron Pittman (Udacity)

Prepros

URL: https://prepros.io/

Price: Free with nag window, $29 without

Prepros

If the prospect of setting up your project to use Node.js or writing out all of the tasks for a task runner seems a little too daunting, there are plenty of GUI tools that will help you accomplish the same things. My personal favorite of these is Prepros. Prepros allows you to launch servers for testing your projects, compile Sass, Less, Stylus, and CoffeeScript, as well as autoprefix your code.

Prepros is free to use for as long as you would like, but has a nag window that pops up every hour asking you to purchase the paid version of the software. The cost is only $29, very much worth it if you are looking to streamline your development process.

Design

When you are trying to get your design pixel-perfect, it helps to have a few tools handy. Here are some of our favorite tools to help while you are designing or fine-tuning and testing it once the coding is done.

WhatFont

URL: http://chengyinliu.com/whatfont.html

Price: Free

Whatfont

Sometimes you are on a website with gorgeous typography, and you’re dying to know what fonts were used. Instead of opening up your dev tools or — even worse — browsing through source code, you can use WhatFont to easily inspect elements for fonts. WhatFont also supports TypeKit and the Google Fonts API.

One thing to remember when using WhatFont is that it can detect fonts in text only. This means that you will have no luck if you’re trying to determine what font was used in an image.

QuirkTools

URL: http://quirktools.com/

Price: Free

QuirkTools provides a suite of tools that helps with designing, and also testing, websites. The tools are simple to use and range from allowing you to create sitemaps and wireframes to testing websites on multiple devices.

One of the greatest features of QuirkTools is the ability to test responsiveness on a myriad of screen sizes. There are predetermined screen sizes for the most popular smartphones and tablets, or you can specify your own size. You can also enable or disable scrolling, as well as rotate the screen to check all use cases.

ColorZilla

URL: http://www.colorzilla.com/

Price: Free

Much as you sometimes come across great fonts on the web that you’d like to identify, sometimes you happen upon a great color you’d like to identify. This is where ColorZilla comes in handy. It’s an eyedropper and color picker add-on for both Chrome and Firefox that lets you choose colors with a single click, identifying them for you by hex, RGB, and HSL notations.

Google Fonts

URL: http://www.google.com/fonts

Price: Free

If you are looking for great fonts to use on your website for free, look no further than Google Fonts. With a collection of almost 700 fonts, Google Fonts allows you to test fonts and font-weights right in the browser. All that’s required is a single link to the CSS file in your project, and you can now use beautiful fonts easier than ever before.

One thing to remember is that although you may have a lot of fonts in the palm of your hands, you don’t want to go loading an excessive amount of them on a single webpage. Each font that you include increases the load time of your website, which makes for a slower user experience.

The Bottom Line

I hope that after reading this article you have a good idea of some great tools to help with your own web development. Our goal is to not intimidate you with such a list, but to encourage you to try some of the tools and see what works best for the work that you do. It can take some time to build a great toolset, but once you do, you will be more efficient and much happier while working.

We would love to hear from you in the comments about your favorite web development tools. What tools you like, don’t like, or maybe point out something that wasn’t listed in this article.

Keenan Payne
Keenan Payne
Full-time web developer for Asana. When not obsessing over CSS I’m usually trying to surf somewhere in California.