If you're interested in learning to code for the web, there are some excellent editors available now. I'm going to talk about four of them: Notepad++, Sublime Text, Atom, and Brackets. The latter two I only recently discovered.
All you need to build a website is a simple text editor, such as the one bundled with your computer's operating system. Notepad on Windows, TextEdit on Mac, or gEdit for Linux will do just fine. If you're serious about coding you should consider trying a more advanced text editor that helps make coding more
intuitive. A good text editor is worth it's code in gold. (But note, the four options I describe below are either free, or low cost).
Before I get into text editors I'd like to point out that in the world of web authoring there are primarily three kinds of tools often used: Text editors, WYSIWYG (What You See Is What You Get) editors, and IDEs (Integrated Development Environments). IDEs manage the whole process of web site management from editing the code, to managing the files locally, to uploading to a web server.
Some software combine various aspects of these functions, such as Adobe Dreamweaver, which shows a view of the code, as well as a live view of the web page being created, making it both a code editor as well as a WYSIWYG editor, but it also functions as a file management tool with FTP capability, making it a full functioning IDE.
If you don't have the code knowledge necessary, a WYSIWYG tool is a great way to learn. This is how I started to learn to design for web. And you don't have to shell out the bucks for Dreamweaver.
Here is a useful (although now dated) list from Lifehacker of quality WYSIWYG editors
Years ago I stopped buying office suite software for personal use because I discovered open source alternatives which were free and capable of everything I needed (I think the last version of MS Office I purchased was Office 2000 in college). I figured the same was true of web editing software and came across
Nvu, a simple but powerful WYSIWYG web editor. I started creating web content using Nvu and later a fork of it called Kompozer. Not knowing any HTML, and not being able to afford Dreamweaver, having an open source tool like Kompozer was a fantastic way to learn code. This was the tool that really exposed me to web design (This website was mostly built using it).
History lesson: Kompozer is based on Nvu, which is based on the old Netscape Composer. Remember Netscape from the first browser wars back in the 90s? So much great open source web technology derives from there; Firefox, for example, is a derivative of Netscape
Ultimately you can only do so much using a WYSIWYG editor. You need to dig into the code to give advanced form and function to the web. Kompozer, just like Dreamweaver, provides a code view that allows you to directly edit the code. This is where I began to understand the importance of HTML (content), CSS (design) and JavaScript (function). Once you start messing with the code, you begin to understand the elegance of the way code is written. You start to think of web in two ways, the visual outcome, and the underlying code, as you design. Slowly I started to rely less on the WYSIWYG editor and realized that a great text editor is all I need.
Choosing a Text Editor
For several years I've relied mostly on text editors to code for the web. I have access to the most recent amazing versions of Dreamweaver and the rest of Adobe's creative cloud at work, and don't get me wrong, those tools are very nice, especially having access to the vast array of applications and fonts, etc, but the freedom of open source appeals a lot to me for many reasons – the being free part in particular. With the new Creative Cloud offerings, an Adobe user has no choice but to essentially pay a $600/year membership fee. If I was primarily a freelancer I could see that being more of a necessity.
As mentioned earlier, you can code using just a simple text editor that comes with your operating system. But to do that you practically need to be a coding savant. My go to text editor for some time has been Notepad++. Its open source and free, highly customizable, and it makes coding a lot simpler with some great features, however it is only available for the Windows operating system. Mac users fret not, I've ready some great things about the freeware TextWrangler that is available only for Mac. In recent years I've heard a lot about Sublime Text, which is not technically free, but does work across operating systems (aka it's cross-compatible) and is designed specifically with web coding in mind. There really are a lot of text editor options out there.
So here is a comparison of four text editor options. One caveat: I am by no means a software engineer, or a computer programer. I only use these tools for coding web (HTML, CSS, JS), so there are many aspects of these tools that I cannot fully evaluate. I'll quickly categorize my findings based on web authoring by: function, operating system (platform) availability, design, and cost/license.
Function
Tag highlighting
A far as function is concerned, each of the four offer excellent features. The most important function as far as I'm concerned is the highlighting of opening and closing tags in a line of code (surprisingly this was not a feature of Dreamweaver until recently). This helps a lot when traversing code. All four offer this feature!
Auto Completion
Code auto completion is a really nice feature of Dreamweaver. It can be a speedy time saver especially with longer elements like <section> and <header> and every keystroke saved adds to efficiency. Its the little things that matter. Notepad++ and Brackets offer this functionality and although it is slightly different from Dreamweaver, it's just as time saving (Note: you would think that since Brackets is an Adobe product it would function the same as Dreamweaver, but oddly it functions like Notepad++).
Document Map/Mini Map
A feature that I really appreciate (that I first discovered in Sublime Text) is the Mini Map (or Document Map) that appears on the side of the editor and allows you to see a birds eye view of the document code. This really helps to find your way around a lengthy document, scrolling up and down quickly. This feature is standard on Sublime Text, and built in as an extension on Notepad++. You can also download and install extensions that provide this feature on Brackets as well as Atom. Note: on Brackets, the minimap will take the place of the scroll bar.
File Organization
The benefit of using and IDE is that the software manages all of the files for you. All four of these text editors offer some kind of file management functionality. Notepad++ allows the user to set up workspaces (or file architectures) to keep sites organized. I have heard that there are issues with Brackets doing this on a networked environment but locally you should be fine with any of these editors. Personally I tend to rely on my own system of organizing files in Windows to handle my file organization, so taking advantage of an IDE for managing files has never been a real interest of mine.
Languages Supported
Notepad++ and Sublime Text support a vast array of languages, including HTML, CSS, JavaScript, PHP to name a few of the web related ones, but also many other programming languages including C, C++, C#, COBOL, Ruby, Java, SQL. These are impressive lists! Brackets and Atom have one advantage here in that in addition to that library of languages, they also support more web prepossessing languages such as LESS and SASS out of the box.
One important note: as Brackets is an Adobe creation, it does offer some cross functionality with other Creative Cloud apps.
Design/Aesthetic
The design/UI of the product is an important consideration. After all you want the place where you do most of your work to be pleasant and effective. Notepad++ suffers here with a fairly clunky appearance overall, although it does offer a decent amount of themes for customization. Sublime Text really raised the bar with a much more pleasing appearance/UI. Atom is also great in this respect but Brackets wins by eliminating the Windows shell all together and having a really clean and efficient design.
Operating System Compatibility
Notepad++ is only available for Windows unfortunately. (Note: TextWrangler, a Mac only editor is often considered very comparable to Notepad++)
Brackets, Atom and Sublime Text are available for Windows, Mac, and Linux
Costs/License
Notepad++, Brackets, and Atom are open source and free applications!
Sublime is free to download and evaluate, but the company states that you must pay if you wish to continue to use the application, however there is no official end of the evaluation software (unlike most applications which cut you off after 30 days), so you could technically use Sublime for free indefinitely, but you do so knowing you are a cheapskate. A Sublime Text license is only $70 and grants you access to using on unlimited machines. Until you license a copy, you will see "Unregistered" prominently listed at the top of the app window.
Verdict
I'm going to keep using Notepad++ for the foreseeable future because I know it, and I like the functions it offers. But I'm also going to try out Brackets and Atom as two excellent and open source contenders that support more advanced languages out of the box. As I continue to examine each of these editors I'll update this blog post with my findings.
