Atom Text Editor

Load Time This page contains embedded interactive content. In may take 3-10 seconds to completely load.

Text editors are specialty applications which can ease the type of text and coding work you will be doing in web development. These applications are designed to speed up the writing process and are specially equipped to display text documents in a way that makes identifying errors more easy.

There are many types of text editors, each optimized for specific types of tasks.

Atom text editor logo

For this class, we need a text editor that is optimized for web development and code. You are welcome to use whatever text editor you like for this course, however, we will be using GitHub’s open-source Atom Editor for our videos and tutorials, and it may behoove you to use it as well (especially beginners).

Atom Installation Guide

The following pages will guide you through the installation process. Please following the appropriate instructions for your device.

For Mac

View Larger

For PC

View Larger

Optional/Recommended Additions

Most text editors allow you to download additional options created by the community which extend their functionality and can make them more suited to your particular needs.

For Atom and this course, these would be very beneficial:

These packages (slides 1-8), add functionality to your editor.

  • file-icons - Displays file type icons next to files in the sidebar (used in the following tutorial)
  • open-in-browser - Opens files (such as HTML) in your default browser
  • highlight-selected - Highlights all occurrences of a selected word. This is useful for debugging.
  • base linter - Base package to show code errors. Couple with linter-htmlhint and linter-stylelint
  • pigments - Highlights color values in files.


This theme (slides 9-14), which customizes the look and feel of the editor:

  • newbound-dark-syntax - Subtle, medium contrast theme.

View Larger


development atom editor guide install text