Install all the things!

Set up your computer, install all the different web browsers, install a code editor, and set up GitHub.

  1. Video or tutorial

    You can watch the video(s) or follow along with the written tutorial—or both—they convey exactly the same information.

1 Configure Finder

Let’s change a few settings on your computer to make development life easier.

  1. Go to Finder > Preferences.
  2. Go to “Advanced”.
  3. Make sure “Show all filename extensions” is checked.
  1. Windows

    If you’re a Windows user, this tutorial isn’t for you.
    ☛ Go to the Windows installation tutorial.

2 Configure keyboard preferences

By default some of the keyboard features are turned off on Mac OS X—let’s fix that.

  1. Go to  > System Preferences….
  2. Go to “Keyboard”.
  3. Go to the “Shortcuts” tab.
  4. Enabled full keyboard access to “All controls”.

3 Install The Unarchiver

This is a simple zip utility that’s much better than the one built into Mac OS X. It’s one of those apps I install on every Mac I touch.

If you have an Apple App Store account, search and install it from there.

If you don’t have an Apple App Store account (or forget your password):

  1. Download The Unarchiver from the website.
  2. Unzip the downloaded file
  3. Drag the application to your “Applications” folder.

4 Install Firefox

We need to install a bunch of browsers because, as web designers, we don’t know what browser someone will be using—so we need to test our websites in all of them.

  1. Go to Mozilla’s website and download Firefox.
  2. Mount the disk image by double clicking.
  3. Drag the application to your “Applications” folder.
  4. Eject the mounted disk from your computer.
  5. Delete the downloaded file.
  1. Warning

    Make sure to only download Firefox directly from Mozilla—other websites may inject malware.

5 Install Chrome

Go to Google’s website and download Chrome. (Ditto steps above.)

  1. Warning

    Make sure to only download Chrome directly from Google—other websites may inject malware.

6 Install Opera

  1. Go to Opera’s website and download Opera.
  2. Unzip the download
  3. Double click the installer and let it do its thing.
  4. Delete the downloaded installer file.
  1. Warning

    Make sure to only download Opera directly from Opera—other websites may inject malware.

7 Configure Safari

Safari’s web developer tools are turned off by default—so let’s turn them on.

  1. Go to Safari > Preferences
  2. Go to the “Advanced” tab.
  3. Make sure “Show Develop menu in menu bar” is enabled.

8 Create a BrowserStack account

We want to be able to test Microsoft Edge, but because we’re using MacOS, that becomes a little more difficult.

A simple way to test is using an online emulation service. BrowserStack, sponsored by Microsoft, provides free Microsoft Edge testing. So, we’re going to use that service.

  1. Go to BrowserStack’s website and create an account (press “Get Started”).
  2. You may be prompted to install something else for testing on localhost: Press “Yes” you want to do that, and install the extension.

9 Get HTML files to open properly

This will make it so double clicking HTML files opens your browser instead of a code editor.

  1. Download this HTML file. (If clicking this link doesn’t download the file, Right Click > Download Linked File.)
  2. In Finder, go to where it was downloaded (likely your “Downloads” folder) and right click—press “Get Info”.
  3. Under the “Open with” section, set it to “Firefox” or “Chrome”.
  4. Press “Change All…”.
  5. Close the info window and trash the HTML file.

10 Create a GitHub account

Git is a version control system and GitHub allows us to host all our code & websites online. (More on these two things next week.)

  1. Go to GitHub and sign up for an account. Choose whatever username and email address you’d like.
  2. Choose the free plan when you get to that screen.

You’ll be handing in your profile page online later.

  1. Remember

    Though it shouldn’t need to be said: remember your password!

11 Install GitHub Desktop

We need to install the GitHub Desktop application so that we can manage and upload our code to GitHub.

  1. Download the app from the GitHub Desktop website.
  2. Unzip the downloaded file
  3. Drag the GitHub Desktop application icon to your “Applications” folder.

Make sure to sign in with your GitHub username, email address, and password.

12 Install the Command Line Tools

We need to install some extra development tools on our computer so Markbot can work well.

Open the application on your computer called “Terminal”, it can be found in Applications > Utilities

Type exactly this:

xcode-select --install

Hit Return

It will guide you through the download and installation process.

13 Install the Java Developer Kit

We need to install the JDK because the automated marking program, Markbot, needs access to Java for performing some of it’s tasks.

Go to the JDK download page on Oracle’s Java Downloads website.

Chosse the .dmg version. And don’t forget to accept the license agreement.

  1. Download the JDK for your computer.
  2. Mount the disk image by double clicking.
  3. Double click the installer and let it do its thing.
  4. Eject the mounted disk from your computer.
  5. Delete the downloaded file.

14 Install Markbot

All of the coding exercises we do in this class will be using Markbot to automatically grade your work. So, we need to set that up.

  1. Download Markbot. (or Markbot for Windows)
  2. Mount the disk image by double clicking.
  3. Drag the application to your “Applications” folder.
  4. Eject the mounted disk from your computer.
  5. Delete the downloaded file.

Open up Markbot and sign in with your GitHub username.

15 Final checklist

Double check you’ve installed everything on your computer.

Here’s a checklist to help out: