Important Note: I’m working on a Mac, so this will all be Mac-specific.
The command line is fastest way to get around your computer and the secret portal to tools that will level-up your web-design coding skills: git, sass, grunt, yeoman, jekyll, just to name a few. I’m no Unix-expert but the terminal is now the first thing I open when my computer opens because once you’ve learned the commands you need you’ll get around so much faster when coding. Trust me.
Hit CMD+Space and type Terminal. Let’s get started:
When you open your terminal, you see a few things: the name of your computer, the folder you’re in, and possibly the date. You always start out in the Home directory, which is equivalent to the "home" directory in Finder.
To see the contents of a directory, type ls -l.
I have a ton of stuff in mine, and you probably do too. Often times there are a lot of hidden files and folders in this directory, which you can see in the terminal (but cannot in Finder).
You can make folders (directories) and files from the terminal pretty easily. Let’s make one now called code.
mkdir code
This is just a short way of saying ’make directory’. If you do another ls -l, you’ll see that we now have a directory called code.
To change folders, you type cd - short for change directories. Let’s move into the code directory:
cd code
The terminal is intelligent. If you type \`cd c\` and then hit TAB, it will move you into the directory that starts with c or give you a few options for you to pick from. When I open my terminal, I always type cd code + TAB +
Now that we’re in code let’s make a file. Let's set up some files for a web project:
touch index.html
This will make a new, empty file called index.html. Nice! Let's make folders and such like we just learned:
mkdir css
mkdir js
touch page.html
touch post.html
You can see all of these things with the ls -l command from before.
Awesome, but having all of our files in our code folder isn't very helpful. They need a project folder. Let's put them in a folder called blog:
mkdir blog && mv * blog
There were three things in that line of code you haven't seen before, so let’s break it down:
mkdir blog: this you’ve done before. We’re making a directory called blog.
&&: this is command-line-speak for ’and’. So, ’do this and then do this’.
mv: this is short for move. Move the files.
*: this is a selector that means ’everything’. We could have moved every item one-by-one, but that would have been annoying.
blog: this is the target directory where we're moving everything, i.e. the folder we just made.
Now, when you do ls -l you should just see one folder.
Let's change into the blog directory:
cd blog
We just learned the mv command. You can use the mv command to rename files too. Let’s do it now:
mv page.html about.html
If you do another ls -l, you’ll see we now have an about.html file instead of page.html.
We’ve decided that we don't want about.html at all. Let’s delete it. However, before we do, we should probably really analyze whether or not we want to: deleting something from the command line is like sending it to the Trash Can and emptying it in one fell swoop.
rm about.html
rm is short fo
cd ..
rm -rf blog/
.. is how you go up one directory. The -rf is necessary for doing anything to a folder (copying, deleting, moving) from the command line. If you’re familiar with programming basics, it means that we’re doing the action recursively.
Now that we’re in code, let’s make a new directory called webapp. We’re going to copy to our Desktop next:
mkdir webapp
You can get to the Desktop (and anywhere else) from the code directory like this:
cd ~/Desktop
Remember our home directory from the very beginning? You can access that directory from any folder anywhere by cd ~.
cp -rf /code/webapp /Desktop/webapp
cp stands for copy. Since we're copying a folder, we need to put the -rf.
That's it for Intro to the Command Line. None of it is particularly complicated, it's just a matter of learning the commands and using them regularly. Learning the command line for me was how I started learning sass, git, grunt, and lots of other tools that took my web design to the next level.
Joni Trythall did a write-up on this too that I like and is worth looking over if you high-level reasoning for why the command line's great.
If you've been working with the command line and are annoying that you can click and type, there are commands for that! I have these bash stickers that are pretty rad.