Best Code Editors For Beginners – Mac & Windows!

Published on May 22, 2017 in Business Tools & Services, Web Design.

Looking for the best code editor for beginners? In a previous tutorial, Code Editors For Small Business Website Owners, we talked about what you'd need from a code editor as small business owner who wants to be able to control and manage your website yourself. We learned that while a simple text editor can do the job, going with a code editor, which as been purposely built to handle languages like HTML, CSS, JavaScript, and others, gives you a lot of handy tools and features to help make your work go faster. We also learned what we didn't need and also what we should avoid. If you missed it, be sure to check out that previous tutorial for more information before continuing here.

In this tutorial, we'll take a look at some specific code editors that I'd like to recommend for you. I'll provide some info on many of the top editors that are currently available to help you settle on one or two that you'd like to use in your own business. Some editors we'll see are free, while others are paid. First, we'll take a look at a handful of Windows-only code editors. If you're a Windows user, there'll be one or two code editors here that you'll want to investigate further. Next, for our Mac users, I'll list out some Mac-only code editors. There are many to choose from, and again I'm sure you'll find one or two worth looking into further. Finally, we'll take a look at some cross-platform code editors. I suspect it's here where you'll find an editor or two that will pique your interest as well..

So as you can see, we'll be covering the gamut in this tutorial!

A key point that I want to make before we begin is this: It doesn't really matter which code editor you wind up going with. They all generally perform the same tasks. The most important thing is that you find an editor that you're comfortable with, that does everything you need it to do, and that fits into your business. You might even wind up using more than one editor—that's fine too. But by the end of this post, you'll have at least two or three editors downloaded and installed, and ready for you to test further. From there, you can decide for yourself which one you like best.

I hope that sounds good!

With that out of the way, let's jump into it. First, let's take a look at code editors that are available for Windows...

Best Code Editors For Windows

Okay as promised, we'll take a look at Windows-only code editors first. Below, we have two free options, followed by a paid code editor. At the end of this section, I'll also list out some honourable mentions, too. Let's check 'em out.

Notepad

Notepad is, of course, Windows' default plain text editor. As I mentioned back in the Introduction To Code Editors For Front-End Web Design tutorial, you can get away with using Notepad for editing code (not to be confused with WordPad). Notepad handles plain text without any problems, and at a minimum, a plain text editor is all we need.

Today we'll be developing a forty-three page fully-responsive website in Notepad...with no coffee! Who's up for some fun?

As far as editing code goes, Notepad's simplicity is also it's greatest liability—beyond it's basic Find And Replace command, it severely lacks any additional features to handle code editing. In a pinch, Notepad might save your bacon, but because it lacks such handy features as syntax highlighting, code completion, a file manager, code collapsing, and many other features that are staples of other code editors, consider Notepad an editor of absolute last resort. You can learn more about Notepad (if you're bored!) right here.

Notepad++

I seem to recall using Notepad++ on a few projects many, many moons ago, and recall being impressed with its functionality. This free and open source code editor was released back in the early ages of the internet, all the way back in 2003. It's still in wide use today by many developers, and has been one of the best Windows-based editors over the years.

Notepad++ comes packed with a heap of great features to help handle and edit code, and manage your business website. Syntax highlighting, code auto-complete, and code collapsing (also called code folding) makes navigating through and editing code easy. It's tabbed document interface, which allows you to work on more than one file at a time), split views, and it's powerful built-in FTP functionality means working with documents is fast, intuitive, and easy. What's more, there are over 130 plug-ins available, meaning that should the mood strike, you can tailor Notepad++ to your liking.

The NotePad++ interface includes many handy features.

Notepad++ is a fast, reliable code editor that's more than capable of handling your online business needs. You can download it right here or learn more about it here.

CoffeeCup HTML Editor

I've not personally used CoffeeCup's HTML Editor, but I keep hearing great things about it. This simple to use editor can't handle web languages beyond HTML, CSS, PHP, and a few others, but as small business owners who are managing our own websites, that's really all we need anyway. CoffeeCup HTML Editor boasts many of the standard features you'd expect from a capable code editor—code completion, highlighting, and other standard-issue features. However, it also includes built-in code validation (meaning, it'll catch errors in your code as you edit) and a built-in browser preview.

