21 Must-Have Front End Development Tools

Creating websites is a pretty tough job most of the time. You’ve got client requests, code bugs, design challenges, UX stories, to name but a few. It’s always a good idea to have a bunch of tools handy that’ll help you with your work. You wouldn’t see a mechanic loosening lug nuts with his bare hands. So why should you be expected to code websites in notepad and leave it at that?

Below is a comprehensive list of front end development tools to make your job easier. There are also a few pointers on how to improve your day by using each one.

Table of Contents

You can use the handy list below to jump straight to the sections you want.

1. Code Editor
2. Version Control Software (VCS)
3. Image Editor
4. Typography
5. Inspiration
6. Task Tracking
7. Project Management
8. Bonus

---

1 Code Editor

Tip: Most code editors come with a load of customisable options to help make your working environment better. Take advantage of features such as code highlighting, split screen views, custom fonts, line spacing, font size, different color schemes and more to give you the most comfortable and productive coding environment possible.

Sublime Text

Sublime Text is my personal editor of choice. Over the years of testing and trying out different code editors Sublime Text has always made me feel in control of the code I’m writing. It has some powerful features such as Goto Anything, Distraction Free Mode, Multiple Selections and Instant Project Switch.

Available on: Windows, Mac and Linux.

Coda

Coda is probably the most well-known code editor out there. It was one of the first to have the amazing features we take for granted today. A few of the things Coda boasts are a Built-In MySQL Editor, iPad/iPhone Frames in Preview, iCloud Sync for Sites & Clips, Live Server Updating and Built-in Web Inspector.

Available on: Mac.

Atom

Atom should definitely peak your interest as it was built by the team over at GitHub. It’s a great little editor built specifically by people who code everyday and need something that’ll be able to keep up. A few of its features include Fast project-wide search and replace, Code folding, Snippets, Import TextMate grammars and themes and Node.js integration.

Available on: Mac.

Brackets

As it says on the Brackets website “Brackets is an open source code editor for web designers and front-end developers.”. I’ve used it and it truly is a great editor. The main benefit it has over some code editors is that its open source. Which in-turn means a load of add ons and extensions created by and for the users. Some of the features it has are Live preview, extensions, constantly updated and evolving, multiple selections and code hints.

Available on: Windows, Mac and Linux.

---

2 Version Control Software (VCS)

Tip: All that matters when choosing the right version control software is if it works for you, your projects and your team. For the majority of people Git is perfect. However I’ve used SVN in the past and found it perfect for project with smaller needs.

Git

Git is the most popular version control out there. It’s immensely popular among back-end developers but over the last year has been largely adopted by the masses.

Apache Subversion

Apache Subversion is less complicated to use and understand than Git, so it’s mostly favoured by people who work on the front-end rather than the back-end.

Perforce

Although the least popular (in terms of web design) out of the three mentioned here, primarily because you need a licence to use it, Perforce is incredibly popular in the games industry. Some of the biggest Perforce customers include NVIDIA and Ubisoft.

---

3 Image Editor

Writing about the features of an image editing program is vastly different from a code editor because there are too many to count. Go with how you feel using it. All three programs below have free trials and I strongly suggest you check them out.

Tip: Choosing an image editor can be tricky. It all comes down to what you’re looking for. Most of us go with Photoshop, myself included, however others go with programs like GIMP and Pixelmator. If you’re designing in the browser most of the time and just need a simple program for choosing colors and so on, GIMP is good way to go.

Photoshop

Available on: Windows and Mac.

GIMP

Available on: Windows, Mac and Linux.

Sketch

Available on: Mac.

---

4 Typography

Tip: You’ll come across a lot of places to get fonts from, like DaFont, however it’s generally safer to stick to sites that are widely used and trusted in the web design industry, like the following two.

Font Squirrel

Font Squirrel is the number one source for commercially free fonts. There is a section on the site for ‘Almost Free’ fonts but they’re clearly sign-posted with the price of said font.

Google Web Fonts

Google basically revolutionised fonts on the web with their huge database of commercially free fonts. Since all font files are included through Google CDN there’s no need to worry about files not loading on your page.

---

5 Inspiration

Tip: The thing to remember about getting inspiration is that it’s simply a tool, not a solution. I see designers borrowing from other designers everyday. Not because they’re lazy or are thieves but simply because they use “inspiration” as an answer. You can do much better work when you work with your inspirations and not from them.

Dribbble

Over the last few years Dribbble has taken the web design industry by storm. With a steadily growing user base of some of the best and brightest designers worldwide, this is the place to go for web design inspiration.

Awwwards

The Awwwards is a CSS gallery of sorts, however it’s so much more than that. Directly on the website it says “The awards that recognize the talent and effort of the best web designers, developers and agencies in the world.”.

Behance (“Web Design” Search)

Behance can feel a little crowded at times, a lot like DeviantArt. However you’ll find a load of great and upcoming design projects if you know where to look. Just doing a search for “Web Design” will give you a load of great inspiration.

---

6 Task Tracking

Tip: I would advise having two different ways of managing projects and to-do items. It will come down to personal preference but I find my time is managed a lot better by doing so.

Wunderlist

I use Wunderlist to manage my daily activities, such as writing blog posts or sorting out the garden shed. It’s a tremendously useful app and because of its cross-platform availability I’m always on top of my to-do list.

Available on: Web, Windows, Mac, iPad, iPhone, Android and Kindle Fire.

Todoist

I had surprisingly not heard of Todoist until recently however upon much research I’ve come to the conclusion it’s one of the best out there at what it does. The UI is completely minimal which just makes navigating the app even easier. There’s also a great video on the homepage to watch.

Available on: Web, Windows, Mac, iPad, iPhone and loads more (even Gmail).

Any.do

The difference with this one is it’s primarily a smartphone app. Yes it does have a web version but doesn’t have a downloadable option for your computer. I’ve noticed Any.do quite a bit on the App Store recently. The UI is clearly cared for and has been slaved over quite a bit by the design team behind the app.

Available on: Web, Chrome, iPhone and Android.

---

7 Project Management

Tip: Keeping projects on track doesn’t have to be difficult. Sure it takes a lot of work but minimizing that work to the lowest amount while still getting stuff done is the key. Making sure everything is tracked and properly completed will make sure every project has the right underlying tone.

Trello

Like many of the other tools in this post, this is one I use myself. It’s a ‘card-wall’ type app and is one of the best ways to keep track of your projects. Some of the features include project collaboration, colored labels, due dates and comments.

Available on: Web and iPhone.

Confluence

Confluence is just one of the great products offered by Atlassian. It’s one of the most feature rich project management apps you’ll find. Some of the features it offers are file sharing, task management, calendars and release tracking.

Available on: Web.

Basecamp

You or someone you know is probably using Basecamp for project management. It’s by a company called 37Signals and it’s their flagship product. It’s one of the most widely recognised and used project management apps out there. Some of its features include to-do lists, file sharing, calendars and project templates.

Available on: Web, iPhone and iPad.

---

8 Bonus

3 Beloved Front-End Tools from 56 Experts

This post by Bauke Roesink gives a really great insight into the favoured tools from a huge selection of web designers and developers who are at the top of the industry right now.

A great read for anyone wanting to know which tools are used by the experts.

---

What Do You Think?

There’s a lot of content above so come back to it as you need to. I’d love to hear your thoughts on the above apps and services as well as your personal favourites. Leave me a comment below.