First Assignment
Principles and Practices, Project Management

This assignment is about creating a website to introduce myself and documenting my work throughout the Fab Academy and pushing it to Fab Academy's server using Git

Generic placeholder image

"

The Softwares used in this assignment are Bootstrap, Git BASH, Gitkraken and NotePad++
Using HTML and CSS some modifications were made on the used template from Bootstrap to make it as we need
there were some tasks done using the Command Prompt and Microsoft PowerShell


Getting Started with Git

I will talk about Using Git in this section and BELOW I will talk about the edits I made on Bootstrap's website template template

Git Logo

First of all, You have to generate SSH key for the version controlling,

you have to go to the Fab Academy Gitlab Website sign up and and use your fablabs.io credintals to login so you can access your fabacademy2017 folder·
If it's not available then you can find it in explore labs·
You will find your personal folder in your (project) lab folder based on students ID which was sent to you by mail·
or you can get it from the URL bar after choosing your link in students in fabacademy 2017 archive·
"as an example my number is 422 as you can see in the URL bar of this page·"

Generating SSH key

Using the git bash (download here) you have firstly to check that you don't have a previous SSH key using the command:
cat ~/.ssh/id_rsa.pub
if you have a previous key it will show a lot of letters and signs.
if you don't have any key then write:
ssh-keygen -t rsa -C "yourmail@example.com"
when prompted for location and file name, just press enter to use the default so that the key can be used automatically.
Then enter a Password.






Git Logo

Then go copy the generated SSH key from the location given at the last message after entering the password (try to open it by NotePad ++)
OR you can get it by opening windows powerShell from START menu and enter this code
cat~/.ssh/id_rsa.pub | clip




Git Logo




NOW you need to go to your profile (bottom left) on GitLab, then profile settings then SSH keys then paste it in the Key box and give it any TITLE you want
Now you are ready to push and pull repository!.





Git Logo

Getting Started with GitKraken




Create an account (free) and install it from their Website
I chose to use GitKraken you can use any other software After installing open GitKraken and let GitKraken use your SSH key created above by going to file/preerences/authntication/ and remove the mark on "uselocal SSH agent"





Gitkraken




Copy your project URL from your lab home page in GitLab grom "git specofoc URL"
then go to kraken againand go to file/clone repo. put the location on your comuter where you want to locally copy the remote Repo. and paste the URL you've just copied
Now you can work locally in your folder and do all the stuff you want
NOTE:name your desired home page as "index.html"





Gitkraken




After doing some changes in your folder and going back to the Gitkraken you will see this WIP sign which means that you have work in progress
you have to add a summary explaining what you have done in the box below then press stage all changes (in green) then Press Push.


NOW YOU ARE DONE!

Special thanks to Matthieu Borgognon from at3flo project as his documentation of this assignment really did good help.





Gitkraken


Building the website
using Bootstrap template

in order to build the webbsite you have two options, you can build it from the beginning using HTML and CSS, or you can use a ready template and edit it using HTML&CSS, there are many platform that provides free templates to be used in your website, after doing some searching on templates I've found that Bootstrap templates are the best to me.
I downloaded this Template and edited it as I will describe briefly in the following steps.


The used Template

I downloaded the examples of bootstrap and edited the Carousel template as I will describe briefly in the following steps.


Gitkraken

Code Editor

The first step is to use a good code editor, I've used Notepad++


Gitkraken

Learning HTML & CSS

even if you are using a template you have to learn the least amount of HTML and some CSS to be able to edit in the template.
Codeacademy was really a good idea.


Gitkraken

Editing the template

Using inspector in Mozilla Firefox internet browser (by pressing F12 and selecting the icon of the mouse on the top left corner on the popped up menu) you can see the code of every word and every button on the template when you just put the mouse on it (like shown in the picture), you can edit the code of such a word or a button in your code editor.


Gitkraken

The first change in the template

In the Assignments page I wanted to add logos for the assignments,
most of them was made by Ahmed Saied who was a graphic designer for fab lab egypt and i had them from a website by Fab Lab Egypt and he was OK with that
and here it's after adding the first logo by adding a picture logo as png format in the website folder and changing the code as follows.

Before Changing

         < div class="row">
        <div class="col-lg-4">
          <img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
          <h2>Heading</h2>
          <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
          <p><a class="btn btn-default" href="#" role="button">View details »
          </div></a></p>
          

After Changing

          <div class="row">
        <div class="col-lg-4">
          <img class="img-circle" src="project-management.png" alt="Generic placeholder image" width="140" height="140">
          <h2>Principles and Practices, Project Management</h2>
         
          <p><a class="btn btn-default" href="assignment1.html" role="button">View details »</a></p>
        </div>
        

Gitkraken

the final webiste

by the same way I've changed, removed or added any part on the website using HTML.
and here it's how it looked finally


Gitkraken


Final Project Proposal
Smart Blinds

As I am a guy who can't wake up easily and also I need to sleep in full darkness, I needed a tool that will help waking me up. I noticed that turning the light on or opening the window and letting the light get inside makes me can't sleep even if I was so sleepy. That's why I decided to make a fabable smart curtain which will be more customized to my needs that it will be activated with my alarm to open automatically and make me wake up faster, it cheaper and the most important point is it's enjoying to fabricate it by myself.

It will be consisted of a motor driving the blinds of the curtain with stepper motor driver and it will recieve orders by bluetooth whether it will be opened by the alarm or by the user.


Gitkraken