Module 4: Install Your Tools

Proficiency in web and software development requires more than just a grasp of programming languages. Developers must also be familiar with a wide assortment of tools and technologies that allow software to be created and shared with users around the world.

This course will expose you to a wide range of tools. Although they may be overwhelming at first, these tools will soon become as familiar to you as a scalpel is to a surgeon.

The purpose of this section is to acquaint you with each of these tools and walk you through the process of setting up all necessary accounts and installing the required programs on your machine.

Module 4 Deliverable

This module does not have a deliverable that you will place in your prework folder. It is, however, important that you complete all of the installs outlined in the module.

Ready for Action!

Below is a list of the tools you should install before your first class to ensure you're ready to dive in on Day 1.

  • Google Chrome
  • Screencastify
  • Slack
  • Visual Studio Code
  • "Open in Browser" Visual Studio Code extension
  • Git Bash (Windows only)
  • Terminal (Mac only; preinstalled)
  • Git and GitHub
  • Xcode (Mac only)
  • Homebrew (Mac only)
  • SSH keys

You should also create accounts for the following:

  • LinkedIn
  • GitHub
  • Stack Overflow
  • Slack

If you encounter any issues during setup, don't worry. Your instructional staff will help you troubleshoot any errors and answer your questions on the first day of class. Just sit tight until then.

An Overview of Your Tools

Before installing your tools, take a moment to examine each of them in more detail to better understand the role they will play in the course.

Google Chrome

This is the web browser we'll be using to quickly determine whether our code is working. Google Chrome has a number of tools that make it an ideal platform for coding, so if you are currently using a different browser, we encourage you to switch to Chrome.

Screencastify

Screencastify is a free, lightweight extension for Google Chrome. We will be using this screen recorder to easily capture our desktop, browser, webcam, or certain applications.

Slack

Slack is an online communication tool that is a mix of forum, instant messenger, and email all rolled into one. It's a tool used by countless organizations worldwide, and you'll be using it every single day for the next six months.

We will use Slack to send code snippets during class, relay important announcements, and facilitate group exercises. You will receive the link to your class-specific channel during orientation. Though there is a Slack web client, for this course you should have the program installed on your machine.

VS Code

Oh, the power of VS Code! A little program that does so much!

Visual Studio (VS) Code is a free text editor that runs on Mac, Linux, and Windows operating systems. For developers, text editors are like the cozy pillow on which they rest their heads.

At a fundamental level, programming is all about creating text in files with various extensions. When we create a block of HTML like the one below, what we've really done is created a block of text. There are some funny symbols in there, but at its most basic level, it's just text.

VSCode_11

For a simple text editor, this is where the comprehension stops: our block of HTML remains a block of text. But for more powerful text editors like VS Code, these blocks of text are immediately recognized as code (as long as we include the right file extension). VS Code can provide a more visually intuitive understanding of the code through indicative coloring, smart tabs, and autocomplete functionality. As a result, creating HTML like the block above is a more natural process and can be debugged more quickly.

VSCode_1

When you start working in VS Code, you may notice that it wants to autocomplete your code while you're typing it. Don't be alarmed by this! VS Code has a built-in feature that can hint at autocompletion as you type. You don't have to use the suggestions that it provides, but this feature will save you time in the future as you continue to code.

Open in Browser (VS Code Extension)

As you will find in this course, VS Code is powerful in its ability to be extended through the use of plug-ins. This means that we can easily incorporate free add-ons that enable VS Code to make the process of coding even easier than before.

For now, the only extension we recommend installing with VS Code is the Open in Browser extension. This will allow you to open HTML files you are editing in VS Code in your web browser without having to go through File Explorer (Windows) or Finder (Mac).

Git Bash and Terminal

Git Bash (for Windows users) and Terminal (for Mac users) offer a command-line interface for working with the files and folders on your computer.

So, is it like Finder or Windows Explorer? Kind of, except that there are no pictures or visuals. It's just a box with text.

Uh, why would I want that? Over time, you'll come to understand that, in many situations, using a command-line interface can be faster and more effective than relying on the operating system's graphical user interface (GUI). You'll get plenty of exposure to the command line at the beginning of the course. gitBashTermninal_1

Git and GitHub

Code files are largely collaborative, as developers are constantly building on each other's work. Git is a version-control system that offers a specialized set of strategies for orchestrating this collaboration, and GitHub stores these collaborative actions online. You can think of GitHub as a sort of Dropbox for coders. It offers a central place for developers to upload their code, view revision history, and make changes to a definitive set of files. You'll come to learn a lot about Git and GitHub in your first week of class. You will receive the link to your class-specific repository during orientation.

Xcode (Mac Only)

Xcode is a development suite exclusive to Mac. We will primarily be using Visual Studio Code in this course, but installing Xcode will set up some of the other required boot-camp programs including Git, which coders depend on for logging the development of programs and applications.

Homebrew (Mac Only)

Homebrew is a Mac-specific tool kit that makes it easy to install a variety of applications using the command line. It can greatly simplify the installation process for various tools you'll be using throughout your career.

SSH Keys

Generating SSH keys allows developers to interface with certain remote services without having to constantly type out login information. You're going to set up an SSH key for GitHub.

Without a key, you won’t be able to push your code to GitHub without entering a password each time; trust us, that would be as irritating as needing a key to open every door in your home.

Ready, Set, Go!

Now it's time to collect your tools and begin. Setup guides for both Mac and Windows users are provided in the links below. Follow the instructions closely and do your best with the information you have. (Yes, we know there is a lot to install.)

One bit of advice: Throughout the course, you will frequently need to install and use unfamiliar tools. Resist the urge to stop and ask, "Am I doing this right?" Instead, trust your instincts and take your best stab at it. If you get lost, we'll get you the help you need right away. You can do this!


Activity