Essential Command Line Skills for Web Designers

By Thoriq Firdaus. in Coding. Updated on March 5, 2024.

If you’ve ever followed a web design or development tutorial, you might have seen instructions asking you to use commands like npm install or git clone. These instructions are for the Command Line Interface (CLI), a tool we use to instruct the computer to carry out specific actions, typically by entering commands in Terminal or Command Prompt.

For web designers, using Terminal or Command Prompt might not seem the easiest, especially if you’re more accustomed to graphical interfaces. However, command line tools such as Yeoman, Bower, and Google Web Starter Kit rely on command line inputs.

If the thought of typing commands seems daunting, this article will introduce you to a few simple command lines to get you started and make you more comfortable with using them.

Before We Begin…

Let’s discuss Terminal and Command Prompt first. These applications grant you access to the operating system’s heart. It’s crucial to understand that once you make a change here, it cannot be undone. Therefore, any actions taken in these environments must be approached with care – only proceed if you’re confident in what you’re doing.

Another key point is the inability to use the mouse within Terminal or Command Prompt. This means you can’t search or select text using the mouse. All interactions are through the keyboard, making keyboard shortcuts invaluable.

For Windows users, it’s important to note that some commands might not be available. In such cases, I recommend using tools like Cygwin, UnxUtils, or Windows Services for UNIX Version 3.5 to bring UNIX utilities to Windows. Now, get ready to dive in with enthusiasm.

Changing Directories

Navigating through directories is a common task. Both Terminal and Command Prompt utilize the cd command for changing your current directory to a specified destination. For example, to move to a folder named foo, you would type:

cd foo

The current directory is displayed before the blinking cursor, as shown below.

To dive into a sub-directory of foo, you can do it in one step:

cd foo/sub-folder

If you need to go back to the previous directory or move up one level from your current directory, simply type:

cd ..

Read Also: How to Use the CD Command in Linux

Creating a New Folder

The mkdir command is handy when you need to create a new directory. To make a directory named foo, you would use the following command:

mkdir foo

Creating multiple directories simultaneously is also straightforward. The next command will create three directories named foo, hello, and world in one go:

mkdir foo hello world

This mkdir command works in both Terminal and Command Prompt.

Creating a New File

To create an empty file, the touch command is what you need. For instance, to create a file named filename.html, you would type:

touch filename.html

If you want to create several files at once, just list them all in the command like so:

touch file.html style.css

Moving Files

To move a file to a specific folder, use the mv command. For instance, to move style.css into a folder named /css, the command is:

mv style.css /css

The mv command can also be used to rename files and folders. To rename index.html to about.html, you would use:

mv index.html about.html

Read Also: How to Use mv in Linux

Copying Files

To copy a file, the cp command (or copy on Windows) is used. For example, copying index.html and naming the duplicate as about.html can be done with:

cp index.html about.html

Remember, on Windows platforms, you should use the copy command.

Listing Directory Contents

One of my most frequently used commands is the List Directory command, also known as ls. This command allows you to view all the contents within a directory.

By specifying a folder name before the ls command, you can list the contents of that particular folder, as shown below:

Listing contents of a specific folder with ls command

To get more details about the contents, such as creation date, permissions, and owners, use ls -l or ll.

Note that the ls command works in UNIX shells, meaning it’s suitable for Ubuntu and OS X but not for Windows. For Windows, you’ll need to use the dir command instead.

Opening Files

To open files or folders in their default applications, use the open command. For example, to open the Desktop folder in Finder:

open ~/Desktop

To open a .txt file in TextEdit (the default plain text editor in OS X), you would use:

open readme.txt

Windows users should opt for the edit command for a similar effect. To open a text file in the default editor, the command is:

edit readme.txt

Creating Symbolic Links

Symbolic links, or Symlinks, function like shortcut folders, yet the system recognizes them as actual folders. A favorite use case of mine for Symlinks is to sync folders from /Dropbox to my /Sites directory, where I store all my web development projects.

Here’s how you specify the command:

ln -s /source /destination

To link your /Dropbox to the /Sites folder, execute:

ln -s ~/Dropbox/project ~/Sites/project

For Windows, the equivalent command is mklink /d.

Using the Nano Editor

If you need to set up a new VirtualHost with a new domain name, you’ll likely need to edit the hosts file that maps domain names to IP addresses. The fastest way to do this is by using the following command:

sudo nano /etc/hosts

Sublime Text Command Line Interface

Sublime Text includes a command line interface (CLI), subl, allowing operation through Terminal and Command Prompt. Initially, the Terminal won’t recognize the subl command.

To integrate Sublime Text CLI, execute this command:

ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" ~/bin/subl

With this setup, you can open files directly, such as style.css, using:

subl style.css

Adding --add to your command opens files or folders in the existing Sublime Text window:

subl --add foo

For additional options, subl --help will guide you.

Mastering these command lines and starting with the basics will reveal that commands can be more efficient than graphical interfaces for certain tasks. Hopefully, this guide helps you begin your journey.