GitHub and SublimeText

    In this session we worked again on the websites we had began developing the previous week. Using Sublime Text I have created an index.html document and a style.css cascading style sheet (both pictured on the left, below), and through both what we have learnt so far in the course and using my prior knowledge of web development, I was able to create the web page you see below.

    The page has <div> elements to add structure to page, using nested <div>'s in the gallery to display four images side by side. Other common html tags such as <h1>'s, <p>'s and <img>'s are used throughout. Also there a plenty of links on the page, with some text under the 'Favourite Game' heading linked to the game's website. This link has a regular styling, and also an a:hover styling, so that when the cursor moves over the text, the underline will disappear, letting the user know clearly that clicking this text will make something happen. The four images in the gallery are also linked to their respective websites.

The code in the two documents on the left, created the page on the right... Magic!

    We also focused heavily on GitHub for this session. We touched on it last week but I have to admit I struggled trying to tackle it on my own at home. However after today I really understand the basics of how it works, and I see the value of such a piece of software for a project based course.

Changes published to the web client.

Publishing changes in the GitHub desktop app

    In the two screenshots above, you can see the commits I made in the desktop app to the local repository, and the changes that were made in each individual commit. In the other screenshot above you can see that these commits have been published to the GitHub web client.

    The other part of GitHub we looked at was branches, in particular we looked at the gh-pages branch which allows you to publish your website so you can view it in a browser. We set up the gh-pages branch, and looked at how branches worked in relation to the master branch. When publishing the gh-pages branch, we could then go to the web client of GitHub and view our site in a chrome window (pictured below)

Website live!