A short taster session into the fundamental technologies powering the world wide web.

Git? What?

Git is a version control system - a tool that software develoers use to allow them to keep the entire history of your code. It also makes it easy to share and collaborate with others.

Git lets you take a shapshots of your code in time that you can always roll back too. This makes it crucial as a backup tool, you can never lose your code again.

Git isn't GitHub though! This is an important distinction to make. Git is a program that runs on your computer, tracking changes in your files. GitHub is a website that provides you with cloud hosting for your GitHub repositories.

Git is the tool that developers use to avoid ugly file names like: index_version1.html, index_version2.html, index_version3.html. When using Git we can have just our latest index.html file, knowing that we can rollback to any of the previous snapshots at any point.

The Two Stage Commit Process

Okay - when we said snapshot earlier, we actually meant commit. In Git taking a snapshot of your code is called committing code. We'll use this term from now on.

The commit process is actually a two stage process:

Add the files you want to save
Commit the files

This is important, whenever you make a significant change to your code that you want to commit you must add all of the files that have changes and then commit.

Introducing SourceTree

Git is a tool that is usually used from the command line, but this can be a bit intimidating for beginners, so we'll use an equally powerful (and free!) tool called SourceTree that gives us a graphical way of interacting with Git.

We'll now use SourceTree to set up our site as a Git repository, using Git to track changes to our files.

File -> New/Clone

Git is now set up to track changes in our files. But we haven't committed anything yet!

Our First Commit

We'll now make our first commit into our Git repository, adding and committing our index.html file.

This moves it to the staging area, the box above. Add button is in the top menu The commit button is in the top menu The message is what will be displayed if we want to rollback to this commit, so make it descriptive. This is becuase git is tracking changes in our files

Throughout the weekend we'll be using Git to track changes to our files!

External CSS files

Recall that we said there were three ways to add CSS to our site:

Put the css inline in the html.
Put the css in a <style>..</style> section in the <head>
Link to a separate .css file in the <head>

So far you have written your CSS rules directly in the head section of your html page:

<!DOCTYPE html>
<html>
  <head>
    <title>My page</title>
    <style type="text/css">
      h1 { color: red; }
    </style>
  </head>

  <!-- body goes here -->

</html>

We did this to make your first experiments with CSS quick an easy. In a live site it is considered bad practice to put your CSS inside the head section: Typically a site will have one set of styles that apply to all the pages. By separating these CSS rules into their own file you (a) reduce repetition in your code and (b) reduce the amount of information that has to be sent to the browser for each page - if the CSS file applies to the whole site, it only needs to be sent to the visitor once.

To link to an external CSS file you can do the following:

<!DOCTYPE html>
<html>
  <head>
    <title>My page</title>
    <link rel='stylesheet' type='text/css' href='path/to/my_css_file.css'>
  </head>

  <!-- body goes here -->

</html>

Use sublime to save a new empty file in the root of your website folder Your path will just be main.css You don't need to use style tags with external css sheets