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

But First…

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:

 cd foo 

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:

 cd foo/sub-folder 

To head back to the previous directory or go one level up of the current directory, type:

 cd .. 

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.

 mkdir foo 

We can also create multiple folders at once. This example below will create three directories named foo, hello, and world all together at once.

 mkdir foo hello world 

The mkdir command is compatible both in Terminal and Command Prompt.

3. Creating New File

Use thetouch command to create an empty file. For example:

 touch filename.html 

You can specify more filenames, as follows, to create multiple files at once.

 touch file.html style.css 

4. Moving Files

Use the 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 index.html into about.html.

 mv index.html about.html 

5. Copying Files

Type 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 about.html.

 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 ll.

The 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

The open command will open files of folders in the default app. This command below will open the folder Desktop in Finder.

 open ~/Desktop 

The following command will open a .txt folder in TextEdit, which is the default app in OS X to edit plain text file.

 open readme.txt 

Windows users should use edit. Given the same example, you can run:

 edit readme.txt 

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 style.css.

 subl style.css 

Including the --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 subl --help.

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.