About This Book

How to Get the Most Out of This Book

Chapter 1: Setup and Tooling

Chapter 2: What is a Web Page?

Chapter 3: Using CSS to add Style

Chapter 4: JavaScript

Chapter 5: Intro to Programming Languages

Chapter 6: Terminal

Chapter 7: Git and Version Control

Chapter 8: Frontend and Backend Web Development

Chapter 9: Field Guide

Changelog

Enter your name and email address below, then click the **"Send my free chapter"** button to get started

A Field Guide to Your New Career

How to Become a Web Developer: A Field Guide

The terminal is a program that you use to type in commands. It is a text input/output environment.  Not knowing how to use a terminal as a Web Developer would be like a writer not knowing how to use a computer; sure they could use a typewriter or good-old pen and paper, but how effective would they be?

In this chapter, we'll cover what a terminal is, introduce you to some of the more common and useful commands, and hopefully give you a sense of the efficiencies the terminal makes available. This chapter is a required read before going into the Git chapter.

The default terminal is usually white, but you've probably seen black terminals in movies. Featuring a geeky hoodied-hacker doing something like "running an algorithm" or "extinguishing the override" or some other nerd'ish lingo nonsense. Take for example, the terminal making an appearance in these well-known movies:

From left to right, these images are from 

Let's start things off by opening your terminal; every major computer comes packaged with a terminal program.

Because macOS and Windows OS users have different default terminal programs, the commands differ slightly. I will start each Exercise with macOS instructions, followed by instructions for Windows OS users (specifically Windows 10 users).

When talking about the actual Terminal program that comes packaged with macOS I'll capitalize the "T," otherwise terminal with a lowercase "t" will refer to any terminal program that interfaces with your Shell - more on that shortly.

: There are several ways to open the Terminal on a Mac. I will use Spotlight. To use Spotlight, press cmd + spacebar. Then type in "terminal." You should see the terminal app come up. Click on it.

There is a good chance that your terminal looks slightly different than mine. That's OK. There are appearance settings you can play around with, but regardless our terminal programs do the same thing.

You should hear your computer say "bananas".

Your mouse does not work in the Terminal or in the Window's PowerShell program. To navigate, you'll need to use the left and right arrow keys. If you want to delete something, move the cursor in front of the character and press the delete key.

: The dominant Shell-CLI environment for Windows 10 users is PowerShell. To navigate to PowerShell, search for the "PowerShell" in the Windows Explorer and open it up.

 command that macOS users entered in their Exercise is a shortcut command that comes default with macOS. You will be making a shortcut command also called "say." To do this, copy-paste the following command into your PowerShell.

Add-Type -AssemblyName System.Speech
$say = New-Object -TypeName System.Speech.Synthesis.SpeechSynthesizer

:  The code snippet you copy-pasted in the previous step creates a command called 

.  The dollar sign in PowerShell indicates a variable.  Because we are assigning a script to this command, we have to use a dollar sign. 

Now, to use the "\$say" command, enter the following into  your PowerShell:

 Congrats! You just entered your first terminal command - also called a Shell Script. Remember the 

If Shell Script were a car, it would be the 

. It is the quintessential Hollywood car, everyone knows what it is, but only the well trained can drive it. It is a rear-wheel drive trying to kill-you-sports-car. Once mastered, it can go around a race track faster than most, but it's intimidating and requires years of practice.

Before we start typing in Shell commands, let's take a closer look at what is happening behind the scenes.

To understand the terminal, you first need to know what a Shell is.

A Shell is an interface that gives you access to your computer's Operating System. Think of it as a 

 that wraps around your Operating System's kernel. Hence the name 

 - a shell/protective barrier - around the brain/core of your computer.

An example of a CLI is the Bash Shell or PowerShell that comes default with macOS and Windows OS, respectively.

Here's a screenshot of the macOS Terminal.  Notice the "bash-3.2$"?  That's the Terminal saying, "Hey, I'm interfacing with the Bash Shell."

In the previous Exercise, though you were interfacing with a program called "Terminal," you were interacting with your Bash Shell.

PowerShell is a complete environment, acting as both the Shell and the terminal application.  Compare this to macOS, which has both the default Shell called Bash, as well as the Terminal application (with a capital "T") that allows the user to interact with Bash.

We'll explore CLIs in much greater detail, but first, let's look more closely at GUIs.

Though you may not know it, you're very familiar with GUI's. These are programs designed to make it easy for the everyday computer user to 

 things with their computer. They use graphics, icons, and menus to  make navigation and executing commands easy.

