• 4 hours
  • Easy

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 4/19/22

Create your first directory

It's now time to create a folder within your system.

Yes, you could just do this via Finder or whatever tool you use to browse and create files now. However, there are advantages to doing this via the terminal, especially

if you want to get more into programming!

How does one go about creating a folder in Terminal? Time for a new command!

mkdir

Use the command  mkdir  to create a directory.  mkdir  is short for "make directory." Specify the name of the directory (folder) you want to create just after it. If I wanted to create a folder called  new-folder , I would run:

mkdir new-folder

Let's look at concrete examples.

Creating folders

Non-code example

Scenario: You're at university, and you've just started your second semester. On your computer, you have a complete folder called "First semester" that holds all your first semester coursework. You need to create the same folder for your second semester coursework.

The first semester folder that you'll use as inspiration is organized like this:

First semester folder structure
First semester folder structure

You'll create this same equivalent for second semester coursework...using Terminal, of course. 👍

Why is this important? Once you get into any kind of programming (design, front-end, back-end, and more), you'll almost always create folders and files for your code via the command line. You'll have a huge advantage as a beginner if you're comfortable with this.

From your command line, make sure you are in a place in your system that you can remember. The "Desktop" or "Documents" folder could be a good place to be.

You can run the following commands, hitting the Enterkey after each.

Print the working directory (see where you are):

pwd

List the contents of your current directory:

ls

Change directories into the Desktop directory (if you don't have a Desktop folder, it's fine. Substitute another folder name from the list outputted by the   ls  command).

cd Desktop

Make a directory (folder) called School:

mkdir School

Change directories into the School directory:

cd School

Your Terminal window will look like this:

Make a
Make a "School" directory (mkdir School) and move into it (cd School)

Folder names with multiple words

In our example, the folder should be called "Second semester." We've just created a folder called "School" in order to stay organized. In theory, I'd run mkdir Second semester to create a folder inside called "Second semester," right?

Nope! 😖  You need to make special considerations for folder names that contain spaces.

Notice that, by running  mkdir  Second semester  , two folders (1. "Second," 2. "Semester") are created instead of one: 

mkdir mistakes: two folders instead of one
mkdir mistakes: two folders instead of one

By running mkdir Second semester, I've accidentally created 2 files: one called "Second" and one called "semester." This is because my computer interprets the space between the two words as a delineation between two folders names, not just a space in the middle of one name.

Clearly, we need a different way to indicate "Second semester" is all one file name; not two separate ones.

Multi-word folder solutions

To create or reference a folder with multiple words in it, you have three options:

  • use quotation marks, i.e.,  mkdir "Second semester"

    • This says the folder name should include all characters inside the quotation marks.

  • escape the special character (the character you're computer is interpreting in a special way) using a backslash, i.e, mkdir Second\ semester

    • This says that the special meaning of the space between "Second" and "semester" should be ignored. We want a space to just be a literal space, not for Terminal to interpret it as a way to separate multiple folder names. 

    • In programming, you'll often use backslashes to escape special characters!

  • use hyphens instead of spaces to create a different folder name entirely (i.e.,  mkdir Second-semester  )

You can use quotation marks: 👍

Multiword folder name with quotation marks
Multiword folder name with quotation marks

Or escape (meaning ignore the special meaning of) the space by prefacing it with a backslash, a confusing but common programming habit:

Multiword folder name with an escaped character (via a backslash)
Multiword folder name with an escaped character (via a backslash)

Whether you use quotation marks or a backslash in order to create folders with multiple words, you'll be all set.

Now it's your turn! Create folders for the school subjects listed above: 

  • Art history

  • Biology

  • Chemistry

  • Math

  • Theater

Code example

Creating folders is exactly the same process whether or not there will be code inside of them. A folder is just a folder! However, when you're a programmer, it's important to  keep your code structured and organized.

Maybe you don't have any experience yet with HTML or CSS, the languages you'll use to set up the content and appearance of web pages. That's totally fine. I just want to show you the classic structure of these kinds of projects so you can see that folder creation via Terminal isn't just useful for school purposes: it's also the kind of thing programmers do every day.

Many programmers use a very classic folder and file structure when building basic webpages. They'll put the code in one folder named for the project with several subfolders inside in order to organize their code well.

These subfolders could include an  img  subfolder for holding images that will appear on the website or a  css  folder to hold all the CSS, i.e., style rules for the project (which color the text should be, how big the headers will be, etc).

Below is a screenshot from the project's documentation. The dot at the top left of the image represents the overall project folder. Inside, you can see there are indeed  css  and  img  folders, as well as a file called  index.html  which we'll create in the next chapter.

HTML5 boilerplate complete structure (find the css and img folders!)
HTML5 boilerplate complete structure (find the css and img folders!)

This is the ultimate folder structure we want, visualized in Finder:

A code folder like many real developers would create
A code folder like many real developers would create

The required commands to run as a series are as follows (from within your Desktop folder or wherever you're choosing to create your examples):

mkdir code-project
cd code-project
mkdir css
mkdir img

Here's what this looks like in Terminal:

Folder structure for a code project
Sample folder structure for a code project

Once you have your desired folder organization set up, we can move onto another task in the next chapter: creating files in these folders. We'll stick with the same examples: one non-code-related, one code-related!

Example of certificate of achievement
Example of certificate of achievement