Basic & Essential Command Lines Every Web Designers Should Grasp
You may have come across instructions in web design and development tutorials that tell you to do things like
npm install or
git clone, etc. These are Command Line Interfaces (CLI). We use them to tell the computer to perform specific tasks, usually by typing specific commands from Terminal and Command Prompt.
Terminal and Command Prompt may not be the most convenient tool to use, particular for web designers, which is quite understandable, since web designers may be more familiar with graphical interfaces. Yet, tools like Yeoman, Bower, and Google Web Starter Kit operate through command lines.
If you aren’t a fan of typing commands, this post will start you off with just a few basic command lines to help you familiarize yourself with them.
Recommended Reading: Basic Shell Commands For Bloggers
We need to talk about Terminal and Command Prompt. Both are powerful apps that give you access to the core of the OS you are on. Once you make a change to it, the change is not reversible so whatever you do with these two apps, should be done with caution (and preferably if you know what exactly you are getting yourself into).
The second thing to know is that you won’t be able to use the mouse to move the cursor within Terminal or Command Prompt. This means no searching or highlighting text with the cursor. Everything is done on the keyboard and therefore keyboard shortcuts are your new best friends.
Note that some useful command lines may not be found in Windows. So, for Windows users, I would suggest you to use Cygwin, UnxUtils, or Windows Services for UNIX Version 3.5 which brings some UNIX utilities to Windows. Now, it’s time for you to rub your hands in glee and begin.
1. Change Directory
Often you will have to navigate through directories. Terminal and Command Prompts both use the same
cd command to change your current directory to the destination specified within the command. Say you want to go to a folder named
foo, you type:
You can see below, the current directory is shown before the blinking cursor.
You can navigate directly to the sub-directory of foo, like so:
To head back to the previous directory or go one level up of the current directory, type:
2. Create a New Folder
Another command that you may find in need often is
mkdir. This command creates a new directory with the specified name. The following command, for example, will create a new directory named foo.
We can also create multiple folders at once. This example below will create three directories named
world all together at once.
mkdir foo hello world
mkdir command is compatible both in Terminal and Command Prompt.
3. Creating New File
touch command to create an empty file. For example:
You can specify more filenames, as follows, to create multiple files at once.
touch file.html style.css
4. Moving Files
mv command to move a particular file to a folder. This example below moves the
style.css to a folder named /css.
mv style.css /css
You can also make use of the
mv command to rename files and folders. This example below will rename the
mv index.html about.html
5. Copying Files
cp command or
copy, if you want to copy a file or folder. Below is an example where we copy
index.html and name the new file to
cp index.html about.html
If you are running on Windows, use the
copy command instead.
6. List Directory Content
This is one of the commands that I personally use often, List Directory or known as
ls. With this command, you can list the content of a directory.
Specifying a folder name ahead of the
ls command will list the content of the folder specified, for example:
Furthermore, you can also retrieve the details of the listed content such as the directory date (created), directory permission, and the directory owners. To do so, type
ls -l or simply
ls command, however, will only work in a UNIX shell. You can run
ls command in Ubuntu and OS X, but not in Windows. In Windows, type
dir command instead.
7. Open Files
open command will open files of folders in the default app. This command below will open the folder
Desktop in Finder.
The following command will open a
.txt folder in TextEdit, which is the default app in OS X to edit plain text file.
Windows users should use
edit. Given the same example, you can run:
8. Creating Symbolic Link
Symbolic Link or Symlink works like a shortcut folder, but the system will treat it as if it is an actual folder. My personal favorite of Symlink utilization is to synchronize folders from /Dropbox to my /Sites folder, which is where I put all my web development files.
This is how the command is specified:
ln -s /source /destination
To create a Symlink from your /Dropbox to the /Sites folder, run:
ln -s ~/Dropbox/project ~/Sites/project
Windows users can use the
mklink /d command.
9. Using Nano Editor
You may find that you need to create a new VirtualHost with a new domain name. This is where you will have to edit the
hosts file that records the domain name and the pointed IP address. The quickest way to edit the hosts file is by typing.
sudo nano /etc/hosts
10. Sublime Text CLI
Sublime Text ships with the CLI,
subl, that enables us to operate Sublime Text through Terminal and Command Prompt. With the
subl command you can, for example, open a file. The command, however, will not yet be recognized when you type
subl in the Terminal.
To add Sublime Text CLI, run this command first.
ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" ~/bin/subl
After that, you should have access to the
subl. Running the following command, for example, will open the file
--add with the command will open the file or folder within the currently opened Sublime Text window.
subl --add foo
For other uses, you can type
Recommended Reading: 12 Most-Wanted Sublime Text Tips And Tricks
Once you’ve grasped the command lines including these basic commands, you will find that using command lines is leaner than using GUI counterparts for doing certain tasks. I hope this list can help you get started.
More: Using Command Lines
Here are a few posts that allow you to do things via command lines.