An example of a popular GUI is the Finder program (the equivalent program in Windows is "Finder Explorer").

GUIs evolved to make it easier for computer users to do things and navigate around the computer. GUIs are on smartphones, smartwatches, anything computer-based you'll find GUIs.

Here is an example of a GUI on the iPhones iOS. The GUI provides the icons, and menus you use to navigate or 

Here's one more example of a GUI on a smartwatch that starts your Tesla - wouldn't that be nice!

Before GUIs, computer users only had a keyboard and computer screen as tools. To do anything on the computer the user had to type out commands via a CLI. This process is not intuitive for today's average computer user. As a reaction, GUIs were built. GUIs - for the majority of computer users - make navigation and actions easier to figure out.

In the following Exercise, we are going to spend time with the Finder program, doing simple, everyday navigation.

: This process will be the same for Windows users. Your GUI will just look a little different. Instead of using the Finder program, you'll be using your 

 Open the Finder program on your mac (cmd + spacebar, type "Finder")

 Once open, navigate to your Downloads folder.

---
code: https://gitlab.com/fullstackio/books/newline-course-apps/angel-garbarino-how-to-become-a-web-developer/-/tree/main/code/6-terminal?ref_type=heads
---

# Chapter 6: Terminal

The terminal is a program that you use to type in commands. It is a text input/output environment.  Not knowing how to use a terminal as a Web Developer would be like a writer not knowing how to use a computer; sure they could use a typewriter or good-old pen and paper, but how effective would they be?

In this chapter, we'll cover what a terminal is, introduce you to some of the more common and useful commands, and hopefully give you a sense of the efficiencies the terminal makes available. This chapter is a required read before going into the Git chapter.

## Opening the terminal

The default terminal is usually white, but you've probably seen black terminals in movies. Featuring a geeky hoodied-hacker doing something like "running an algorithm" or "extinguishing the override" or some other nerd'ish lingo nonsense. Take for example, the terminal making an appearance in these well-known movies:

From left to right, these images are from _Girl With The Dragon Tattoo_, _The Fifth Estate_, _Snowden_, and _The Matrix_.

