A Designer’s Introduction to the Command Line
videos

A Designer’s Introduction to the Command Line

Tutorial Details
  • Topic: The Command Line
  • Difficulty: Beginner
  • Screencast duration: 10 mins

The command line can be a scary thing to most designers. This is the first in a collection of quick tips, in which we’ll break down the barrier to the command line and show you how to use it to speed up your workflow.

While the command line is only one of many tools that can be used by designers, it’s one that crosses platforms and is almost universally available being a pure extension of the operating system. These tips are not created in order to advocate the non-usage of other tools, but rather to offer designers who would like to learn more about the command line a place to start.


Traversing and Simple File Manipulation

In the first part of this series, we will give you a quick introduction to traversing your filesystem, as well as creating, deleting, copying, and moving folders and files.


Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube

Traversal

The following points deal with traversing the file system.

  • ls – Listing the files in the current working directory.
  • cd <directory> – Changes current working path to <directory>, Where <directory> is a path to a directory.
    • .. and . – “..” refers to the parent directory of the current working directory, where “.” refers to the current working directory
    • ~ – “~” refers to the current user’s “Home” directory

Simple File Manipulation

The following points deal with deleting, moving, copying, and creating empty files and folders.

  • rm – Remove a file. Pass “-r” for recursive, which removes folders and their children files. Note: this does not send items to the trash; it basically irreversibly deletes them, so be sure you know what you’re getting yourself into!
  • mv – Moves files and folders. First argument passed is the file/folder to be moved; the second is the location to move it to.
  • cp – Copies files. Pass “-r” for recursive, copying a folder and its contents. First argument passed is the file/folder to be copied; the second is the location to copy to.
  • touch – Creates a new empty file at the specified location. Passing multiple space-separated values will create a new file for each value.
  • mkdir – Creates a new empty directory at the specified location. Passing multiple space-separated values will create a new directory for each value.

That’s a Wrap

