Assignments

• Build a personal site describing you and your final project.
• Upload it to the class archive. Work through a git tutorial.

Summary of the week

During this week I registered to GitLab, signed up to FabLabs.io, created this website, and uploaded it to the Fab Academy Class archive.

The week involved a lot of learning, since using Git were new for me. Also, I hadn't use CSS -files before but I wanted to customize my site so, this was another task to find out.

It was easy to feel, how I enjoyed having and updating some website again after a long time. After I had finished the basic structure for my website, I created a template for assignment pages for easy replicating.

FabLabs.io

First of all, I signed up to FabLabs.io using certain email address "my.email@example.com".

Git Setup - GitLab and Git Bash

Secondly, I created an account for Fab Cloud/ GitLab. GitLab is a distributed version control system, which enables me to work locally but also share or "push" my changes to other servers.

Then I installed latest version of Git for Windows. Installation brought me Git Bash, which is the terminal for writing commands to contact Fab Cloud repository.

For Git setup I identified myself in Git using Git Bash by the next commands (same email that I used for GitLab):

git config –global user.name “Firstname Lastname”

git config –global user.email “my.email@example.com”

For pushing changes to a GitLab server, I needed to create a secure communication channel for sharing information. This security is provide by SSH protocol, allowing me to authenticate to the GitLab remote server without supplying my username or password each time. Following GitLab and SSH keys guide and using Git Bash I generated a SSH key pair involving a private and a public keys, and added them to Git.

ssh-keygen -t rsa -C "my.email@example.com" -b 4096

Then I copied the public SSH key to the clipboard, by using the code:

cat ~/.ssh/id_rsa.pub | clip

And added it to GitLab by navigating to the Settings > User Settings > SSH Keys -tab. I pasted the key in the Key -section.

GitLab Repository Clone

On computer, I created to Documents -folder a subfolder called "fabacademy" to store my repository on my computer. Then, in Git Bash terminal, I navigated my way into that folder by typing:

cd Documents/fabacademy

Since this is the first time using the repository, next, in my local machine I cloned the remote GitLab repository, which is my Fab Lab project site in the git.fabacademany site, for making a local copy of it to my computer, to become my local repository workspace:

Then, on Git Bash I typed:

git clone git@gitlab.fabcloud.org:academany/fabacademy/2018/labs/fablaboulu/students/kati-pitkanen.git

I generated index.html -file in Git by taking new file and naming it in the File name -field as index.html (Hypertext Markup Language ). I found the basic html code from w3chools.com and copy-pasted it into the file and hit Commit changes.

Git Commands

For updating new or modified content to my Git repository (archive - GitLab~fabacademy/2018/labs/fablaboulu/students/kati-pitkanen), I used the basic commands as follows:

Navigate to the workingspace repository:

cd [path of the folder] (e.g. Documents/fabacademy/kati-pitkanen)

Dowload the latest version from the remote repository by synchronizing the local repository with the remote repository. This command updates the local repository by copying the content in the remote repository to the local repository:

git pull origin master

Check the changes and list new or modified, but not uploaded content(red color):

git status

Add new content to the temporary repository (Git storage area):

git add . // for all files

git add [file name], (e.g. week2.html) // for one spesific file

Check the files in the temporary repository area (green color):

git status 

Move the files from my stage (index) area to local repository, which makes a record (screenshot) of the current version to store it in the local repository:

git commit -m "add appropriate title"

Merge and synchronize the local repository version with the remote repository version by uploading the content from local repository to the remote repository (Git):

git push origin master

Always, do the pull first, before pushing. This is crucial, and especially when uploading content to a shared repository, where several updates will be merged together, always follow the sequence of pull - add - commit - push.

This is how the commands and workflow will look in Git Bash:

Short for the list of all files – even the hidden ones:

ls -a 

Short for deleting the file from temporary repository (Git storage area) (e.g. if you recognize wrong or too big file):

 git rm --cached "[file name.jpg]" 

Lastly, I created .gitlab-ci.yml -file to the root of my repository, which is a continuous integration (CI) service that is used by GitLab Runner to manage my project's jobs (for auto updating).

I navigated to my Project -page > Repository > Files and added New File, chose the .gitlab-ci.yml" -template and applied a template html and hit Commit changes.

The Website

