{"id":21759,"date":"2024-02-23T18:00:29","date_gmt":"2024-02-23T10:00:29","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=21759"},"modified":"2024-03-05T23:23:33","modified_gmt":"2024-03-05T15:23:33","slug":"web-designers-essential-command-lines","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/web-designers-essential-command-lines\/","title":{"rendered":"Essential Command Line Skills for Web Designers"},"content":{"rendered":"

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

For web designers, using Terminal or Command Prompt might not seem the easiest, especially if you\u2019re more accustomed to graphical interfaces<\/a>. However, command line tools such as Yeoman<\/a>, Bower<\/a>, and Google Web Starter Kit<\/a> rely on command line inputs<\/strong>.<\/p>\n

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.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tEssential Shell Commands Every Blogger Should Know<\/a>\n\t\t\t\t<\/p>\n

\n

Before We Begin\u2026<\/h2>\n

Let\u2019s discuss Terminal and Command Prompt first. These applications grant you access to the operating system\u2019s heart. It\u2019s crucial to understand that once you make a change here, it cannot be undone<\/strong>. Therefore, any actions taken in these environments must be approached with care<\/strong> \u2013 only proceed if you\u2019re confident in what you\u2019re doing.<\/p>\n

Another key point is the inability to use the mouse within Terminal or Command Prompt. This means you can\u2019t search or select text using the mouse<\/strong>. All interactions are through the keyboard, making keyboard shortcuts invaluable<\/strong>.<\/p>\n

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

\n

Changing Directories<\/h2>\n

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

\r\ncd foo\r\n<\/pre>\n
The current directory is displayed before the blinking cursor, as shown below.<\/p>\n
\"Example<\/figure>\n
To dive into a sub-directory of foo<\/code>, you can do it in one step:<\/p>\n
\r\ncd foo\/sub-folder\r\n<\/pre>\n
If you need to go back to the previous directory or move up one level from your current directory, simply type:<\/p>\n
\r\ncd ..\r\n<\/pre>\n
\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tHow to Use the CD Command in Linux<\/a>\n\t\t\t\t<\/p>\n
\n
Creating a New Folder<\/h2>\n
The mkdir<\/code> command is handy when you need to create a new directory. To make a directory named foo<\/strong>, you would use the following command:<\/p>\n
\r\nmkdir foo\r\n<\/pre>\n
Creating multiple directories simultaneously is also straightforward. The next command will create three directories named foo<\/code>, hello<\/code>, and world<\/code> in one go:<\/p>\n
\r\nmkdir foo hello world\r\n<\/pre>\n
This mkdir<\/code> command works in both Terminal and Command Prompt.<\/p>\n
\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tHow to List Files and Folders in Linux<\/a>\n\t\t\t\t<\/p>\n
\n
Creating a New File<\/h2>\n
To create an empty file, the touch<\/code> command is what you need. For instance, to create a file named filename.html, you would type:<\/p>\n
\r\ntouch filename.html\r\n<\/pre>\n
If you want to create several files at once, just list them all in the command like so:<\/p>\n
\r\ntouch file.html style.css\r\n<\/pre>\n
\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tHow to Use the \u2018touch\u2019 Command in Linux<\/a>\n\t\t\t\t<\/p>\n
\n
Moving Files<\/h2>\n
To move a file to a specific folder, use the mv<\/code> command. For instance, to move style.css<\/code> into a folder named \/css<\/strong>, the command is:<\/p>\n
\r\nmv style.css \/css\r\n<\/pre>\n
The mv<\/code> command can also be used to rename files and folders. To rename index.html<\/code> to about.html<\/code>, you would use:<\/p>\n
\r\nmv index.html about.html\r\n<\/pre>\n
\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tHow to Use mv in Linux<\/a>\n\t\t\t\t<\/p>\n
\n
Copying Files<\/h2>\n
To copy a file, the cp<\/code> command (or copy<\/code> on Windows) is used. For example, copying index.html<\/code> and naming the duplicate as about.html<\/code> can be done with:<\/p>\n
\r\ncp index.html about.html\r\n<\/pre>\n
Remember, on Windows platforms, you should use the copy<\/code> command.<\/p>\n
\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tHow to Copy Files and Folders in Linux<\/a>\n\t\t\t\t<\/p>\n
\n
Listing Directory Contents<\/h2>\n
One of my most frequently used commands is the List Directory command, also known as ls<\/code>. This command allows you to view all the contents within a directory.<\/p>\n
\"Example<\/figure>\n
By specifying a folder name before the ls<\/code> command, you can list the contents of that particular folder, as shown below:<\/p>\n
\"Listing<\/figure>\n
To get more details about the contents, such as creation date, permissions, and owners, use ls -l<\/code> or ll<\/code>.<\/p>\n
\"Detailed<\/figure>\n
Note that the ls<\/code> command works in UNIX shells, meaning it\u2019s suitable for Ubuntu and OS X but not for Windows. For Windows, you\u2019ll need to use the dir<\/code> command instead.<\/p>\n
\"Using<\/figure>\n
\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tHow to List Files and Folders in Linux<\/a>\n\t\t\t\t<\/p>\n
\n
Opening Files<\/h2>\n
To open files or folders in their default applications, use the open<\/code> command. For example, to open the Desktop<\/code> folder in Finder:<\/p>\n
\r\nopen ~\/Desktop\r\n<\/pre>\n
To open a .txt<\/code> file in TextEdit (the default plain text editor in OS X), you would use:<\/p>\n
\r\nopen readme.txt\r\n<\/pre>\n
Windows users should opt for the edit<\/code> command for a similar effect. To open a text file in the default editor, the command is:<\/p>\n
\r\nedit readme.txt\r\n<\/pre>\n
\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tHow to Use the \u2018open\u2019 Command in Linux<\/a>\n\t\t\t\t<\/p>\n
\n
Creating Symbolic Links<\/h2>\n
Symbolic links<\/a>, or Symlinks, function like shortcut folders, yet the system recognizes them as actual folders<\/strong>. A favorite use case of mine for Symlinks is to sync folders from \/Dropbox<\/strong> to my \/Sites<\/strong> directory, where I store all my web development projects.<\/p>\n
Here\u2019s how you specify the command:<\/p>\n
\r\nln -s \/source \/destination\r\n<\/pre>\n
To link your \/Dropbox<\/strong> to the \/Sites<\/strong> folder, execute:<\/p>\n
\r\nln -s ~\/Dropbox\/project ~\/Sites\/project\r\n<\/pre>\n
For Windows, the equivalent command is mklink \/d<\/code>.<\/p>\n
\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tHow to Use the \u2018ln\u2019 Command in Linux<\/a>\n\t\t\t\t<\/p>\n
\n
Using the Nano Editor<\/h2>\n
If you need to set up a new VirtualHost with a new domain name, you\u2019ll likely need to edit the hosts<\/code> file that maps domain names to IP addresses. The fastest way to do this is by using the following command:<\/p>\n
\r\nsudo nano \/etc\/hosts\r\n<\/pre>\n
\n
Sublime Text Command Line Interface<\/h2>\n
Sublime Text includes a command line interface (CLI), subl<\/code>, allowing operation through Terminal and Command Prompt. Initially, the Terminal won\u2019t recognize the subl<\/code> command.<\/p>\n
To integrate Sublime Text CLI, execute this command:<\/p>\n
\r\nln -s \"\/Applications\/Sublime Text.app\/Contents\/SharedSupport\/bin\/subl\" ~\/bin\/subl\r\n<\/pre>\n
With this setup, you can open files directly, such as style.css<\/code>, using:<\/p>\n
\r\nsubl style.css\r\n<\/pre>\n
Adding --add<\/code> to your command opens files or folders in the existing Sublime Text window:<\/p>\n
\r\nsubl --add foo\r\n<\/pre>\n
For additional options, subl --help<\/code> will guide you.<\/p>\n
\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\t12 Best Sublime Text Tips and Tricks<\/a>\n\t\t\t\t<\/p>\n
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.<\/p>\n
\n
Further Reading: Command Line Mastery<\/h2>\n
Explore more through these posts, which teach you various tasks using command lines:<\/p>\n