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
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
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
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·"
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.
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
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!.
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"
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"
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.
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.
I downloaded the examples of bootstrap and edited the Carousel template as I will describe briefly in the following steps.
The first step is to use a good code editor, I've used Notepad++
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.
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.
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>
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
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.