Atom is a modern Integrated Development Environment (IDE) created by GitHub. We will be using this extraordinary text and source code editor to create web sites.

Apple Install

I have created a special installer for Apple, that will install all of the amazing plugins to enhance your experience (e.g. color picker, auto file path detection, autocompletion, and much more).

System Requirements: OSX 10.8 or later.
Shortcut Cheat Sheet: Atom Mac Shortcuts

Steps to Install

  1. Step 1: Download the Atom Batman Edition Disk Image
  2. Step 2: After downloading, double click the disk image to open the installer
  3. Step 3: *Double-click on the Batman Icon to run the installer
  4. Step 4: Optional: Copy the Atom app to your Applications folder.
  5. Step 5: Double-click on the Atom application to open the app.
*If you receive the warning "Batman.pkg cannot be opened because its from an unidentifed developer" please do the following
  1. Step 1: Open your Mac System Preferences / Security & Privacy / General
  2. Step 2: Unlock the lock in the lower left
  3. Step 3: Choose the radio button: "Anywhere, " and agree to the warning
  4. Step 4: After running the Batman Installer, repeat the above steps and choose your original security option. Don't forget to lock the lock when you are done.

Art Institute: Required Installer on Thumb Drive

The iMacs we are using are reset each week. Therefore, you will need to run the installer at the beginning of each class (or use a personal laptop). In the interest of time (the sooner we start, the sooner we finish), you are required to have a thumb drive with the Atom Batman Installer so you can plugin, install, and set yourself up to win.

Windows Install

Unfortunately it is beyond my skill to create an installer for Windows. If someone in the community is willing to create one for us, that would be awesome. Until then, you will need to manually install plugins.

System Requirements: Windows 7 or later.
Shortcut Cheat Sheet: Atom Windows Shortcuts

Option 1: Overwriting Existing Preferences With Mine (fastest)

Watch the Video - Atom Windows Install

  1. Step 1: Download my preferences file
  2. Step 2: Extract the contents, you will end up with a .atom folder
  3. Step 3: Place the .atom folder in your user folder
    • The Location should be: C:\Users\username\.atom ( where username is your Windows username, mine is Meatch e.g. C:\Users\Meatch\.atom )
    • Note: You may have to write over the existing .atom if you had a prior installation of Atom
  4. Step 4: Download and run the installer for Atom

When you open Atom, you should now have the Packages, Snippets, and Keymap from my settings.

Option 2: Manual Installation (Time Consuming)

If you can't get option 1 installation working, I would suggest doing the following.

  1. Step 1: Download and run the installer for Atom
  2. Step 2: After successul installation, Open Atom.
  3. Step 3: Open Settings (Control + ,)
  4. Step 4: Choose Install in left navigation
  5. Step 5: Under Search Packages, type and install each of the following Awesome Atom Plugins:

Awesome Atom Plugins

  1. atom-alignment
  2. atom-autocomplete-php
  3. atom-beautify
  4. atom-wrap-in-tag
  5. auto-detect-indentation
  6. auto-update-packages
  7. autocomplete-paths
  8. color-picker
  9. config-import-export
  10. default-language
  11. drag-relative-path
  12. duplicate-line-or-selection
  13. emmet
  14. emmet-snippets-compatibility
  15. file-icons
  16. git-plus
  17. highlight-selected
  18. javascript-snippets
  19. keybinding-cheatsheet
  20. linter
  21. linter-jshint
  22. multi-cursor
  23. native-color-picker
  24. open-in-browser
  25. open-recent
  26. platformio-ide-terminal
  27. remote-sync
  28. sass-autocompile
  29. simple-drag-drop-text
  30. simple-panes
  31. symbols-tree-view
  32. tablr
  33. todo-show
  34. wordpress-api


Snippets are a great way to automate common pieces of code through custom shortcuts. I have developed many over the years, and ported them over to Atom. So if you would like to use my snippets:

  1. Step 1: Download and extract the zip.
  2. Step 2: Select all, and copy to the clipboard.
  3. Step 3: Choose Snippets from the File menu to edit it.
  4. Step 4: Select all, and paste the contents of the clipboard
  5. Step 5: Hit save, and now you can start using my snippets library.

for more on how to create and manage snippets, check out this Sitepoint article.

Google Chrome is a modern web browser with tools to help you develop/analyze/troubleshoot websites.

Install Google Chrome

  1. Download and install from Google Chrome

Why Google Chrome?

While it's important that you test in all the common web browsers, for the sake of common ground I will be using Google Chrome to teach the concepts covered throughout each course. To enhance your learning experience its required that you download and use Google Chrome for the duration of my classes.

Install Google Chrome Plugins

The following are plugins that I use in Google Chrome to provide additional functionality (e.g. guides, screenshots).

  1. Check My Links
  2. GuideLinr
  3. Page Ruler
  4. Full Page Screen Capture
  5. JSon Formatter
  6. Keyboard Shortcuts to Close Other/Right Tabs
  7. WhatFont
  8. Marmoset
  9. YSlow
  10. Web Developer
  11. Web Developer
  12. DevTools Autosave
  13. Instant Wireframe
  14. PHP Ninja Manual
  15. PerfectPixel
  16. IE Tab
  17. Chrome Daltonize
MAMP is a all-in-one, web server for setting up a testing environment (Apache, MySQL and PHP).

Install MAMP

  1. Download and install from MAMP


There are server side technologies that make it easier for you to manage your website. In order to test these technologies out, you need to turn your computer into a Web Server. You could manually install these technologies one at a time (e.g. Apache the Web Server, MySQL the Database, and PHP the scripting language) - but MAMP makes it so easy to do it all in one. There are other all in one solutions, however, MAMP has always been the easiest to configure - and given that it is now cross platform (Windows and MAC), it is the best solution to teach from.

MAMP used to stand for Mac Apache MySQL and PHP, but they now have a windows version - so the first M is no longer as valid.

You do not need MAMP Pro. Pro gives you some interesting features that you may wish to use down the road. For our purposes we won't be needing any of the fancy features of Pro. Truth be told, I have never had a need to go to Pro in my professional experience.
Photoshop is the digital hub for most Graphic Design projects. While there are other apps out there, it is the industry standard. We will be using Photoshop to develop and manage our digital image assets for the web. At the end of the day, I won't know if you used Photoshop or another application. However, I will be teaching from Photoshop, so if you want to reduce the learning curve - this is a must have app.
  1. 30-day Free Trial of Photoshop
  2. Full Creative Cloud Suite Student Discount or there is also a discounted membership for the Creative Cloud Photography plan, which is Photoshop and Lightroom only can all be found here