The first tool you'll need to begin developing on your computer is a text editor. The article below will walk you through downloading and setting up a code text editor on your computer.


Text Editors

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

screen shot 2016-10-06 at 4 16 40 pm

Text editors provide a number of advantages to web developers:

  • Language-specific syntax highlighting.
  • Automatic code indentation.
  • Color schemes to suite 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.


Choosing a Text Editor

There are a number of text editors to choose from. Atom and Sublime Text 3 are some of the most popular text editors out there.

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.

I. Atom

Atom is a free text editor created by Github. Atom is open source, meaning that all the code is available for you to read, modify for your own use and even contribute improvements. Atom is "the hackable text editor," because it is highly customizable.

How to Install Atom

OS X

Atom works on Macs running OS X 10.8 or later.

  1. Visit the Atom homepage and click Download For Mac. In a few moments, Atom will appear in your Downloads folder as a .zip file:

    screen shot 2016-10-06 at 4 19 49 pm

  2. Click on atom-mac.zip to extract the application, then drag the new icon into your Applications folder.

  3. Double click the application icon to load Atom and get started.


Windows
Atom supports Windows 7 and 8.

  1. Visit the Atom homepage and click Download Windows Installer. In a few moments, Atom will appear in your Downloads folder as a .zip file.
  2. Follow the instructions in the Windows Installer to get started. You can visit Atom's Windows install page for more detailed instruction.

Save a File with Atom

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

  1. Close the Welcome Guide by clicking the x icon.
  2. In Atom's top bar, choose File > New File. An untitled, blank file will appear.
  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 Atom knows to provide HTML syntax highlighting.
  5. Create a basic HTML file:
    <!DOCTYPE html> <html> <head> <title>First HTML with Atom</title> </head> <body> <h1>Atom is Great!</h1> <p>And, it's free.</p> </body> </html>
  6. Launch a web browser of your choice.
  7. In the browser menu bar, find the Open File option.
  8. Navigate to your HTML file and select Open.
  9. You can now view your HTML in the web browser. To make changes, simply modify the file in Atom, save your work, then refresh the web browser tab and see your updates!

Explore Atom

Adding a Project Folder
Atom provides a tree view of your project, so you can conveniently navigate to different folders and files. Here's how to use it:

  1. In the Atom menu bar, choose File > Add Project Folder. This will launch your file manager. Navigate to a folder that contains text or code files and select Open.
  2. The folder will open in Atom's side pane, displaying its contents. Select from the list of files, or select a subfolder.


Choosing a Theme
Atom lets you choose from over 1,300 different themes to suite your color preferences and optimize code readability. Themes are broken down into two categories: UI (short for User Interface) and syntax.

To change your Atom theme:

  1. In Atom's menu bar, choose Atom > Preferences.
  2. In the Preferences pane, choose Themes.
  3. In the Choose a Theme section, you can mix and match your UI and syntax themes from the available choices, or explore over 1,300 custom Atom themes. You can make your code editor look just like Codecademy's code editor by searching for codecademy-syntax-theme within the Install menu on the left.


Install a Package
Packages are special add-ons that further customize your coding experience with Atom. For example, you may want a package that highlights syntax errors as you code. Such packages are called linters.

Let's install linter-tidy for our HTML:

  1. On the Atom menu bar, choose Atom > Preferences > Install. This will open the Settings pane.
  2. In the search field, search for linter-tidy. Atom will search its database of packages.
  3. Once Atom finds linter-tidy, install the package by clicking Install:

    screen shot 2016-10-06 at 4 24 26 pm

  4. linter-tidy is will now track your HTML as you code and alert you of syntax errors. You can search over 4,500 Atom packages here.

  5. To disable or uninstall packages, go to Atom > Prefererences > Packages, find your package and select Disable or Uninstall.


II. Sublime Text

Sublime Text is another popular text editor. Unlike Atom, Sublime Text is proprietary software, not open source. Sublime Text offers a free trial version for you to use before you decide to purchase it.

Atom and Sublime Text are not dependent programs. While you're free to try both, you do not need both in order to write code.

Install Sublime Text 3

OS X
Sublime Text works on Macs running OS X 10.7 or later.

  1. Visit the Sublime Text download page. Select OS X from the list of download options. Wait several moments for the application to download.
  2. Drag the Sublime Text icon into your Applications folder. The download process should present this option automatically. If it does not, find the application in your Downloads folder.
  3. Double click the Sublime Text icon to get started on your first code file.


Windows

  1. Visit the Sublime Text download page. Select Windows from the list of download options. Wait several moments for the application to download.
  2. Open the application either from your browser’s download section or from your computer’s Downloads folder.
  3. You may get a security alert asking if it’s okay to run this software. Yes, it’s okay. Click Run.
  4. Follow the prompts in the Sublime Text Setup Wizard to install the software.
  5. Find Sublime Text in your file system and open it.


Save a File with Sublime Text

  1. In Sublime Text's top menu bar, choose File > New File. An untitled, blank file will appear.
  2. Next, choose File > Save or Save As.
  3. We'll create a simple HTML file: [screen grab]
    • It's crucial that you use the file extension .html so Sublime Text knows to provide HTML syntax highlighting.
  4. Create a basic HTML file:
    <!DOCTYPE html> <html> <head> <title>First HTML with Sublime</title> </head> <body> <h1>Sublime is Great!</h1> <p>And, it's free.</p> </body> </html>
  5. To view your HTML in a web browser, launch a web browser of your choice.
  6. In the browser menu bar, find the Open File option.
  7. Navigate to your HTML file and select Open.
  8. You can now view your HTML in the web browser. To make changes, simply modify the file in Sublime Text, save your work, then refresh the web browser tab and watch the web page update!


Explore Sublime Text features

Adding a Project Folder
Like Atom, Sublime Text provides a tree view of your project so that you can conveniently navigate folders and files. Here's how to use it:

  1. In the top menu bar, choose Project > Add folder to project. This will launch your file manager. Navigate to a project folder of your choice and click Open.
  2. The folder will open in Sublime Text's side pane, displaying the folder contents. Select from the list of files, or select a subfolder.


Choose a Color Scheme
What Atom calls themes, Sublime Text refers to as color schemes. Change your color scheme to suite your color preferences and optimize code readability.

To change your Sublime Text color scheme:

  1. Choose Sublime Text > Preferences > Color Schemes from the top menu bar.
  2. Choose a color scheme from over 20 available options. screen shot 2016-10-06 at 4 30 16 pm


Install a Package

Before we can start installing packages in Sublime Text, have to to install Package Control.

To install Package Control:

  1. In Sublime Text's top menu bar, select View > Show Console. The Sublime Text console will open at the bottom of the window.
  2. Go to the Package Control installation page and copy the Python code for Sublime Text 3.
  3. Paste the code into the Sublime Text console and hit enter. This will configure Sublime Text so that you can start installing packages.
  4. To verify that Package Control is set up, select Sublime Text > Preferences. Two new options should appear: Package Control and Package Settings.


Next, let's install html-tidy, the HTML linter we installed for Atom.

  1. Select Tools > Command Palatte
  2. When the command palette opens, type Package Control: Install Package, then hit enter.
  3. html-tidy depends in on SublimeLinter. In the search field, search for SublimeLinter. When it appears in the search results, select it and hit enter.

    It should take a few moments to install.

  4. Go back to the command palette, and again type: Package Control: Install Package
    Then hit enter.

  5. Search for SublimeLinter-html-tidy. When it appears in the search results, select it and hit enter. It should take a few moments to install.
  6. Open an HTML file and start using the linter!