The structure of the website I like the best was quite clear for me since the beginning. I don't like too much dropdown menus so, I wanted to have a fixed side bar for easy navigation between assignments. Also, I wanted to show and keep some basic information visible all the time while navigating in the website. By our local instructor Iván Sánchez Milara we were recommended to find an appropriate template when starting to design our website, instead of creating it from the scratch. We were introduced with some examples of free Bootstrap templates and text editors. I am familiar with Notepad++ already so, I decided to use that one as a text editor.

Searching templates

I searched recommended templates and started to create my personal website with Bootstrap -template. I mixed two of the templates (Carousel and Product) involving the ideas I wanted to have for my website. However, I didn't succeed in creatng and combining a head bar and sidebar as I wanted them to be.

Due to several modifications and trials, I decided to start from the bottom and also look for some other templates. Then I found Bootstrapious Creative Portfolio template which had the sidebar that I wanted, and I tought that I might be able to modify the rest.

I downloaded the template and started to learn the code. I found that the template had a lot of it what I had tried to create originally so, after changing the template life with the website went way more easier. I learned that part of the modifications I will edit in each single page (mainly content), but some of them in CSS style -file (structure, style, colors). I have modified the original Bootstrapious/Creative Portfolio file "css/style.red.css", and later on changed to use "css/custom.css" -file.

The main modifications on the template

The main changes are about colors, which I wanted to imitate my style and tell something about the creator of the site, so I removed the basic grey as much as possible and used red, fucshia and orange insted in the text, links and pictures. On the index.html-page, I liked the box-structure but not the box-formed images so, I changed them to be circles (border-radius: 50%). I wanted to follow same soft layout in each page so, at the same time, I created a command for slightly rounded pictures (border-radius: 2%)

Further, using Hex Colors I changed the background color of the sidebar to be #e8e6e6 (.body > background-color: #e8e6e6) which in RGB color space (232, 230, 230) is composed of 91% red, 90.2% green and 90.2% blue (platinum) and index.html-page to be white. The background of the box-structure I changed to be transparent (.box masonry > background: transparent). What I left, was a narrow and almost invisible border (box-shadow: 0 0 2px #fffbf9) around each of the boxes which becomes black when hovering over.

I formed a structure and subtitles for weekly assignments page, and with the help of Bootstrap tutorial of CSS and Buttons created step buttons inside of it for easy navigation.

Besides "jump in" to specific subtopic with the help of step buttons, I wanted to add small black jump up buttons inside the assignment page next to the subtopic titles to avoid scrolling from the bottom to up.

The structure of the website

The structure of my web pages will be as follows:

• Topic of the week as a title of the page
• Week number and a starting date of each new week as a subtitle
• Buttons to see the content of the page and jump to a specific subtopic
• Description of the assignments of the week
• Head picture of the week
• Short summary of the week
• First subtopic title and content
• Second subtopic title and content

At first, I named menu titles in the sidebar just as "Week 1", "Week 2" to save space but then I developed the titles to describe what each of the weeks actually contain. It takes more space but gives better experience for a reader.

In the beginning, I had a problem that the space for a page content was too narrow and I had a lot of space on the right side of the page. For this, I found a help on grid class modification from stack overflow forum:

• "The Bootstrap grid system has four classes:
• xs (for phones)
• sm (for tablets)
• md (for desktops)
• lg (for larger desktops)"

and Bootstrap tutorial of CSS and Grid system.

Picking up the matching color combination

Afterwards, in the recitation "How to Make (Almost) Anything Usable" Jan Borchers suggested us to think about carefully the colors and introduces us Adobe Color CC to be sure to pick up the matching color combination (still based on one's own interest). Another site which I found useful is color-hex where you can add #hex colors to find out what color some code is (e.g. #f51410) and how would it look like in different places of website.

I chose the color-combination I liked and will use these colors when creating this website:

#f51410 - main details

#ff2d12 - second details

#f56600 - third details

#e8e6e6 - sidebar background color

#fffbf9 - lighter background color

Something to consider

What I could not find out yet is (in this stucture) that how to make the boxes on the index.html-page to be eqully height. I tried to solve the issue e.g. with the help of Bootstrap tutorial of Grid system and Bootstrapious - Bootsrtrap Tips and Tricks but didn't manage to fix it yet.

Later on, I learned, that it is under the .box masonry settings: