Git

Distributed version control system

Huh?

Software to keep track of your files, originally for code

Turns this

Messy files

Into this!

Awesome structure

Configuration

Tell git who you are

$ git config --global user.name "your name"
$ git config --global user.email "your email"

For Mac only

$ git config --global core.editor "open -t -W"

Initialize Git repository

  • Windows: Fire up Git Bash
  • Mac/Linux: Terminal
$ git init
Initialized empty Git repository in ...

Checking the status

$ git status
On branch master

Initial commit

nothing to commit (create/copy files and use "git add" to track)

Adding files to be tracked

$ git add .
$ git status
On branch master

Initial commit

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)

        new file:   asdf

Ignoring files

A file that tells git what files/globs to ignore

$ touch .gitignore

Commit files

$ git commit
# editor pops up

Commit messages

  • Meaningful
  • Describe changes made to code

Bad commit messages

Ooops!
asdfasdfasdfasdfasdfasf
It works!
more @ whatthecommmit.com

Good commit messages

Fix #113, software hangs when spacebar is pressed
Move images to separate folder
Separate test source from program source

See the history

$ git log
$ git log --oneline

See the differences

$ git diff HEAD^

Git flow

$ git status
$ git add .
$ git status
$ git commit
$ git status
Let's get some practice

Bootstrap

The most popular front-end framework for developing responsive, mobile first projects on the web.

Getting it

Instructions

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

Using Bootstrap

  • delete style tag
  • add the link to stylesheet
<link rel="stylesheet" href="bootstrap.min.css">
Check our code into Git

Styling the nav bar

  • add class to ul
  • change div.logo to h3.logo
  • move h3.logo to below ul.nav
<ul class="nav nav-pills pull-right">
Check our code into Git

Call to action

  • make div.jumbotron
  • move project name and subtitle into div.jumbotron
  • add learn more button
<p>
  <a class="btn btn-lg btn-success" href="#" role="button">
    Sign up today
  </a>
</p>
Check our code into Git

Collaborate

$ git clone
$ git pull
$ git push
Let's head to GitHub and try

References

Git for Beginners workshop by NUS Hackers

Git Reference Manual

GitHub's Hello World Guide to GitHub

Try Git online

Inner workings of Git

Bootstrap