The browser preview feature is very cool, allowing you to click within the preview to be taken directly to the corresponding code. Pretty slick!

Even the free version of CoffeeCup HTML Editor boasts many handy features.

CoffeeCup HTML Editor costs $29 with a free trial, or you could try CoffeeCup's stripped down free editor as well. You can find out more about CoffeeCup HTML Editor and download it's free trial right here. Or, learn a bit more about it over here.

Windows-only honourable mentions: There are of course many, many more code editors that are available for Windows. If you want a few additional recommendations to check out, two honourable mentions that come to mind are Intype and Notepad 2. You could also check out this Wikipedia article which lists out many more Windows-based code editors.

Okay, with our Windows-only code editors out of the way, we shouldn't leave our Mac users out in the rain. Now let's take a look at a few code editors for the Mac...

Best Mac Code Editors For Beginners

Alright, now on to our Mac OSX code editors. As with the Windows-only code editors, I have two free options for you, as well as a paid code editor. At the end of this section, I'll list out some honourable mentions too. Let's check 'em all out!

TextEdit

As I mentioned back in the Introduction To Code Editors For Front-End Web Design tutorial, at a minimum, a plain text editor is all we need. And for Mac users, that minimum can be met with TextEdit—OSX's default plain text editor. TextEdit is a bit of an oddity, because it can be set up either as a word processor or a plain text editor, depending on how you have it's Preferences set. To use TextEdit as a plain text editor, make sure the Plain Text option is selected in the Format area under the New Document tab.

In order to use TextEdit to edit code, in the Preferences, you'll have to set its Format to Plain Text.

I actually use TextEdit in plain text mode a lot—but not for web design. I use it as my primary note-taking and research tool. When I'm researching, I simply want a fast, simple way to organize thoughts, snippets of information, URLs, and other bits of information.

But for editing code, a few additional features can make all the difference! In plain text mode, TextEdit has no line numbers, no code complete...no nuthin'! It'll save my posterior in a pinch, but because it lacks so many features that are standard in other applications, I'll stick to using TextEdit for note-taking. You can read a bit more about TextEdit right here.

Panic's Coda

At the time of this writing, Coda is my go-to code editor of choice. I've used it for years and years, and it's even been featured in a few Ten Ton courses! In fact, Coda was even used to help build this very website! I am, however, looking into some alternatives, which I'll discuss below.

Behind Coda's clean, intuitive interface is a huge array of powerful tools, features, and customizable options. Let's get the easy stuff out of the way first: Code highlighting (which makes it easy to distinguish between HTML, CSS, PHP, and other languages), code auto-completion, and line numbers—these are all standard features that we'd expect from a code editor, and they're all in there.

Coda's uncluttered interface and integrated FTP allows you to edit files directly on a live web server.

Digging a bit deeper, Coda's tabbed interface and split views allow us to work on multiple files at once, and even view two or more parts of the same document simultaneously. Coda also boasts code validation, a handy Clips panel that allows us to save and reuse pre-created blocks of code, and a wide array of plug-ins to extend it's capabilities further.

Another nice feature is Coda's built-in browser preview, which makes viewing changes fast and easy. But what really sets Coda apart is it's file management and built-in FTP capabilities. This allows you to connect to your live website and edit files directly on your web server. You can even use Coda's FTP feature as you would a stand-alone FTP application—use it to upload and download files of any type, including images, PDFs, videos, and more.

I'd say Coda is the best Mac-only code editor currently available. On the downside, Coda doesn't have code-collapse (which drives me crazy), no multiple cursors, and it can often feel slow and sluggish. Truth be told, as awesome as Coda is, I'm now looking to a few of the newer cross-platform editors (which we'll discuss below). A few of them are really giving Coda a run for it's money. That said, for Mac users Coda is a solid choice. It'll set you back $99 smackers, but you can download a trial before committing. Find out more about Coda and download it's free trial right here. And you can learn more about Coda over here.

TextWrangler

TextWrangler is the free, easy to use version of BBEdit. Despite being an older editor, TextWrangler is still a popular choice among Mac users. It's feature-rich, intuitive interface includes standard items like line numbers, code collapse, and syntax highlighting. It's big, stand-out feature is it's file browser and FTP capabilities. Much like Coda, TextWrangler will allow you to open, edit, and save files that reside on your web server. It also boasts an advanced search and replace command, which allows you to work across multiple files.

TextWrangler comes packed with features, including the ability to work with files directly off a live web server.

On the downside, TextWrangler lacks a few features that come standard in other code editors—extras like code snippets, code completion, browser preview, and multiple cursors are all missing. However, TextWrangler is extendible and customizable via AppleScript. And many pre-existing scripts can be downloaded and installed to add these features.

Needless to say, give TextWrangler a closer look. It just might feel right for you and your business. You can find out more and download it right here. Wikipedia has some info on it too.

Mac-only honourable mentions: As with code editors for Windows, there are plenty of other Mac code editors available. If you want to explore a few more, check out the aforementioned BBEdit. You can also check out TextMate and UltraEdit.

Alright, so there's our Mac-only list of code editors. As I mentioned above, I'm sure there's one or two stand-outs that you think'll work in your business. But up next is my favourite part of this tutorial, cross-platform code editors. Let's check 'em out...

Best Cross-Platform Code Editors For Beginners

As I mentioned way back at the beginning, I definitely think you'll find one or two cross-platform editors that you'll want to take a closer look at. Cross-platform simply means that the software will work on both Windows and Mac computers. Once again, we have two free options and one paid application, plus some honourable mentions. There are some powerful editors listed in this section, so let's see what we have!

GitHub's Atom

I'm gonna start by saying this: Atom is awesome! As I mentioned above, with Coda missing a few key features and feeling a little sluggish, I decided to check out a code editor that's been gaining more and more popularity, Atom. Atom is a free and open source, cross-platform code editor. Since putting it through it's paces, I'm incredibly impressed. Compared with other code editors listed here, Atom is very new (being released in the summer of 2015) and already droves of designers, developers, and DIYers like you and I are switching over.

Atom's simple, clean interface in action!

Why? Atom being free and open source, with a simple, intuitive interface is more than enough to get a lot of people on board. But Atom is so much more than that. Let me begin by explaining Atom packages. A package, very simply, is just a plug-in that extends Atom's capabilities. But really, Atom is just a collection of various packages that all run simultaneously. This means you can pick and choose the commands and features that you want to be a part of the application. Don't want code completion? Uninstall that function. Want FTP capabilities? Download and install it. It's really that simple!

So think of Atom as a platform for building your own, personally customized, ideal code editor that's perfectly tailored to you and your business needs. Atom has thousands of community-built packages available, and any that you choose to install are fully customizable, often with just simple CSS.

Out of the box, Atom comes with 80 or so standard packages (that you can customize or disable). These standard packages give us code editor features we've come to expect: Document tabs, code highlighting, snippets, project-wide find and replace, multiple cursors, code collapse, and even multiple document panes. But we're just scratching the surface of what's possible here. Browser preview, built-in developer tools, FTP capabilities, and much, much more are all available via simple to install packages.

The only downside that I've caught wind of so far is that some developers have reported Atom feeling a little slow at times. I've not experienced this myself, but I have my Spidey-Senses on high alert. Meanwhile, I'll keep exploring and learning more about this incredible code editor. You can download and install Atom right here and read a bit more about it over here.

Adobe Brackets

Brackets is Adobe's relatively new, free and open source cross-platform code editor. Right away it's clear that this is Adobe software, so if you're already using Photoshop, Illustrator, and so on, you'll feel close to home. It's clean, intuitive interface implies that it's aimed squarely at folks who are focused on productivity and getting the job done—handling HTML, CSS, PHP, and JavaScript with ease.

Brackets' simplified interface includes an inline CSS editor.

Rather than using a tabbed interface like Coda or Atom, Brackets has a left-hand file manager that lists working files above it. It's this list of working files that allow us to move between open documents—say if we're fixing some CSS and one of our site's pages simultaneously. In addition, Brackets has a few stand-out features that we should cover.

The first one is Brackets' built-in Live Preview. When launched, a new Chrome web browser window appears, displaying the page you're working on. What's great is that this preview window doesn't need to be refreshed. So as you continue working on your code and making changes, the preview window will display those changes instantly. What's more, the preview window comes built-in with tools similar to Chrome's Developer Tools. This allows you to easily mouse over your preview, navigate through code, and diagnose any problems. If you're not sure what Chrome's Developer Tools are all about, I'll try to cover that in a future tutorial.

