principle&practice and project management week

(Note I am Using windows)

So, to start programming you need an editor to write your code and Version control systems (git) to track your changes on the source code and collaborate with other, for me I use visual studio as editor, you can download it from here,
But what is the git exactly, git is like a mange tool that help us to track our changes for the source code that we are working on it in a series of snapshots, where each snapshot encapsulates the entire state of files/folders within a top-level directory with a full information about all changes that happen and who makes these changes the manger for the team can accept these changes and add it to the main folder or give you some comment to modify on your work and all that happen by this tool,

you can read more about git here

So, for me I don't have git before on my system so I install it from here so,to check if you have a git on your system by opening the terminal and write "git --version" if it recognize the git command and give you like " git version X.Y.Z" so, you don't need to download it

These steps I follow when I download the git tool



I have (git) on my system, I create a folder named fabacademy on my desktop I open it click right click and choses "git bash here" then the terminal window will open with path desktop/fabacademy folder

gitimg

gitimg

but , before I start to use git with GitLab what is gitlab ?
Gitlab is a container that will host your repository (your code) that we usually save our repository on GitLab and clone (save) It locally to modify on it and then send (push) it to GitLab again to deploy it on the web

Back to git and the terminal ,I should identify myself in the terminal by giving it my name and my email that I used it on GitLab account so I type these two commands in the terminal

git config --global user.email ahmadjaara98@yahoo.com

git config --global user.name "Ahmad"

after writing that you will check your identity by writing git config -l



Note from git documentation git-docs:

" The first thing you should do when you install Git is to set your user name and email address. This is important because every Git commit uses this information, and it's immutably baked into the commits you start creating "


After that to secure your connection with GitLab you should use a key (ssh key ) you generate this key locally on your terminal then take that key and put it in your GitLab account like this==>

From terminal,you will generate the public and private keys by typing this:
ssh-keygen -t ed25519 -C "GitLab Key Pair"
 then Copy the public key, and to show it from terminal you should type this:
cat ~/.ssh/id_ed25519.pub

Then go to Gitlab with the key and follow the steps in the picture add the key in the key window and add it and now you are secure



Now I will clone (save) the repository from my GitLab account and have it locally to modify on it



For my website I will use a bootstrap a library uses an html with builtin style without using CSS so much so I download a template from bootstrapmade And add it to the its folder to my local repository and make the cycle of edit:
- git add .
- git commit -m “the massage”
- git push

and this is a screenshot for the process



The bootstrap template is easy to modify on it by knowing the structure of template

The element contains meta information about the HTML page which is helping for browser to find your page easily and it has other important function
The <"title"> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
The <"body"> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc
The navbar element inside the body contain the top bar at your webpage that contain link for your other page
The footer element inside the body contain the bottom side of your webpage that contain in most website this sentence ( © ) and any other link for the webpage




what make this template easy that for each group of line there is a commit that tell you that this element start here and end their so you can modify the element you need to build your webpage for example the hero section that is inside the index.html page which automatically refer to home page and each html file are represent another page in the website



for hero section you can find the gray comment that tell you where it start and where it end so I just modify on it and put my words inside it


the code for the template hero section is like that


I modify on it
and my website hero section look like that

For gallery section which it represent those images


the template code is like this


my modify on the code and add my image


then my website look like that


and by doing that and compare and modify on the code I create my own website ,and for bootstrap I use this website to learn more about it and modify the code getbootstrap

For the Final project:


I have three idea and during the fab journey I will chose one:
My first idea is an alarm ring help you to wake up early by using water spray and vibration device to force you wake up exactly when your phone alarm ring,

My second idea is about a problem that face some people when they walk generally their leg land on floor with an angle and you can notice that by looking for the deformation of their chose that it be so damage from side and the other side don’t have a very little damage so what I think is to but like a device inside their shoes to alert them when they walk in that way and try help them to correctly move their legs on floor,

My third idea is a submarine that move under water to take alive stream for sea and the environment under water and make that stream available for all people to watch it and figure out the beauty of the sea also I can put like a gripper to collect the trach under the water and help the environment to reduce the pollution of the sea,

And this is a simple sketch for the ideas