Okay, so you’ve decided it’s finally time to expand on your design expertise with some ninja coding skills. Congratulations! The good news is there are plenty of online resources to help you learn the basics and get your coding adventures off to a rolling start.
Sooner or later, though, you’re going to have to fly solo and pen your own code. In fact, the sooner you do this, the better – because scribbling real code is by far the best way to learn, practise and improve.
Which means, sooner or later, you’re going to need a good text editor – a program for typing unformatted text. This incredibly simple tool is the playground of all your coding escapades and modern text editors are a lot fancier than they used to be.
Here are the top five text editors for designers learning to code.
#1: Sublime Text ($70)
Sublime Text calls itself “the text editor you’ll fall in love with” and I have to admit I fell for it from the moment I started using it. Sublime was the first text editor I encountered that was designed and built to make the coding experience easier – and what a job it does.
Before Sublime, I was staring at masses of black text on white pages, until a burst of color made writing, reading and checking code so much easier.
You can select and edit multiple lines and chunks of text – eg: select every variable of the same name and change it, instead of going through them one by one. Plus you can save chunks of code (HTML templates, forms, functions, etc.) and type them out with a single button.
In fairness, most text editors offer the same features now. Sublime was the first one I came across and I’ll always have a soft spot for my first text editor love.
#2: Notepad++ (Free)
Notepad++ is easily the least exciting text editor in this list but it’s probably the best place to start as a beginner. There are no distractions or unnecessary features getting in the way. You simply write your code, execute it and see if it works. If it doesn’t, you have to try and diagnose the problem yourself – an important part of the learning process.
#3: Atom (Free)
If you like the Sublime look and feel but don’t want to pay for it, Atom is a damn good alternative. It’s not a direct swap, though. To match the same features as Sublime you have to download more plugins (additional features can also be added to Sublime via plugins), for example.
Then there’s the file preview experience which is far more intuitive with Sublime. However, there are some features Sublime lacks that are worth mentioning – my favorite being the file drag-and-drop implementation, which works wonderfully.
My biggest gripe with Atom is it lags behind at times. Performance, in general, is noticeably behind Sublime but this is a free alternative, of course.
#4: Coda ($99)
Coda calls itself a text editor but it’s actually more of an integrated development environment (IDE). In other words, it provides pretty much everything you need to develop full software applications, as opposed to simply writing the code.
That’s not really important for the purposes of this article, aside from partly explaining the price tag.
Coda might be more than a text editor but it’s still a damn good text editor in its own right. Unlike most text editors, though, you get a preview button with Coda, which allows you to get a visual representation of your code at the click of a button.
The main downside to Coda is the learning curve. Personally, I prefer a more basic text editor that lets me focus on coding – especially as a beginner when you’ve got enough to learn as it is. Although, I have to say, some of those Coda features are very tempting once you’ve nailed the coding basics.
#5: Visual Studio Code (Free)
I’m in two minds about recommending this one for designers learning to code. Aside from the autocomplete you get with most text editors these days, Visual Studio Code also comes with IntelliSense and other features that handle a lot of the coding for you.
If you’re the kind of person who learns by doing rather than seeing (certainly the case for me), you might find Visual Studio does too much for you.
That said, you don’t have to use autocomplete or IntelliSense just because you can. And, if you’ve got the willpower to learn by hand, they can help you quickly check your own code without reverting back to other resources.
This isn’t what Visual Studio Code is designed for but it’s up to you how you use it.
Once you are proficient with code, by the way, Visual Studio is an incredible development tool.
If you’re just starting out with code, I fully recommend Notepad++ as your first text editor. You’ll know when the time comes to move on to something more advanced. Sublime and Atom are great once you start putting websites together and you need to handle multiple files.
As a designer, those programs will probably be all you ever need and more. But, if you start working on projects with other people, you’ll start to see why Coda and Visual Studio Code are so popular.