Feel free to post questions in the comment area. In the next session, we will go over permissions and what it means to be a “sudo” user. Soon after, we’ll dive straight into using Git and other tools to quickly set up a project on your local machine (faster than you could through the GUI!).

Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Matthew

    It may be usefull somewhere in the text to state that this is for a mac os or linux based terminal not windows….

    • http://bazhan.com.ua Denis
    • http://jonathancutrell.com Jonathan

      Ah, yes – sorry about that. A windows alternative is Cygwin – definitely a better option than native if you’re going to be getting into the command line on Windows.

      http://www.cygwin.com/

      Git also has a command line that’s specifically for Git, as Denis mentioned.

  • supprof

    thank you a little bit
    when you’ll make the windows version of this tutorial i’ll add the big part
    no thank you very mutch and i hope you’ll make the windows version of this tutorial

  • peter

    Step One: How do you open/find the ‘command line’ ????????

    • Mac Mechanic

      On a Mac, the ‘command line’ is found in the Terminal application. This app is found in the Utilities folder inside of your Applications folder.

      By the way, the Mac’s Terminal works wonderfully with drag and drop as well. I use the Terminal often to empty the Trash when I know I have a large number of files within folders in the Trash.

      Open a Terminal Window, then open the Trash from the Dock. In the Terminal window type rm -r

      There’s a space after the last r above.

      Now, jump over into the Trash window. Use Command-A to select all the items in the Trash. Now, click and hold on the selected items in the Trash window, and drag them into the Terminal window. Release your mouse button and the Terminal will enter the paths to all the files and folders in the Trash. Press Return and the rm command is executed and all the files in the Trash are removed.

      This process also has the advantage of removing files that are locked or in use. It is also much faster than using the Finder’s Empty Trash menu command when there a lot of items to be deleted.

      Another great use of the Terminal’s drag and drop functionality is to look at the invisible contents of a folder deep within the file structures within the Finder. If I have a Finder window open and wish to see the contents of a folder, I open the Terminal, type cd (space) and drag the folder I wish to examine into the Terminal window. The correct path to this folder is entered for you, no matter how deeply nesting within other folders that folder is. Press Return, then type ls -al to see the contents of that folder, including any invisible files.

      The Terminal also has auto-complete functions built in, so to copy a file you may type cp and start to type the file’s name – after a few characters, hit the Tab key and the Terminal will complete the name as long as there is only one file beginning with that string of letters – if there are more than one, it will fill in as much as it can until the two names differ. For instance, if you have two files: extremelylongandwordyfilename1 and extremelylongandwordyfilename2 and you wish to copy one, type cp ext – and hit the Tab key. It will complete the file name up to the last character which you then must specify.

      Using the drag and drop and auto-complete functions can make your workflow much faster as well.

      • http://zackperdue.com Zack

        or instead of dragging and dropping, you could go into the trash folder and use rm -rf *
        * means everything.

  • Pingback: Software - Shell - Introduction | Pearltrees

  • Pingback: A Designer’s Introduction to the Command Line | Shadowtek | Hosting and Design Solutions

  • David

    yes. you should definitely tell people this doesn’t work for windows…
    anyway. nice tut. hope to see win version soon

  • Owen

    Thank you! Great tutorial and I look forward to watching more terminal and comand line tutorials to learn some new tricks

  • http://www.fingerprintweb.pl Krystian

    This screencast is good introduction to command line for people who has never seen it before. I hope that in next episodes you’ll show some regular expressions

    • http://www.ballyhooblog.com Andrew Wilson

      Oh great. I can see it now. “Regular Expressions for Designers”. Please, please don’t. A “good” programmer can’t do regular expressions worth a crap, let alone a designer.

  • http://www.ballyhooblog.com Andrew Wilson

    Is it just me, or are the titles of these (and the plethora of the “xyz for designer” articles ridiculously titled?

    Please remove the term “Designer’s” from the title. Then, this is an accurate tutorial/intro and title. There is no such thing as “Command line for designers”.

    Designers don’t use a command line, programmers/developers do. If you’re a “designer” and using the command line for creating folders, and copying files, you’re not a designer. Sorry, no matter what your occupation says on Facebook, if you’re rocking CLI, you’re much more of a developer.

    Maybe:
    “Command line for absolute beginners”
    “Command line for computer NOOBS”

    If you’re adement about targeting this to designers, then at least clarify the title:
    “Command line for people who don’t need to know about the command line”

    Is my pet peeve showing through enough here?!

    • http://Jonathancutrell.com Jonathan

      Haha – I can understand the peeve.

      Considering this site is dedicated to helping *web* designers, there’s significant gains to learning the command line for plenty of reasons.

      Web design covers many different aspects of design beyond simple aesthetics. It also considers interaction and usability. Beyond this, web designers often are working closely with developers ( back end). For these reasons, it makes sense for web designers to move into territory that will speed up the whole development process from front to back. I guarantee that most good development firms are looking for designers who know how to use version control, SSH, and other slightly more technical skills than Photoshop. It’s not because designers need to learn intense algorithmic patterns or understand multiple programming paradigms. It’s simply a tool to use that integrates very well with other tools web designers use. It just doesn’t have buttons.

      Saying that you must label yourself as a developer to use the command line is a little short sighted; this screencast attempts to start down a road to show you how designers can benefit from this very powerful and extensive tool. Naturally, we started at a baseline level that any introduction starts at. Think of it as an explanation of the interface of a more richly developed UI.

      • http://www.ballyhooblog.com/ios/ Andrew

        Fair and articulate. But I’m still holding onto my pet peeve.. :)

  • http://www.elimcmakin.com Eli McMakin

    Great tutorial. Thankyou. Still trying to get the handle of Git.

  • http://gregdixson.com Greg

    Great tutorial! Just he right length and detail to get me practicing in the Terminal. Looking forward to the next part :)

  • http://www.sparkingbolt.com ArRolin

    Thanks “Jonathan Cutrell” for this Great Tut.
    This Tut help me a lot for quick work :)

    Thanks again.

  • Pingback: ASO Blog Weekly Digest: March 12-16 | Web Hosting Blog at ASO

  • El garch

    Thanks for the great tutorial :D

  • Ali T

    I couldn’t be happier! Thanks for this series I’m looking forward for next episodes.
    I’m a Terminal and Command Line enthusiast.

  • Pingback: WebDesign | Pearltrees

  • Mayiawo Aken’Ova

    Great intro, are more tutorials forthcoming ?

  • Pingback: Quick Tip: Working with SASS and Bootstrap | Webdesigntuts+

  • Pingback: Getting Started with Octopress | Webdesigntuts+

  • Pingback: Getting Started with Octopress | Directory Net