Text Editors

Now that you've taken the plunge, it's time to start assembling your toolkit. The bare minimum of what you need is already available on your computer—but you can do better. The first tool I'll be examining is a type of document writer known as a text editor.

Text editors, at their core, are incredibly simple. They edit plain text, or any text without formatting—no boldface, italics, fonts, alignment, images, adjustable margins, and so on. Text editors can do none of them. This is in stark contrast to a word processor like Microsoft Word, which all work exclusively on formatting text. Here's a visual comparison between Notepad, which is a text editor that comes with Windows, and Wordpad, which is a word processor that comes with Windows.

So why the distinction, and why text editors then? You don't know it, but word processors set your formatting using invisible formatting codes embedded into the document. Even if the text looks "plain", there's still a font set, a font size set, alignment set—all things that can confuse a program trying to read a web page. Text editors don't have formatting codes—therefore, they're suitable for editing anything that a computer would need to read, such as a configuration file, a script, or a web page.

As said, Windows comes with a text editor, Notepad. Various flavors of Linux package in a variety of text editors, both graphical and command-line in nature. MacOS, on the other hand, has no built-in text editor, aside from a clunky, hidden-away plain text mode in TextEdit. On Mac, you'll want to install a proper, standalone text editor for any serious web development.

What to look for in a text editor

As I said in the intro, you can do better than Notepad. It'll work, but it's missing key features you'll come to love and rely on as you get up to speed making sites. Many aftermarket text editors are chock full of tools to help keep your markup clean and even detect errors. Here's a few to be on the lookout for if you're browsing:

Syntax highlighting

Most text editors and IDEs will recognize the language you're writing in and color-code tags, attributes, and declarations for you. This is called syntax highlighting, and for being able to read your markup, especially without whitespace, it's invaluable. It's also good for spotting any errors you've made—if something you know should be colored in one color isn't, you've made a mistake somewhere.

(All example blocks of styling and markup featured on Tesserae are colored using a syntax highlighting script for ease of reading.)

Autocompletion

Text editors are pretty good at helping you keep your brackets and quotes closed too. In HTML and especially CSS, that's important. Some, especially the ones geared towards web development, will even insert the closing tag for you as soon as you type the opening tag. Autocompletion features will help keep you from accidentally forgetting to close a string and wondering why your page stopped working.

Auto-tabbing

If you're the type to use a lot of tab spaces in your markup for readability, some text editors will detect how far you've indented and match that when you make a new line.

Multiple file support

One of Notepad's most severe limitations is that it can only edit a single file at a time. If you're juggling editing two pages and a stylesheet, you'll have three windows to move between while you're working. In contrast, most text editors and IDEs feature support for opening multiple files at once, usually in tabs just like your web browser. Some even go a step further and let you edit files side-by-side.

Plugin support

This one is more a nice-to-have than anything else, but many text editors feature plugin support to extend the capabilities of the program. Plugins can provide support for things like a page preview, file compare, file manager, and even a spellchecker, if the program doesn't come with it natively. If you're willing to dig through the ecosystem of plugins for your text editor of choice, you might just be surprised at what's out there.

Recommended text editors

Of course, all that might mean nothing to you (only for now, I hope), and you just want my recommendation. Let's get into those then.

For Windows: Notepad++

I've been using Notepad++ throughout this page to demonstrate text editor features because it really, truly has them all. Completion, syntax highlighting, multiple file support in tabs and side-by-side, tons of languages supported (and you can add more), fast, customizable, free, and it has plugin support. I personally swear by Notepad++ for any website work I need to do, and it's the one I recommend to anyone using Windows.

In fact, that's about its only drawback: it's Windows-only. But for those of you on Windows, this might very well be all you need.

For MacOS: BBEdit

BBEdit has been a staple of the savvy Mac user's toolbox since the early 90s, and for good reason: it doesn't suck. In some ways, it's actually way more powerful than Notepad++, featuring the same customizability and autocompletion, multiple file, and plugin support, but if you spring for the full, paid version, you also get advanced HTML, Git, shell, and web server support that make it a dream for power users. There's enough stuffed into it that I can't sum it all up here. Here's their feature comparison if you'd like to see for yourself, and this still isn't everything.

If you're just a casual web builder, though, BBEdit's free mode will be more than enough for you.

For Linux/cross-platform: Atom

Linux users have no shortage of quality text editors, all with their own ecosystems and learning curves, but if you're just starting out (or you want an alternative to the previous two, for Windows and Mac users), try Atom. A self-proclaimed "hackable text editor for the 21st century", Atom's from the folks behind Github, so tight integration with it and collaborative editing are built-in. With a slick interface, autocompletion, a file manager, and theming and plugin support, Atom is quite the contender in its own right.

Be warned that Atom does run using Electron, so if that's a dealbreaker for you, you might want to look for a more native app.