2. Project management

Objectives of this week are:

1- Build a personal website

2- Upload it to the class archive

3- Work through git tutorials

Build a personal site - First Try

My first try in building a website was by taking a ready template from Bootstrap. I started by downloading the template files in my PC and explore what the files are and how the template can be edited. Since I am not a web developer and I have no experience in this field, I started to search what the terms HTML, CSS and JavaScript are. I have learnt what they mean and HTML basics by visiting W3schools website. I learnt that HTML is the language of building web pages, CSS is the language of styling web pages and JavaScript is the language of programming web pages. I realized that in order to build my fab academy site, I have to edit in the HTML file of the template to create the website with the content that I want. Therefore, I have downloaded the sublime code editor to help me editing the HTML code in a very easy and comfortable way. I kept changing in the code and observe the changes regularly in the broswer. The images below show my work and my first try in HTML coding:

home page

about me page

assignments and final project page

contact me page

All the work above have been done before the assignment week and I was not sure about what’s really going on. I was wondering how to create new pages for each week and how to link them to the website that I have made. Also, I was not sure if this website should be hosted in gitlab or somewhere else. Therefore, I decided to not continue with HTML and I shifted to the easier and to the quicker solution. I used the ready-to-use template that is already uploaded on gitlab. I started editing in it to build my fab academy site.

VCS (Version Control Systems)

Version control systems are a software tools that help a team or a group of people to manage, change and edit to a source code over time. It keeps track of every modification done by a team member to the code in a special kind of database. Referring to those tutorials: tutorial 1 and tutorial 2, the benifits of the VCS can be summarized in the following points:

1- A complete long-term change history of every file. This includes the creation of files, deletion of files and the changes in their contents as well.

2- Branching and merging. As creating a branch in VCS keeps various job streams independent from each other, while also making it possible for developers to confirm modifications in each branch and merge the work back to aviod any conflict (as make changes to the same file by many developers atn the same time may lead to a merge conflict).

3- Pull files from a repository or pushing changes to it.

There are many VCS such as Subversion, Mercurial, Perforce, Bazaar, Git. However, the most popular ones that used in Fab Academy are Mercurial and Git. Unlike the other VCS, the software that I am using (Git) is dealing with the data like a set of snapshots of a mini filesystem. That means with each commit, the state of the project (in Git) takes a picture of what all the files look like at that moment and stores a reference to that snapshot. To be efficient, if files have not changed, Git doesn’t store the file again. The figure below shows how Git stores data:

This makes Git different and more powerful. The below paragraphs explained how I have created my website using Git Bash and this is inculding the local modifications of my contents.

Build a personal site - Second Try + account setup

As I said, I decided to go with Markdown and start editing the ready-to-use template published in gitlab to build my website. In order to work with gitlab locally from my laptop, I have connected a local repository to gitlab. This will enable me to do the changes from my laptop and then upload them to the remote repository (gitlab). This connection have been done through SSH key using the following steps:

1- In Git Bash I set up my identity

2- I generated a new key by typing this command

3- I copied the key to clipboard using this command

Then in gitlab, open the setting > SSH keys > paste your key in the “key area” > press add key > SSH is added successfully.

4- Back to Git Bash, I clone the remote repository locally

5- After cloning, a folder with my name has created in the location that I chose. I opened the folder and start editing the website locally.

• cd – this command is used to change directory (It is like a the navigation tool)
• git pull - this command is used to fetch and download content from a remote repository and immediately update the local repository to match that content.
• ls - this command is used to list all the files within a folder

6- To edit the index file, I have opened it in notepad

7- I did the editing in notepad, saved my work and then closed the notepad.

8- Return back to Git Bash, I observed the changes that I have made by typing those commands

9- To let Git Bash find all new and updated files and add them, this command has been written.

10- Finally, add your comments and push (deliver) all the changes you made to gitlab (the remote repository)

The figure below explained the local operation of Git

Learning outcomes

From this week and from my little experience with HTML, I have learnt the basic of it. Also, I have learnt some Linux commands that I have never used or heard about them before. This week was more about gaining some IT skills.

References

1- http://fabacademy.org/2019/docs/FabAcademy-Tutorials/week01_principles_practices_project_management/git_mercurial.html

2- https://www.atlassian.com/git/tutorials/what-is-version-control

3- https://git-scm.com/book/en/v1/Getting-Started-Git-Basics