![](https://d2uusema5elisf.cloudfront.net/books/web-developers-field-guide/images/6-Terminal/terminals-hollywood.png)

Let's start things off by opening your terminal; every major computer comes packaged with a terminal program.

W> Because macOS and Windows OS users have different default terminal programs, the commands differ slightly. I will start each Exercise with macOS instructions, followed by instructions for Windows OS users (specifically Windows 10 users).

#### Exercise 1 of 9: Opening the terminal

I>When talking about the actual Terminal program that comes packaged with macOS I'll capitalize the "T," otherwise terminal with a lowercase "t" will refer to any terminal program that interfaces with your Shell - more on that shortly.

**1.** **macOS users**: There are several ways to open the Terminal on a Mac. I will use Spotlight. To use Spotlight, press cmd + spacebar. Then type in "terminal." You should see the terminal app come up. Click on it.

![](https://d2uusema5elisf.cloudfront.net/books/web-developers-field-guide/images/6-terminal/terminal-spotlight.png)

W> There is a good chance that your terminal looks slightly different than mine. That's OK. There are appearance settings you can play around with, but regardless our terminal programs do the same thing.

**2.** **macOS users**: Once open, type the command `say bananas`.

![](https://d2uusema5elisf.cloudfront.net/books/web-developers-field-guide/images/6-terminal/command-say-bananas.png)

You should hear your computer say "bananas".

I>Your mouse does not work in the Terminal or in the Window's PowerShell program. To navigate, you'll need to use the left and right arrow keys. If you want to delete something, move the cursor in front of the character and press the delete key.

**1.** **Windows OS users**: The dominant Shell-CLI environment for Windows 10 users is PowerShell[^powershell]. To navigate to PowerShell, search for the "PowerShell" in the Windows Explorer and open it up.

The `say` command that macOS users entered in their Exercise is a shortcut command that comes default with macOS. You will be making a shortcut command also called "say." To do this, copy-paste the following command into your PowerShell.

```powerShell
Add-Type -AssemblyName System.Speech
$say = New-Object -TypeName System.Speech.Synthesis.SpeechSynthesizer
```

**2.** **Windows OS users**:  The code snippet you copy-pasted in the previous step creates a command called `$say`.  The dollar sign in PowerShell indicates a variable.  Because we are assigning a script to this command, we have to use a dollar sign. 

Now, to use the "\\$say" command, enter the following into  your PowerShell:

```powerShell
$say.Speak("bananas")
```

You should hear your computer say "bananas".

**macOS and Windows OS users**

**3.** Congrats! You just entered your first terminal command - also called a Shell Script. Remember the [Shell Scripting Language](https://d2uusema5elisf.cloudfront.net/books/web-developers-field-guide/#shell-scripting) from the Programming Languages chapter?

A> If Shell Script were a car, it would be the **Corvette**. It is the quintessential Hollywood car, everyone knows what it is, but only the well trained can drive it. It is a rear-wheel drive trying to kill-you-sports-car. Once mastered, it can go around a race track faster than most, but it's intimidating and requires years of practice.
A>
A>{width=50%}
A>![](https://d2uusema5elisf.cloudfront.net/books/web-developers-field-guide/images/5-Programming-Languages/corvette.png)

Before we start typing in Shell commands, let's take a closer look at what is happening behind the scenes.

\##What is Shell?

To understand the terminal, you first need to know what a Shell is.

A Shell is an interface that gives you access to your computer's Operating System. Think of it as a [wrapper](https://en.wikipedia.org/wiki/Shell_(computing)) that wraps around your Operating System's kernel. Hence the name _Shell_ - a shell/protective barrier - around the brain/core of your computer.

![](https://d2uusema5elisf.cloudfront.net/books/web-developers-field-guide/images/6-terminal/pistachio.png)

Shells come in two forms:

1.  **Command Line Interface**: CLI for short, pronounced C. L. I.
2.  **General User Interface**: GUI for short, pronounced "gooey."

![](https://d2uusema5elisf.cloudfront.net/books/web-developers-field-guide/images/6-terminal/cli-gui-shells.png)

### CLI

An example of a CLI is the Bash Shell or PowerShell that comes default with macOS and Windows OS, respectively.

Here's a screenshot of the macOS Terminal.  Notice the "bash-3.2$"?  That's the Terminal saying, "Hey, I'm interfacing with the Bash Shell."

![](https://d2uusema5elisf.cloudfront.net/books/web-developers-field-guide/images/6-terminal/cli.png)

I>#### macOS Users
I>
I>In the previous Exercise, though you were interfacing with a program called "Terminal," you were interacting with your Bash Shell.

I>#### Windows Users
I>
I>PowerShell is a complete environment, acting as both the Shell and the terminal application.  Compare this to macOS, which has both the default Shell called Bash, as well as the Terminal application (with a capital "T") that allows the user to interact with Bash.

We'll explore CLIs in much greater detail, but first, let's look more closely at GUIs.

### GUI

Though you may not know it, you're very familiar with GUI's. These are programs designed to make it easy for the everyday computer user to _do_ things with their computer. They use graphics, icons, and menus to  make navigation and executing commands easy.

An example of a popular GUI is the Finder program (the equivalent program in Windows is "Finder Explorer").

![](https://d2uusema5elisf.cloudfront.net/books/web-developers-field-guide/images/6-terminal/finder-example.png)

GUIs evolved to make it easier for computer users to do things and navigate around the computer. GUIs are on smartphones, smartwatches, anything computer-based you'll find GUIs.

Here is an example of a GUI on the iPhones iOS. The GUI provides the icons, and menus you use to navigate or _do_ things on your iPhone.

![](https://d2uusema5elisf.cloudfront.net/books/web-developers-field-guide/images/6-terminal/gui-ios.png)

Here's one more example of a GUI on a smartwatch that starts your Tesla - wouldn't that be nice!

![](https://d2uusema5elisf.cloudfront.net/books/web-developers-field-guide/images/6-terminal/gui-tesla.png)

Before GUIs, computer users only had a keyboard and computer screen as tools. To do anything on the computer the user had to type out commands via a CLI. This process is not intuitive for today's average computer user. As a reaction, GUIs were built. GUIs - for the majority of computer users - make navigation and actions easier to figure out.

In the following Exercise, we are going to spend time with the Finder program, doing simple, everyday navigation.

#### Exercise 2 of 9: Playing with a GUI

I>**Windows users**: This process will be the same for Windows users. Your GUI will just look a little different. Instead of using the Finder program, you'll be using your [Windows Explorer](https://support.microsoft.com/en-us/help/4026617/windows-10-windows-explorer-has-a-new-name) program.

**1.** Open the Finder program on your mac (cmd + spacebar, type "Finder")

![](https://d2uusema5elisf.cloudfront.net/books/web-developers-field-guide/images/6-terminal/finder.png)

**2.** Once open, navigate to your Downloads folder.

![](https://d2uusema5elisf.cloudfront.net/books/web-developers-field-guide/images/6-terminal/downloads.png)