The Basic Command Line Every Web Designer Should Know

A few years back, Web Designers would hardly need to access the terminal or command line. Things have changed now. With tools like npm, bower, grunt, gulp and such streamlining the front end workflow, learning how to use the terminal or  command line is becoming more and more vital for Web Designers and front-end developers. In this beginners tutorial, we show you how to perform basic operations using the terminal or command line.

Hello World

Let’s start with something that has stood the test of time in the computer world. Try saying hello world. You can use the echo command. Everything that follows the echo command is echoed back to the standard output device.

echo Hello World

Change Directory

The cd command is used to navigate directories. The cd command is short for change directory. You will often need this command.

cd c:\foo

This command does not treat empty spaces as delimiters. So, you can omit quotes around names when using this command.

cd new folder

To return to the parent folder, i.e. go one level up, you can use the .. variation of cd command.

cd ..

You can go multiple levels up by using the following version of cd command.

cd ../../

Every time you type ../ you go one level up.

Create New Direcotry

To create a new directory, we use the mkdir command. On Windows, use can use the shorthand version of mkdir command – md.

mkdir hello

You can create multiple directories by separating them with space. The following command will create two directories hello and world.

mkdir hello world

If the directory name contains space, then wrap the directory name inside quotes.

mkdir "hello world"

List directory contents

You can use the ls command to list the contents of the current current directory. If you specify a path after the command, then contents of the specified directory will be listed. The ls command is only available in a Unix like system. On Windows, use the dir command instead.

On Mac or Linux

ls
ls directory

On Windows

dir
dir directory

Create New File

To create an empty file, we use the touch command. Note that this command is not available in Windows

touch style.css

You can create multiple files by separating them with spaces

touch style.css reset.css

Moving Files

To move files and folder, use the mv command on Mac or Linux and move command on Windows. The following command moves script.js file inside the js folder

mv script.js js

This command can also be used to rename files and directories. The following command will rename the folder img to images

mv img images

Copying Files

To copy files, use the cp command on Mac or Linux and the copy command on Windows. The following command will create a copy of index.php inside admin folder.

cp index.php admin

 Create Symbolic Links

Think of symbolic links as clones. Unlike ordinary shortcut links, symbolic links appear as if they actually exist.

To create a symbolic link on Mac or Linux, use the ln command.

ln -s sorce destination

To create a symbolic link on Windows use the mklink command.

mklink /D destination source

To see this in action, create a shortcut link to your development directory in your public html directory. Now try accessing the link in a browser. It won’t work. Next, create a symbolic link instead and access in the browser. This time, it will work.

Conclusion

The terminal / command prompt still remains one of the most powerful tools available in an OS. We hope you found this tutorial useful in learning the basics. If you have any queries or suggestions, leave us a comment.

Comments