Exercise 1

Principles and Practices, Project Management

The first assignment was to set up this webpage and add the about-page and the ideas for the final project.

About

Project - Concept

Web Design

For this website I used the Fab Academy Template by Massimo Menichinelli (links in the footer). I used the Brackets editor to fill it with my content. Brackets is a nice easy to use editor with many great features. Some of them are live preview, css code preview inside the html code, media preview while hovering over the corresponding code, and code completion, etc. The template has some styling built in such as the tiles on the index page and the banner on top of each page called jumbotron. These jumbotron have been slightly modified by me. By rightclicking on jumbotron in div class="jumbotron" I could directly edit the css code and changed it to

.jumbotron{
padding: 30px 15px;
margin-bottom: 30px;
color: inherit
background-color: rgb(142, 186,228);
}

I put all files into a media folder in the directory where all the other html and css files are stored. One can link to them with the (a href="path/to.file") command in <>. The same command is used to link to the several exercises and documents.

Git

A Git repository offers some nice features for larger project and even smaller ones. Especially if you work in a team and more than one member is working on the same (code) file, the changes can be merged. In my case I am the only one working on my webpage. Even in that case I can make use of some features like version control, external data storage, and track of progress. I am using SourceTree to have a GUI for working with Git. On the start screen of Source Tree i could simply press add repository and copy the link provided to me. After clicking on the repository I had the GUI shown in the image below. On top is the quickaction bar with the most important features like commit, pull, and push. Below a history of my (and other peoples) changes is displayed. Further more I get a list of files a changed without commiting them yet and a preview of the corresponding file to instantly get an overview. If I want to save my changes in the git repository a click on the checkbox unstaged files to select all files with recent changes and press commit. The I can type a short summary of what I did and directly push it. I use multiple devices and before I start working on stuff for the Fab Academy I press the pull button to get up to date on all of my devices.