When learning web development, you will likely come across someone who insists on using the terminal. Equally, using the terminal isn’t something you’ve necessarily encountered the need to do yourself.
Many web development-related tasks like installing code packages or uploading code to GitHub can be accomplished using graphical tools like Visual Studio Code nowadays. As a newer web developer, is it worth learning the terminal?
The answer is Yes!
Although the terminal can be daunting at first, I would argue it’s one of the best tools to increase your productivity (and look kind of stylish in the process.)
In this ✨ ultimate ✨ guide, you’ll learn enough about the terminal to be dangerous.
... That is, if by "dangerous", you mean the ability to run basic commands and work with files 😄.
Since I am convinced you’ll be spending more time in the terminal after this tutorial, I’ll also show you how to take the plain-looking terminal that comes with your Mac and turn it into something that looks like the screenshot below:
Why do I need the terminal?
Learning the terminal will enable you to complete tasks you already do (like navigate files and folders) more quickly as well as unlock new capabilities that make you more productive:
- Use npm to install and manage packages
- Use npm to configure and run scripts such as webpack
- Use npx to download and configure templates such as create-react-app
- Unlock advanced Git commands not available with GitHub Desktop
- Host websites on your local machine using ngrok
- Run deployment scripts
- Use ssh to securely connect to servers where your websites are hosted
- Use tools like Docker
- Combine several terminal commands into
.shscripts that increase your productivity
- Gain greater control of your Mac in general
Since macOS has a built-in Terminal app, you won't have to reach far for a command prompt:
However, replacing the macOS Terminal with something more powerful from the beginning is a good idea.
Let's explore your options.
Choosing and installing a Terminal app
In 2022, there are many terminal apps to choose from, each with their own approach.
5 trendy terminals
In time I encourage you to explore these options and see what appeals to you. For this tutorial, however, we will use iTerm.
Exercise: Install the latest version of iTerm from here.
ℹ️ Built-in terminal vs. iTerm?
iTerm is more customizable and has handy features like split panes.
The frontend developer's guide to the terminal
Now you've installed iTerm let's learn some basic commands.
What is a command?
Inside the terminal, you command your computer to do stuff using text.
This isn't a new idea, as you've surely commanded your computer to do stuff using a button before (delete a file, shut down, etc.!)
The terminal might look a bit complex and confusing at first but rest assured, the ability to copy and paste commands from a website, combined with the power and flexibility the command line offers, makes the terminal well worth learning.
Running your first commands
Let's start with the basics and open iTerm from your Dock (if it's there) or by pressing ⌘+Space and typing "iTerm":
From here, we can command the computer to do stuff!
Exercise: Command your computer to tell you today's date by writing the
date command and pressing Enter ⏎:
Here are some other commands you can try. Don't worry. There's no chance of them breaking anything:
uptimetells you how long your Mac has been powered on
say hellomakes your Mac say "hello" in a computerized voice (make sure your volume is on 🔊)
open http://scrimba.comopens any website you specify in your default browser
topshows you a list of running programs (even hidden ones) similar to the Activity Monitor app
expr 100 + 100does quick maths
clearclears the terminal so it's nice and fresh again (you can also press Control+L)
Brilliant, isn't it?
In the next section, let's look at navigating and working with files using the terminal.
Working with files and folders
As a reminder, your Mac organizes files through directories (folders).
A directory is a special type of file that can contain other files and directories within it. Directories are used to organize files to make them easier to find.
This isn't a new idea. You experience it every day in Finder:
In Finder, you can only view one directory at a time which, in nerd-speak, is known as your working directory.
Exercise: To see your working directory in the Terminal, run
pwd (print working directory):
ℹ️ What does PWD mean?
PWD stands for Print Working Directory. In terminal-speak, printing to the terminal means displaying something in the Terminal.
Although terminal commands oftentimes sound perplexing they're sometimes acronyms or abbreviations, which makes them easy to remember and recall.
Next, try running
ls to view (list) all the directories inside the current working directory:
Don't worry if your output looks completely different. We're on different computers, after all!
In Finder, you use your mouse to get around.
In the terminal, you use the
cd command (change directory) to go forwards and
cd .. to go backward.
Exercise: Try navigating forwards into your Desktop by running
cd forwards into the Desktop.
You can tell double-check it worked by running
pwd or peeking at the prompt as illustrated in this screenshot:
Now you're in the Desktop directory, here are some fun file-related things you can try:
touch avengers.txtto create a new empty file called avengers.txt
lsto list all the files in the current directory (double-check avengers.txt is there)
open avengers.txtto open any file in the default app (TextEdit by default!)
cat avengers.txtto print the contents of avengers.txt to the terminal (if you see nothing, it's because the file is empty)
mkdir superherosto make a directory called superheros
mv avengers.txt superherosto move avengers.txt into the newly-created superheros directory
ℹ️ Check your work in Finder
Any change you make to a file or folder in the terminal will be reflected in Finder (and vice versa) because they are both interfaces to the same place: Your solid-state drive
Finder is a graphical interface, whereas the terminal is a text-based interface.
Should you wish to delete the superheros directory and its contents, we call that removing the directory in Terminal-speak.
To remove the superheros directory and its contents, run
rm (remove) with the
-rf flag like so:
rm -rf superheros.
Flag is terminal-speak for option and you set them with a
- (for example,
-rf) but that's outside the scope of this introduction.
Congratulations 🎉! You now know enough to be "dangerous."
Beautify your terminal with a color scheme
Now you have some experience with the terminal, I expect you'll be spending more time there, navigating files and hopefully learning about some of the command-based tools outlined in the introduction, like npm and npx! You may as well make the terminal look aesthetic.
The nice thing about iTerm compared to the built-in Terminal app is that you can easily download color scheme files called
.itermcolors files and load them with a few clicks.
A lot of these themes even come with light and dark variants.
With some careful configuration (not shown in this guide), you can even make iTerm change the theme depending on the time of day!
4 trendy iTerm themes
For this tutorial, we will use my favorite, dogrun.
dogrun.itermcolors from the dogrun GitHub repository to your Downloads directory using the following command:
curl https://raw.githubusercontent.com/wadackel/vim-dogrun/main/term/dogrun.itermcolors > ~/Downloads/
Curl stands for Client URL. It is one of the essential commands to work with URLs
Next, open iTerm and press ⌘+, to show the Preferences window:
Click Profiles, then navigate to the Colors tab, as shown:
See the Color Presets... dropdown in the bottom right-hand corner?
Choose Import… and open
dogrun.itermcolors from your
The color scheme should update immediately (no need to press a save button.)
Installing a custom code font
Did you know? There are many fonts dedicated to programming, known as monospace fonts!
They improve the legibility of code and make efficient use of the screen space so you can see more code at once.
4 fonts for better coding
JetBrains Mono is great because it looks nice and even includes special characters known as ligatures, so we'll go with that.
Exercise: Download JetBrains Mono from the JetBrains website here.
Next, press ⌘+Space. Search and open Font Book.
Inside Font Book, click the + and import JetBrains Mono from your Downloads folder (or wherever you downloaded it.)
It worked if you see JetBrains Mono inside Font Book, like in the screenshot above!
Installing fonts on macOS is really that straightforward! You can even delete the original file, as Font Book will essentially make a copy.
JetBrains Mono will now be available in any program, be that Microsoft Word, Visual Studio Code, or - you guessed it - iTerm!
You just need to tell the program to use the JetBrains Mono font.
To tell iTerm to use the JetBrains mono font, refer to the previous instructions and navigate to the Text tab. Choose JetBrains Mono from the dropdown.
Voila! The font should update immediately.
Configuring the command prompt
Next up, let's look at how to configure the colors and information displayed in the prompt:
It would be natural to assume you can tweak the prompt in the iTerm preferences window but that would be too easy 😄!
The terminal window is just a window into the prompt. The prompt is a separate program and must be configured separately.
Yes, you read that right!
The terminal window app (iTerm) and the command prompt (technically called a shell) are separate programs.
On modern versions of macOS, the default command prompt (shell) is zsh and is configured with a text-based configuration dot file called .zshrc.
ℹ️ What is a dot file?
A dot file is a text-based options file whose name starts with a . like .zsshrc.
On macOS, files that begin with a . are hidden in Finder and the
lscommand by default.
To see hidden files run
ls -a(`-a` for all)
Create a .zshrc file on Mac
You may or may not already have a .zshrc dot file on your computer.
Exercise: Start from scratch and create a new .zshrc file with the following commands:
cd ~ rm .zshrc touch .zshrc
Let's breakdown the above 3 commands,
cd ~takes you to your home directory (in my case
~or tilde symbol represents the path to your home directory for convenience.
rm .zshrcdeletes the .zshrc file if you have one; If not, you will get a harmless error you can safely ignore: "rm .zshrc: No such file or directory"
touch .zshrccreates a new empty file called .zshrc.
It would be more intuitive for every new Terminal user if
createbecause that's essentially what it does.
If a file with the name you specify exists,
touchupdates the last modified time of that file to the current time. In a sense, you "touched" the file.
If the file does not exist,
touchcreates a new empty file with the name you provide.
Installing a shell theme
Through careful configuration, you could make your shell theme from scratch, but I wouldn't recommend it.
Instead, let's rely on a beautiful and open-source shell theme called Pure:
Shell themes like Pure are expressed in a script file, so what you're essentially downloading is a script your shell will run every time it opens.
Exercise: Download pure and the script files somewhere on your computer.
Yes, you could do this with your mouse and a graphical interface, but you're a terminal padawan now 🌌🔫!
This is a great chance to try
git and clone (download) Pure with a command:
mkdir ~/.zsh/pure git clone https://github.com/sindresorhus/pure.git "$HOME/.zsh/pure"
Let's breakdown the above 2 commands,
mkdir ~/.zsh/purecreates a new directory called pure. This is where you will download the theme into when you run the next command
git clone https://github.com/sindresorhus/pure.git "$HOME/.zsh/pure"downloads Pure from GitHub. Here we tell
gitwhere to download from ("https://github.com/sindresorhus/pure.git") and where to put the downloaded files ("$HOME/.zsh/pure")
Git comes pre-installed on macOS and offers a way to interact with GitHub repositories, such as cloning (downloading) them.
Next, open .zshrc by running
open ~/.zshrc and add the following lines to the top:
fpath+=($HOME/.zsh/pure) autoload -U promptinit; promptinit prompt pure
Completely close and restart iTerm. Your terminal will now look like this 🎉:
Things took shape quickly, huh?
Should you ever change something in .zshrc but nothing happens, there's a good chance your terminal didn't restart properly.
Double-check that there isn't another terminal window open.
Alternatively, you can run the
source ~/.zshrccommand. This will apply your newest settings without the need to restart the terminal in 90% of cases.
What is the difference between a terminal and a command prompt?
You might wonder about the difference between the terminal (iTerm) and the command prompt (zsh).
In a nutshell, the terminal is a window that runs a command prompt.
iTerm and zsh are completely independent of one another, yet the line between them is fine.
It's essential to understand a command prompt is a text-based program. You input text (commands), and the command prompt outputs text. It's up to the terminal window how this text is rendered. That is why you set the font and color theme in iTerm, not zsh.
iTerm is running zsh by default but you could technically run another command prompt like bash instead.
Looking at it from the other side, the command prompt zsh can be run from any terminal window, not just iTerm.
A brilliant example is opening Code's built-in terminal window (⌘+`).
Even though the font and colors will be different, you should recognize your custom prompt from before:
In the upcoming sections, we'll tweak some other .zshrc settings. They will apply anywhere zsh is run, whether that be iTerm, VS Code's terminal window, or another terminal window app entirely.
Set some seriously sensible ZSH defaults
The more time you find yourself working in the terminal and looking up terminal commands, the more likely you are to come across interesting talks and tutorials about all the powerful and convenient options available.
In this post, let's look at a couple of popular and seriously sensible options that may as well be the default. They'll help you be more productive. Plus, you'll learn more about the .zshrc file in the process.
Until now, if you want to change directory, you type
cd followed by the path. For example:
Changing the directory is something you do so commonly in the terminal that it's worth saving a few keystrokes by enabling the
AUTO_CD option enabled, you can type the path without
cd For example:
To turn on
AUTO_CD, first open your .zshrc file using
At the very top, add the following line:
Restart iTerm2 completely as you did before.
When iTerm2 reloads, it will reload the command prompt, and your new option will take effect.
Create a handy alias
Depending on what you're using the terminal for, you'll almost certainly find yourself writing the same commands over and over again. And over and over again.
This isn't good for your productivity. Or your fingers. It would be wise to create a shorter and easier-to-type alias for the commands you write the most.
For example, say you write
ls -al a lot. The
-al flags (options) are handy (they show all files including dots in a vertical list), but they're easy to forget and tiresome to type.
In .zshrc, you could create an alias
l by adding the following line to the top of .zshrc:
alias l = 'ls -al' # lists files with -al flag
Completely restart iTerm2.
Now, instead of typing
ls -al you can type
l to the same effect.
A very common thing for web developers like yourself to do is set up aliases for
git (two of the most commonly-used tools).
Add any (or all) of these to the top of your .zshrc if you use npm or Git:
# Git alias gi="git init" alias gs="git status" alias gd="git diff" alias gdh="git diff HEAD" alias gc="git clone $1 $2" alias gcm="git commit -m "$1"" alias gaa="git add -A ." alias gpo="git push origin $1" alias gl="git log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit" alias glo="git log --oneline" alias grhh="git reset --hard HEAD" alias gcp="git cherry-pick $1" # npm alias ni="npm install"; alias nis="npm i -S " alias nid="npm i -D " alias nig="npm i -g " alias nr="npm run $1"; alias nrs="npm run start"; alias nrb="npm run build"; alias nrt="npm run test"; alias nrc="npm run commit";
Here's one called
myip that connects to a web server to learn and return your public IP address:
alias myip='curl ifconfig.co/'
In this ✨ ultimate ✨ 3000-word guide, you learned how to write your first terminal commands and configure your terminal. Not only in terms of aesthetics but in terms of functionality as well.
You're not quite an expert yet, but you certainly do now know enough to be dangerous, including:
- How to run macOS commands
- How to work with and manipulate files and directories
- Download files with curl
- How to download code from GitHub with git
- Set a custom theme and font
- Configure a custom prompt called Pure
- Change .zshrc settings like AUTO CD
- Define aliases in .zshrc to make you more productive
Now you can continue learning online. In particular, I recommend YouTube. Web developers love to optimize their .zshrc and terminal configurations, then talk about it.