Skip to main content
Design

A beginners guide to Git for Web Designers

Posted: 27 Apr 2020. Updated: 03 Jun 2020

This guide explains the basic commands that got me up and running when I was learning Git.

Image for Compass

Introduction

This is not a deep dive or an exhaustive list of Git commands. There's certainly more complicated things you can do with Git, but this guide aims to get you up and running with the basics.

This guide presumes a few things. That you're fairly comfortable using the command line on macOS. If you're not, check out this great guide by David Baumgold or DashDash before reading further. It also presumes you know what Git is.

You can access the command line using the Terminal app that comes with your computer or download iTerm. If you prefer a user interface, you might like Git Tower, although I found it overkill for my personal needs.

Getting setup

Install Git onto your computer

Like any desktop application, you'll need to install Git onto your computer before you can start using Git commands. One way todo this is through the official OSX installer by Tim Charper.

Add Git to a new or existing project

Using the command line, we are going to move into our project folder. For this guide, I'm going to presume you have a project folder called "my-project" which lives in the Sites folder on macOS.

Type the following to change into your project folder:

cd Sites/my-project
COMMAND LINE

Next, we will activate Git for the "my-project" folder by typing:

git init
COMMAND LINE

Basic Git Commands

You should type these commands into the command line, at the root of the project folder that has Git activated:

git branch

Typing Git branch will list all branches in a project. It's handy for checking out what branch you're currently in.

git status

Git status will list all files that need to be committed to your project. It's handy for checking what files you changed.

git checkout <branch-name>

If you need to move around branches, Git checkout is your friend.

git checkout -b <new-branch-name>

This allows you to create a new branch from the current branch you're in. This is handy if you need to create a new branch to re-factor something or if you're working on a new feature.

git add <file1> <file2> <file3>

The "git status" command will provide you with the file paths to all modified files. Use this path in "git add" when you need to add select files.

git add .

This will add all files listed in "git status".

git commit -m "commit message goes here"

Once you're finished adding files, you'll need to commit them to the project. Use a message to describe your changes.

git merge <branch-name>

Checkout the branch you want to merge into. The <branch-name> in the git merge command is the branch you want to merge.

git reset HEAD~

This will undo your previous commit. You'll have to add and re-commit your files again. Handy if you've forgotten a file or made a mistake.

Working with a remote repository

If the repository is on Github you can fork the project. You'll then be able to retrieve the repository URL from the green "clone or download" button on the project page.

git remote add origin <repo_url>

If you need to pull down a repository or send in a pull request, you'll need to set up a link between your local and remote projects.

git remote add origin [email protected]:user/project.git
COMMAND LINE

git pull origin <branch>

This command will pull down remote changes into your local project folder. Make sure all files have been committed locally before running this command.

git push origin <branch>

This command allows you to push a branch up to a remote repository.

git push origin refactor-headerspacing
COMMAND LINE

Examples

Create a new branch called "refactor-headerspacing" from the "dev" branch

git checkout dev
git checkout -b refactor-headerspacing
COMMAND LINE

Commit all changes you recognise in git status

git status
git add .
git commit -m "message"
COMMAND LINE

Commit certain changes listed in git status

git status
git add <filepath_in_gitstatus> <filepath_in_gitstatus>
git commit -m "message"
COMMAND LINE

Push a branch called "refactor-headerspacing" up to a remote repository

git checkout refactor-headerspacing
git push origin refactor-headerspacing
COMMAND LINE

Submit a pull request to the dev branch of a remote repository on Github

# make a new project directory
mkdir Sites/project-name

# move into the project folder
cd Sites/project-name

# initiate git
git init

# link your project with a remote repository
# this could be a github project that you forked
git remote add origin [email protected]:username/forkedproject.git

# pull down changes from the dev branch
git pull origin dev

# once you've made your changes, check, add and commit your files
git status
git add .
git commit -m "my changes"
COMMAND LINE

When you're ready, push your changes back up to the remote repository:

git push origin dev
COMMAND LINE

When you go back to your project on Github, you should now see a submit pull request button next to your last commit. Follow the instructions and submit your pull request from there.

Final thoughts

  • Create a branch if you're working on a new feature, a fix or re-factoring something
  • Surprise your developer colleagues with meaningful commit messages
  • Try and keep your branches clean - this means adding and committing your changes regularly
  • If you're setting up a Github repository, 9 times out of 10 there is no need to "Initialize this repository with a README"

For further reading, checkout this great guide from Sam Livingston-Gray.

If you're a web designer, I'd be interested to know how you learnt Git. What do you struggle with? What commands do you use on a regular basis? Let me know on Twitter.

Read this next

Weeknote #1

My first weeknotes for the week ending 26th April 2020.

  1. Home
  2. Notes
  3. A beginners guide to Git for Web Designers
Illustration of Jon Leverrier

Ready to discuss your next project?