Another extremely handy feature is Quick Edit. It allows you to edit CSS rules that are applied throughout a page, directly from that element. So for example, let's say you're somewhere deep in your HTML, and you want to make an adjustment to a CSS rule that's applied to one of your elements. Typically, you'd have to then switch over to your style sheet, find the rule you're after, and then make the change. But with Brackets, you can simply open the Quick Edit inline editor right from where you are in the HTML and edit the CSS rule directly. It's pretty awesome!

Now, like some of the other code editors we've looked at, Brackets is also customizable and extendible via extensions. However, Brackets has fewer available extensions than, say, Atom. But, if you're looking for features like code highlighting, snippets, and code folding, these are all available via extensions.

So, Brackets has a lot going for it. The only negative to report is that, much like other Adobe products, it can feel slow and sluggish at times. But that shouldn't prevent you from giving this code editor a try to see if it'll fit with your business workflow. You can learn more about Brackets and download it right here and see what Wikipedia has to say about it over here.

Sublime Text

I've quite possibly saved the best for last. No run-down of code editors for small business would be complete without including Sublime Text, one of the most highly regarded and commonly used code editors in use. This cross-platform code editor is the standard to which all other modern code editors must now meet. In fact, newer code editors like Brackets and Atom draw many of their features directly from Sublime. It's clean, dead-simple interface and fast performance mean Sublime's all about getting things done quickly.

Sublime's clean interface allows for multiple panes, each with it's own document Minimap.

But more importantly, Sublime comes packed with loads of features—both those you'd expect in a code editor, and a few nice surprises. So, you'll find features like syntax highlighting, multiple document panes, auto-completion, code collapse, snippets, being able to find and replace across multiple files, and even multiple cursors. But where things get really interesting is with Sublime's Minimap. The Minimap is a zoomed-out, birds-eye-view of the full document that you're currently working on, making it very easy to navigate around throughout your file. Another handy feature is Goto Anything. As the name implies, this command makes it very easy to navigate to specific files, line numbers, and even words across your entire website.

And just as we've seen with other code editors, Sublime is highly flexible and customizable. There's a huge number of community-supported plugins to extend Sublime, so you can easily add features and options to tailor Sublime to your needs.

As mentioned earlier, Sublime has set the standard for modern code editors, and has influenced a few of the newer editors. But no editor has Sublime's elegance or performance. Seriously consider giving it a try. Sublime costs $70 but has an unlimited free trial, which you can download and install right here. You can learn more about Sublime over here.

Cross-platform honourable mentions: If you'd like some additional cross-platform code editors to fiddle with, here are a few more. You could check out Visual Studio Code, Microsoft's free code editor which looks very promising. I actually wanted to include it in this tutorial, but felt we were running too long here as it is. In any regard, Visual Studio Code is definitely worth a look. You might also want to take a look at Komodo Edit or Emacs as well.

Let's Wrap This Up!

So there's our in-depth look at code editors for you and your business. This is by no means a complete or exhaustive list, but this tutorial gives you a great start on finding a code editor or two that'll work for you. For a near-complete list of available code editors, check out this Wikipedia article. Wikipedia also has a comparison of code editors which you might want to check out too.

To recap, we started off with a look at Windows-only editors, followed by Mac-only editors and cross-platform editors too. In each section, I provided overviews and links for free and paid solutions, and included a few honourable mentions as well. Some stand-outs, I think, came in the cross-platform section—Notably Atom, Brackets, and Sublime Text.

I strongly suggest checking out a few code editors that stood out for you. Download 'em, try 'em out, and see which one you like best. I have to stress (as I did earlier on) that there's no right or wrong choice here. The idea is to find an editor that feels right for you, who's features and interface you're comfortable with, that you can integrate into your business processes. This is a very personal choice, and some folks even use more than one editor. So, given the options I've provided above, you really can't go wrong!

Okay, if you enjoyed this tutorial, you might want to check out these other resources: The Best FTP Applications For Windows Users, The Best FTP Applications For Mac Users, and Finding The Best Hosting For Your Website.

I look forward to seeing you there!