Project Management

The purpose of project management is the creation of a website in order to be able to document our progress and work throughout the Fab Academy.

Tools used for the website

I created and uploaded this website by using mainly three tools. For the coding of the website I used Brackets along with some tutorials for the understanding of it from W3schools. For the upload of my website I used GIT.

Website Template

Building a website from scratch, turned out to be a bit more difficult than expected, so I decided to take a template and modify it. The template I used was Helios from HTML5 UP. Of course, I tried other templates before but this turned out to be the most useful and easy to understand the .css file. I modified the webpage using mainly W3schools tutorials.

One useful tip that I found out was that if you have many folders, and you want your subfolder to use the .css file or anything else that you have one folder up, you can simply call it by using ../ !! And when you have different webpages on different folders, then make sure to put the right path of that webpage to your code.

More specifically I modified the webpage following these steps:

  • I got rid of the right and left sidebar templates of the template website.
  • On the index page, I got also deleted some parts of it like the footer and the carousel.
  • Also, again on the index page, I changed the background header image by downloading a picture I like and changing the code of it to the main.css of the html like following: 
    • 
                                        background-image: url(images/header_dream.jpg);
  • On the "About Me" page, I wanted to float the image left and as there was no such property on the main.css for that option, I had to create it by adding the code below: 
    •  
                                        /*float image to the left*/
                                        .post-thumb {
                                        float: left
                                        }
                                        /*space between the picture and the text on its right*/
                                        .post-content {
                                        margin-left: 500px
                                        }
  • Lastly, I added a background color when I display some commands or code to the main.css. It looks like this: 
    •  
                                        /* properties of the pre code*/
                                        pre{
                                        background-color: blanchedalmond;
                                        padding-left: 30px;
                                        }

    GIT setup

    The first step after the download of git would be its setup. To do that we follow these steps:

  • The first step was to configure the user name and email. 
    • 
                                git config --global user.name "John Jr"
                                git config --global user.email johnjr@example.com
  • The next step is to choose the editor in which we will operate git. 
    • 
                                git config --global core.editor "'C:/Windows/System32/notepad.exe' -multiInst -nosession"
  • The last two commands are done to generate and enable the ssh key. 
    • 
                                ssh-keygen -t rsa -C "your_email"
                                cat ~/.ssh/id_rsa.pub
  • Lastly, we paste the ssh key we generated to gitlab website on the ssh key part of the website.

    • GIT workflow and upload

    Our local repository consists of three "trees" maintained by git. The first one is our WORKING DIRECTORY which folds the actual files. The second one is the INDEX which acts as a staging area and finally the HEAD which points to the last commit we have made.

    To upload to git I follow these steps:

  • I created a working copy of my local repository to git. As git is a remote server I used the following command: 
    • 
                                git clone git@git.fabacademy.org:fabacademy2017/fablabkamplintfort.git
  • After that, I add the files I created to the index and commit them to the head. 
    •  
                                git add *
                                git commit -m "First commit"
  • Finally, before I push my files to the repository, I have to pull first in order to be sure that no modifications are done meanwhile on it and secure that way my files. 
    •  
                                git pull origin master
                                git push origin master

    Before adding and commiting, it is important to enter the file which our local repository is via git using the cd command. Also, the "git clone" command is executed just once for the initial commit. Besides git clone we paste the ssh instead of the http on the git website. After the first commit, we can ignore it.