Navigating with your keyboard

Before you can use the tool, you'll need to learn how to drive it

Updated April 02, 2019

There are few things more empowering than the freedom to choose your own path. Conversely, there is nothing more frustrating than being stuck without the ability to move in the direction you desire.

Without the ability to move, it is impossible to conduct business using the Command Line Interface. This segment of the CLI chapter is dedicated to movement and the commands that will enable you to navigate your machine with ease.

Finding your location

When you are getting started with the CLI on your machine, the first thing you'll be overwhelmed by is the fact that you don't have a firm sense of where you are or what you are doing. If you suddenly feel hesitant to type anything into your computer, you're not alone. Most people just getting started worry that they are about to unlock the "Matrix". The best way to make this sensation subside is to successfully locate where you are.

Luckily, the pwd command is perfect for this task.

pwd does nothing more than print your current location in the computer on the screen.

Terminal gif

As you can see in the gif posted above, upon hitting enter the path /Users/c2/np_projects was printed to the screen. This is nothing more than a directory structure that displays how the computer is organized and with a little decoding, it becomes far easier to understand.

If we reverse translate what is being displayed, the path says that we are in a folder called np_projects, which is in a folder called c2, which is in a folder called Users, and that folder is located in the root directory of the machine.

The key to making this all work is the forward slash, /. The slash is indicates a change from one resource (a folder or file) to another.

If this pattern looks familiar, then you've been paying attention to the URLs you are seeing accessing online as this pattern extends to much of the internet.

The file structure of your computer

In the section above, you were able to use pwd to find your current location in the computer.

The pathway that was printed to the screen was actually a series of resources (folders and files) that neatly nest within one another.

For most people, a pathway is far easier to understand when it is displayed using a graphical user interface (GUI).

GUI /Users/c2/np_projects presented using a GUI.

Presented in this form, a parent-child relationship over these resources becomes more apparent.

A parent directory acts as the access point to all the files and folders that are contained within it. The folders and files within are considered children of the parent directory.

Applying this concept to the pathway we've been working with, the Users folder is the parent of both c2 and np_projects. That means that the items within the Users folder are considered the children of that parent directory.

Not immediately apparent here is that the Users folder is actually the child of another element. In the pathway that we have been reviewing, the initial / represents the 'root' directory of the computer. That root directory is the parent directory of all items on the computer.

You'll see the parent/child reference over-and-over again throughout web development it works similarly in all instances.

Looking around the room (directory)

Now that you are able to tell where you are and know how elements next within one another, you need to be able to see if there are any files or folders in the same directory with you.

The ls command, known as list, allows you to print all the items that are currently being housed in the directory that you're in. Anything that would be visible to you if you opened up the directory using the GUI would be printed to the screen here.

List files gif

That is not to say that you are shown everything in a directory simply by entering ls. There are likely a number of files that are not visible to the average user. These 'hidden' files typically perform tasks that most users simply wouldn't need to be aware of, but as your computer skills grow it becomes helpful to know how to see them and access them.

Simply entering the ls -a command will display both the visible and hidden files in your current directory.

List hidden files gif

As you can see in the gif above, there were numerous files hidden away when you used ls. The files listed have a variety of different functions and but there are two that you'll find in every directory regardless of whether it is empty or full of files.

The . and .. notation files are relative pathnames and they are one of the primary ways that you will navigate in and out of the directory structure of your computer. The . notation refers specifically to the directory you are currently in, or the 'working' directory. While the .. notation refers to the parent directory.

If all this seems a bit abstract, it won't once we introduce one final command that you'll likely use everyday.

Changing location

The 'change directory' command, better known as cd, will likely be the first command that you master simply by the number of times you will call upon it when learning how to use the CLI.

As illustrated below, cd allows you to move between the folders and files on your computer without consulting the GUI installed on your machine.

Change directory gif

Let's take a moment to unpack the moves that were illustrated above.

cd .. simply moves the user from their current working directory to the immediate parent directory. In the example, this occurs twice as the user moves from np_project and c2 into the parent directory of each. What should be apparent now is that any folder can be a parent directory provided that it has a folder within it.

cd {location name} allows the user to navigate directly to that folder without migrating through other folders. In some instances, a specific folder is named. In other cases / or ~ is designated because the system recognizes those symbols as the root directory and home directory for the user.

cd - allows the user to move back to the previous directory they were in. Think of this as a back button for the command line.

Bonus: The Compass of history

The command line is riddled with small helpful commands to assist you as you grow. One such command is the history command. This command remembers your last 500 commands and is available to you simply by typing in history. It might not sound immediately useful, but when you forget commands you'll find it becomes extremely helpful.

Section Summary

Topic Recap
pwd Prints pathway to current location on screen.
ls Lists content in current directory.
ls -a Lists visible and hidden content in current directory.
cd Change location from one directory to another.

Exercise

It isn't enough to just know the commands for navigation. To effectively use them, you must practice. For best results, practice the steps listed below at least five times before moving on to the next chapter.

  1. Search for Terminal on your Mac or PowerShell on your Windows machine.
  2. Navigate to the 'root' directory.
  3. Print the content of that directory to the screen.
  4. Navigate to the 'home' directory.
  5. Print the visible and hidden content of that directory to the screen.
  6. Navigate into a folder of your choice from the options presented.
  7. Navigate back without using cd ...
  8. Repeat steps 1-7.

Trouble following along? Feel free to ask for #HALP in the New Pragmatic Slack Community.

New Pragmatic’s Intro to Product Design and UX Design courses are now open for enrollment — but don't wait! Space is limited.

Sign Up Now