If you’re serious about becoming a web developer, you will have to learn how to use the command line at some point. You might be a front-end developer that hasn’t had to use it before, but when you start getting into more complex development like working with React or SASS, you’re going to be using it.
I put together this guide for front-end developers (and anyone else, really) that don’t have much experience using the command line. The goal of this guide is to teach you the easy commands that you will use about 90% of the time.
After learning these, it’s easy to go look up other commands you may seldomly use.
So let’s get started.
Opening the command line on Mac
On Mac, the program that you use is called Terminal. You can find this by pressing command+space and typing in terminal.
When you open Terminal, you will see something similar to the below image. Of course, some of the information will be different depending on your machine, your username, etc…
Working in Terminal is pretty much the same as working within a folder (directory). That is, when you are using the terminal you are always in some folder.
Viewing the current directory in the terminal
Terminal shows us where we are in the file system. On a Mac, the ~ indicates being in the home directory of a user.
However, we can view the full path of our location by typing pwd (short for “print working directory”) and hitting return. Anytime you enter a command, you’ll need to press return.
Viewing folder contents in the terminal
Remember when I said when working with the Terminal we’re always working inside a folder or directory? Well, let’s take a look at the contents of the directory we are in. Type ls (for list) and hit return and view the contents.
In this folder, all we see are other folders. If there were files in this folder, we would see their extensions after their file name.
Creating a folder using Terminal
Now that we can view folders, let’s try making our own. In order to make a folder in Terminal, type mkdir (for make directory) followed by the name of the folder. An example would look like mkdir myNewFolder .
It might look like nothing happened after hitting return, but something actually did happen! If you type ls you’ll be able to see your shiny new folder.
Moving around in Terminal
We made a folder, but how do we get into it? That’s easy! All you need to do is type cd followed by the folder name. Type cd myNewFolder .
Hit return and you’ll find yourself in the folder you just created. If you want to go up in the file system, you’ll simply type cd .. .
Clearing the command line in Terminal
Your Terminal window might be getting cluttered right about now. In order to clear everything off the screen, type clear.
Creating files using Terminal
We have a folder, but there aren’t any files in it. To make files using Terminal, type touch followed by the name of the file you want to create. Make sure to also include the extension of the file.
Since you’re probably a front-end developer, you’ll need to create an HTML file. Do that by typing touch index.html.
The touch command can also take multiple arguments. If we also wanted to add a Javascript file and CSS file, we’d do so by typing touch script.js styles.css .
.
If we type ls, we can see all three of our files.
Copying files using Terminal
Maybe started working on a project, but it’s becoming much bigger than we initially thought it would become. We are now working with multiple Javascript files and want to put them all into a folder called scripts.
Let’s first create that folder using mkdir scripts.
In order to copy a file into another folder, we need to use the cp (copy) command followed by the file name and target directory. In order to move our script.js file into the folder called scripts, we would enter cp scripts.js scripts .
Deleting files using Terminal
We now have two copies of the script.js file, but we only want one. In order to delete a file, we use the rm (remove) command followed by the name of the file we want to delete. Here we would type rm script.js .
When you delete a file using the rm command, YOU CAN NOT GET THE FILE BACK. Use with caution.
Moving Files using Terminal
Perhaps our project is becoming large and we are using multiple stylesheets. We also want to move all of our stylesheets into one folder called stylesheets. Create a new folder using mkdir stylesheets .
This time, instead of copying a file and then deleting it, we can instead just move the file. In order to move a file using Terminal, use the mv (move) command with the name of the file and the target directory. In this case, we will type mv styles.css stylesheets .
Using autocomplete with Terminal
Here’s a quick tip: when typing the name of a folder or file in Terminal, you can hit tab, and Terminal will try and fill in the rest of the file or folder name for you.
Opening a folder in Terminal
We’re still in our mynewFolder folder. We can open it up in the file browser by using the open command. To open up the current folder, we type open . .
Deleting folders using Terminal
We’re almost done with this tutorial, and we don’t want this folder anymore. Let’s go to the folder’s parent by typing cd .. .
Once we are in the parent folder, we can use the rm command with the flag -r (for recursive) to remove the folder and all the files in it.
This can be an extremely dangerous command if you are working with important files. Use the rm command with much caution
Wrap up
I hope this guide made the command line, a little less scary to you. Now you should be able to learn new commands and comfortable use them as you need them. That said, in my experience, these commands make up about 90% of what you’ll be typing into the command line.
If you liked this tutorial and would like to see more please like and share this post. Follow me on Twitter, Dev.io, or Medium, or connect with me on LinkedIn.
Need a front-end developer that knows HTML, CSS, Javascript, and React? Feel free to shoot me a message on any of the above platforms and let’s see how we can work together.
As always, questions and comments are welcome below.
Leave a Reply