THE COMMAND LINE FOR DESIGNERSTHE COMMAND LINE FOR DESIGNERSIntro to

Presented by / Lauren Pittenger @laurenpittenger

Slides: bit.ly/command-line-for-designers

Front End Designer & Developer at LBDesign, a globalcommunications consultancyInstructor for the Women's Coding Collective ofWordPress Basics and JavaScript & jQuery coursesTA & Volunteer for GirlDevelopIt

ABOUT LAURENABOUT LAUREN

You are a designerYou want to learn how to complete commontasks using the command line such as usingversion control and compiling SASSYou want to bridge the gap between yourdesigner & developer skills

ABOUT YOUABOUT YOU

What is the command line?Benefits of using the command line over GUIsA few basic commandsExercise: setting up a local WordPress install

WHAT WE'LL COVERWHAT WE'LL COVER

A way for us to tell programs what to do throughsequential lines of text called commands, as

opposed to using the mouse to point and click

WHAT IS THE COMMAND LINE?WHAT IS THE COMMAND LINE?

We can use the command line to reduce number ofprograms running simultaneouslyIt can serve as a "home base" when working on unfamiliarcomputersGives us access to functionality otherwise unavailable tousAs we advance our command line skills, it can help save usa lot of time

I'M A DESIGNER. WHO CARES?I'M A DESIGNER. WHO CARES?

COMMAND LINE VS. GUICOMMAND LINE VS. GUI“ For one, the command line is the only place youcan run all Git commands – most of the GUIs only

implement some subset of Git functionality forsimplicity.

Git - The Command Line

WHAT CAN I DO WITH IT?WHAT CAN I DO WITH IT?Download & install WordPress core, themesand pluginsSet up & manage a local databaseCompile SassVersion controlMake ASCII artSo much more!

ON A MACON A MACApplications › Utilities › Terminal

WHERE TO FIND ITWHERE TO FIND IT

ON WINDOWSON WINDOWSStart › All Programs › Accessories › Command Prompt

THE ANATOMY OF THE PROMPTTHE ANATOMY OF THE PROMPT

~ represents the user's home folder

BASIC COMMANDSBASIC COMMANDS

PRINT WORKING DIRECTORYPRINT WORKING DIRECTORYpwd

LIST DIRECTORY CONTENTSLIST DIRECTORY CONTENTSls

CHANGE DIRECTORIESCHANGE DIRECTORIEScd

NAVIGATINGNAVIGATING

Go home

Go one directory up from current directory

Go to root

A FEW TIPSA FEW TIPSTab to Autocomplete

Up arrow key to scroll through commands previously entered

COMMANDS TO BE CAREFUL OFCOMMANDS TO BE CAREFUL OFrm 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?NEED HELP?help

Access user manual

NOW THAT WE KNOW A FEWNOW THAT WE KNOW A FEWBASIC COMMANDSBASIC COMMANDS

LET'S PUT THEM INTO ACTIONLET'S PUT THEM INTO ACTION

ONEONETWOTWOTHREETHREEFOURFOUR

cd ~/Desktop

Navigate to Desktop

mkdir mynewdirectory

Create new directory

cd mynewdirectory

Enter new directory

pwd

Check your current location

INSTALLING WORDPRESS EXERCISEINSTALLING WORDPRESS EXERCISE

FIVEFIVESIXSIXSEVENSEVEN

DOWNLOAD & EXTRACTINGDOWNLOAD & EXTRACTINGDownload WordPress

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

unzip latest.zip

Extracting the file

cd wordpress

Navigate into "wordpress" directory

SET UP YOUR DATABASESET UP YOUR DATABASEComplete this step the way you normally would

CREATE & EDIT WP-CONFIG.PHPCREATE & EDIT WP-CONFIG.PHPcp 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

NINENINETENTEN

Fosswire Unix/LinuxCommand ReferenceCheatsheetWP-CLI: A command lineinterface for WordPressGit: Getting Started

Lifehacker: A CommandLine Primer for BeginnersGetting Started with Sassand CompassThe designer’s guide to theOSX command prompt

RESOURCESRESOURCES

THE DESIGNER'S COMMAND LINETHE DESIGNER'S COMMAND LINEGit: Getting StartedGetting Started with Sass and CompassThe designer’s guide to the OSX command prompt

BEFORE WE GOBEFORE WE GObanner -w 30 THX!

ANY QUESTIONS?ANY QUESTIONS?Slides: bit.ly/command-line-for-designers

@laurenpittenger

laurenpittenger.com