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.
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
The cd command is used to navigate directories. The cd command is short for change directory. You will often need this command.
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.
You can go multiple levels up by using the following version of cd command.
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.
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
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
You can create multiple files by separating them with spaces
touch style.css reset.css
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
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.
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.