The Command Line for Designers

Intro to

  • Front End Designer & Developer at LBDesign,   a global communications consultancy
  • Instructor for the Women's Coding Collective of WordPress Basics and JavaScript & jQuery courses
  • TA & Volunteer for GirlDevelopIt

ABOUT LAUREN

  • You are a designer
  • You want to learn how to complete common tasks using the command line such as using version control and compiling SASS
  • You want to bridge the gap between your designer & developer skills

ABOUT YOU

  • What is the command line?
  • Benefits of using the command line over GUIs
  • A few basic commands
  • Exercise: setting up a local WordPress install

What we'll cover

A way for us to tell programs what to do through sequential lines of text called commands, as opposed to using the mouse to point and click

WHAT IS THE COMMAND LINE?

  • We can use the command line to reduce number of programs running simultaneously
  • It can serve as a "home base" when working on unfamiliar computers
  • Gives us access to functionality otherwise unavailable to us
  • As we advance our command line skills, it can help save us a lot of time

I'M A DESIGNER. WHO CARES?

Command Line vs. GUI

For one, the command line is the only place you can run all Git commands – most of the GUIs only implement some subset of Git functionality for simplicity.

What can I do with it?

  • Download & install WordPress core, themes and plugins
  • Set up & manage a local database
  • Compile Sass
  • Version control
  • Make ASCII art
  • So much more!

On a mac

Applications › Utilities › Terminal

Where to Find It

ON WINDOWS

Start › All Programs › Accessories › Command Prompt

the anatomy of the prompt

~ represents the user's home folder

Basic Commands

print working directory

pwd

LIST directory contents

ls

change directories

cd

navigating

Go home

Go one directory up from current directory

Go to root

A Few Tips

Tab to Autocomplete

Up arrow key to scroll through commands previously entered

commands to be careful of

rm filename

Permanently delete a file immediately

Does not go to Trash

rmdir directoryname

Permanently delete a folder immediately

Does not go to Trash

need help?

help

Access user manual

Now that we know a few

basic commands

LET'S PUT them INto ACTION

One
Two
Three

Four

cd ~/Desktop

Navigate to Desktop

mkdir mynewdirectory

Create new directory

cd mynewdirectory

Enter new directory

pwd

Check your current location

installing wordpress exercise

five
six
seven

DOWNLOAD & EXTRACTING

Download WordPress

curl -O https://wordpress.org/latest.zip
unzip latest.zip

Extracting the file

cd wordpress

Navigate into "wordpress" directory

set up your database

Complete this step the way you normally would

create & Edit wp-config.php

cp wp-config-sample.php wp-config.php

Copy wp-config-sample.php to wp-config.php

open wp-config.php

Open the file with default editor

nine
ten

Resources

before we go

banner -w 30 THX!

Any Questions?

Intro to the Command Line for Designers

By Lauren Pittenger

Intro to the Command Line for Designers

Do you walk the line between designer and developer? Are you more comfortable using a Graphical User Interface (GUI) and find the black screen that is the command line a bit intimidating? This session will look at some of the basic commands needed to get comfortable using the command line. Though designers may need the command line for little more than version control or compiling SASS, having a basic understanding of the command line can help speed up your workflow.

  • 6,104