Advertisement

21 Must-Have Front End Development Tools

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.

sublime-text-example

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.

coda-example

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.

atom-example

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.

brackets-example


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.

git-example

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.

svn-example

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.

perforce-example


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.

photoshop-example

GIMP

Available on: Windows, Mac and Linux.

gimp-example

Sketch

Available on: Mac.

sketch-example


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.

font-squirrel-example

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.

google-web-fonts-example


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.

dribbble-ex

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

awwwards-ex

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.

behance-ex


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.

wunderlist-example

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

todoist-example

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.

any-do-example


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.

trello-exmaple

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.

confluence-example

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.

basecamp-example


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.

Advertisement

Web designer and developer from Southampton, UK.


Leave a Comment

Comments (9)

Madona

13th, Jun 2018 at 12:10 pm

Great list. I’d like to suggest one more tool for your list. ProofHub is a project management and online collaboration tool equipped with amazingly powerful productivity features. You can create projects to organize your writing efforts. For instance, you can create a project for the writing that you do for clients and a separate one for your personal writings. There are notes which you can use to jot down your content. Plus, there is an in-built calendar which you can use to create an editorial calendar. Apart from these, there are features like in-built chat, quickies, timesheets and third party integrations make it a perfect tool that can help you increase productivity and keep your work-life on track.

Reply

Ashpreet

11th, Jun 2018 at 7:38 am

Very well suggested tools, For Project Management, I would like to add one tool, ProofHub. It lets you create effective project roadmaps to plan the tasks and resources, and keep them on track. Create tasks, assign them to teams, set dependencies and ProofHub will take care of everything else. As a task gets delayed or is moved ahead, the dependent tasks move and adjust accordingly, automatically. It also gives you a clear idea of how the work is distributed, when it is expected to be completed so that you can iterate plans to keep the project agile.

Reply

Bauke

13th, Oct 2014 at 10:35 am

Great article Seb, thanks for refrerring to my roundup!

Reply

Seb Kay (Author)

14th, Oct 2014 at 9:19 am

No problem Bauke. Great article from you as well. Keep up the good work!

Reply

Jonathan Clift

25th, Jul 2014 at 11:58 am

Some great apps mentioned here. I’ve used a number of these and can certainly recommend the likes of Trello (for brainstorming and early idea generation with team members on new projects) and todoist, comprehensive but simple task management. As mentioned in the comments below, I found todoist seemed to push the premium features more and more until I actually found it frustrating. Its a free app, so I understand they have to make some money but I just found there were other apps that did things as well, if not better and didn’t hassle you with premium upgrades.

The app I’m referring to is Asana. For small businesses and specifically freelancers, Asana is a great way to manage your projects, creating a good overview of where everything is at. You can setup projects, and todo lists for each project, set deadlines, team members and so on. It’s definitely worth checking out as it’s also completely free for up to 15 team members.

Reply

Seb Kay

25th, Jul 2014 at 12:02 pm

Thanks for the call out on Asana. I actually used it on a client project late last year and found it to be a great tool. If I find the time I’ll add it to the list above.

Asana: https://asana.com

Reply

Aggelos

25th, Jun 2014 at 10:54 am

Great article Seb. Thanks for sharing it. For Code Editors actually i use JetBrains WebStorm as i find it really powerful, i have tried Sublime but finally i got stuck to WebStorm. However, i feel that there are a lot more help resources for Sublime. As for Version Control, i use Git, i tried Tortoise SVN but i didn’t really liked it. As for Image Editing, i really believe there Photoshop i the most powerful, although i have tried to use Gimp i always end up to Photoshop. As for inspiration another good resource is of course Pinterest. I have downloaded Todoist in my Android phone but i am about to delete it, i am not satisfied. I think i will give a try to Wunderlist.
If I am allowed to do so, i would also add Likno Web Builders Collection (http://www.likno.com/jquery-builders/index.php) as it is a collection of handful applications to create jquery elements like sliders, modal windows, accordions, menus etc.

Reply

Seb Kay

26th, Jun 2014 at 9:12 pm

Thanks Aggelos! Glad you enjoyed the post.

I found that Todoist tends to push the premium features in your face but then tells you to upgrade to use them. I’m currently still on Wunderlist.

Thanks also for the link and have a great weekend!

Reply

Seb Kay

26th, Jun 2014 at 9:13 pm

Also sorry for the late reply your comment was marked as spam by accident 🙂

Reply

Pingbacks (2)

Advertisement

Inspirational Newsletter

Join the newsletter to get the best articles, tutorials and exclusive freebies every two weeks.

No spam. You can unsubscribe at any time.