Beginner’s Guide to Web Development

View All Chapters
Badge choosing an ide or text editor

Choosing an IDE or Text Editor

4 minute read

When it comes down to it, websites are just a bunch of code that displays text, images, and interactive controls in a web browser, and all that code needs to be written somewhere — but where?

Since it’s made up of letters, numbers, and symbols, the code for websites can really be written in any application that allows you to type text and save it as a file. On computers running Windows, that means you could build your entire site with Notepad. On macOS, you could use the built-in TextEdit program. And on Linux, you could use editors like nano or vim. That said, there are several other options that are built specifically with code writing in mind and offer useful features that the simple editors mentioned above do not.

Text Editors

Three popular text-based code editors are Sublime Text, Atom, and Visual Studio Code. Each of these offer features beyond just simple text editing, like standardizing the colors that are used to display different parts of code so you can easily understand code at a glance, powerful find and replace that lets you find all instances of a variable in a certain scope and just replace those, and multiple editing panels in a single window so you can view several related files at once (like HTML, CSS, and JavaScript files).

A text editor and preview window

These editors also have a community-driven plugin system so they can be extended to perform all sorts of useful tasks. For example, Sublime Text 3 has a plugin called HTMLBeautify. Once you’ve installed it, you can run it from a key command or the menu bar and it will look at any HTML in an open editor window and format it based on a set of predefined rules, like standardizing tag indentation based on how they are nested or removing any empty lines between tags.

Beautifying code in Sublime Text

You can even configure different plugins to run every time you save, which can be great for running scripts that test your code and validate that you didn’t introduce any syntax errors early— that way you can fix them before they get deployed on a server.

Code-specific text editors like the ones mentioned above provide a much needed service to programmers and make their lives better by saving time through enhanced productivity, fewer uncaught bugs, and customizability.

Integrated Development Environments

One level above code specific-text editors is a larger tool called an integrated development environment (or IDE). Examples of IDEs are Visual Studio for ASP.NET applications, Eclipse for Java development, and Xcode for Swift and Objective-C development. IDEs usually combine code editors, debuggers, and built-in tools for compiling and running applications.

Tooling

Some IDEs also include platform-specific tools. For example, in Apple’s Xcode IDE there’s a tool called Interface Builder where you can lay out all the different screens in your app and build up your UI visually before connecting it up with code to dynamically change the data that’s displayed while people are using the app.

Interface Builder in Xcode

Code Suggestion

Another common feature between different IDEs is intelligent code suggestions. This is an essential feature when working with large frameworks like ASP.NET and UIKit (iOS), but once you’ve experienced it, you’ll likely want it for developing in any language or framework.

Debugging

Debuggers are programs that help you find bugs in your code while it’s running so you can remove them before you release an application or website into the world. With the debugger, you can set breakpoints on certain lines of your code, and then whenever that code is executed, the IDE will pause the running application and let you inspect the value of all the variables at that moment in time — in other words, the state of your application. With any luck, you’ll see something that looks off when you look at those values, and you’ll be able to look back at your code and make a correction.

The best answer to the question, “What program should I use to write my code?” requires a lot of research and reflection, but the good news is that when you’re getting started, the answer is as simple as, “Whatever you want.” Then as your skills grow, you can take advantage of all that code-specific text editors and IDEs have to offer.