Introduction

Text editors, also called code editors, are applications used by developers to write code. They highlight and format your code so that it's easier to read and understand. If you've used Codecademy, you're already familiar with a text editor! It’s the area you write your code in.

Text editors provide a number of advantages to web developers:

  • Language-specific syntax highlighting
  • Automatic code indentation
  • Color schemes to suit your preferences and optimize code readability
  • Plug-ins to catch errors in the code
  • A tree view of your project's folders and files, so you can conveniently navigate your project
  • Key shortcuts for faster development

1. CHOOSING A TEXT EDITOR

There are a number of text editors to choose from. Atom and Sublime Text are two of the most popular text editors used by developers.

Sublime Text has been the text editor of choice for many years. It is stable and reliable.

Atom was released by GitHub after Sublime Text. It's a fully customizable text editor. Since Atom is written in HTML, CSS, and JavaScript, you can customize it yourself once you've learned those languages.

Either text editor is great for development, so you can't make a bad decision here. When you are further along in your coding career, try another code editor to see what features work well with your workflow.

Exercise I: Download Atom

In this exercise, we recommend you follow these steps to download Atom.

OS X

Atom works on Macs running OS X 10.8 or later. Visit the Atom homepage and click Download For Mac. In a few moments, Atom will appear in your Downloads folder as a .zip file:

Click on atom-mac.zip to extract the application, then drag the new icon into your Applications folder. Double-click the application icon to load Atom and get started.

Windows

Atom supports Windows 7 or later. Visit this webpage and download atom-windows.zip. In a few moments, Atom will appear in your Downloads folder as a .zip file.

Follow the instructions in the Windows Installer to get started. You can visit Atom's Windows install page for more detailed instructions.

2. Development Folders

Before using your text editor, it's important to establish an organized file system. As the number and size of your projects grow, it becomes increasingly important to know where to save new projects and find old projects.

Most developers store their projects in an easy-to-find directory (what you might be used to calling a folder). Here at Codecademy, we recommend naming this directory projects. It will store all of your coding projects. Whenever you create a new project, no matter how small, you should always make a new folder inside your projects directory. You will find that single-file projects can quickly turn into large, multi-folder projects.

Exercise II: Create a dev folder

Below are the steps you need to follow to create a new folder for all of your programming projects. You will also learn how to load a new project folder into Atom. For steps 1 and 2, navigate to a folder using Finder (Mac users) or My Computer (PC users).

  1. Navigate to a folder you visit regularly and create a new folder called projects. On Mac, this may be your User account. On PC, you may want to save this on your C drive.

  2. Inside the projects directory, create a new folder called HelloWorld. Everything you add to this folder will be part of your HelloWorld project.

  3. Open Atom on your computer.

  4. Atom provides a tree view of your project, so you can conveniently navigate to different folders and files. In the Atom menu bar, choose File > Add Project Folder. This will launch your file manager. Navigate to the HelloWorld folder and select Open. The folder will open in Atom's side pane. At this point, there should not be any contents in the folder. We'll add a file in the next exercise.

3. Adding a File

When you open Atom, the Welcome Guide will appear. For now, we'll skip getting to know Atom and start writing some code.

Before you learn how to add files to a project folder, it is important to understand the purpose of file extensions.

A file extension is the suffix of a filename and describes the type of content the file contains. The file extension is always the last 3 or 4 characters in a filename, preceded by a period. For example, the HTML file extension is .html, and it tells the browser (and other applications) to interpret the contents of the file as a web page.

Once Atom loads a project folder, you can add files. The steps below describe how to add files. Don't worry about doing this on your own computer. We'll get to that in Exercise III.

  1. In Atom's top bar, select File > New File. An untitled, blank file will appear.
  2. In Atom's top bar, choose File > Save or Save As. Name the file with its appropriate file extension (.html, .css, .csv). It is critical that you include the correct file extension, so programs know how to interpret its contents.
  3. Begin coding! Save your file often. This will decrease the chances of losing unsaved work.

Exercise III: Add a file

In this exercise, you will create an index.html file in your Hello World project.

  1. In Atom's top bar, choose File > New File. An untitled, blank file will appear.
  2. Before you save the file, copy and paste the following boilerplate HTML code:
<!DOCTYPE html> <html> <head> <title>Hello World</title> </head> <body> <h1>Hello World</h1> </body> </html>

Notice: All of the text in your file is the same color. This will change after you save the file as .html.

3. In Atom's top bar, choose File > Save or Save As.

4. Name the file index.html. It's crucial that you use the file extension .html so the text editor and web browser know how to interpret your code.

4. File Extensions and Syntax Highlighting

Atom and other text editors are able to interpret file extensions and provide language-specific syntax highlighting. Syntax highlighting is a tool for making code easier to read. Take a look at your index.html file. The text and tags are different colors. This is how Atom highlights .html syntax. With each new language you learn, Atom will highlight text in a way that makes your code easy to read. This may be different than other text editors and also different than the way your code is highlighted on Codecademy.

Exercise IV: Open your HTML File in a web browser

At this point, your file is ready to be viewed in a web browser. The following steps should be taken outside of Atom:

  1. Back in your file system, navigate to the index.html file in your Hello World folder.

  2. Double click index.html. the page should open in your default web browser.

Congratulations! You can create web pages on your own computer!