Project Managment

This is the first FAB Academy 2020 weekly assignment, in this Week we had to build a personal website in order to upload our work during the whole processes of FAB Academy 2020.
I build my website from scratch, using HTML and CSS, since this is my first time building a website, it was a challenging and fun process. Here I will explain the process step by step. HTML stands for Hyper Text Markup Language, which used to build the structure for the website, without adding any style constrains to it. To write the code I used Brackets software.
To write the HTML we have to use tags, which exist in almost each HTML sentence, each element contains an opening tag, closing tag, and the content in between them. There are many examples of tags, I will explain each element uses when we use it in the code.

Any page code in the HTML should contain 3 main areas, the HTML element which is the root element of an HTML page, the head element which contains meta information about the document, and the body element which contains the visible page content.

The first step is to open Brackets software and create a new file named index.html which will be the home page source file, at the same time I created 3 additional files each one is for one of the items in the heading list with HTML extension.
In the below picture, you can find the code which I wrote for my website, it still raw without any styling, the first area (head) is to specify meta information for the search engines, and in this stage I created a new file named style.css and linked it in the heading, in order to control the style of the page from this folder in the next steps.
In the second area (body), I created 4 main sections; one for the page heading header, one for the introduction background photo, one for the design stages icons boxes, and the last one for the footerfooter.
For the navigation bar in the heading of the page I used the nav/nav tag. the elements I used in this section where li/li and ul//ul ; The li stands for the list items , and the ul tag for unordered list.
In the second and third sections, I had to give them an ID, to make it easy when I start writing the styling codes. The elements h1 and p stands for the most important heading and the paragraph, respectively.

After writing this code , my website looked like this.

Now, in order to make it decent maker website, I had to use CSS which stands for Cascading Style Sheets, it was a very simple step; in the style file created previously, just write a code for each section in the source files and give it a style formatting, just like font size and type and color, background photo or color, margins, padding, …etc. here is my styling code.

And after this stage, my website start looking like this:

         
Git setup
 
You have to use the gitlab in order to upload your website in the web, our instructor, Nadine gave us a tutorial about using it. Below the steps : 
Step 1 :
download gitlab from this link https://gitforwindows.org/  , and install gitBash only .and open it.

Step 2 :
When you open GitBash, a terminal command will appear, and you should use the following codes:
•	To get Configuration on your username:  git config --global user.name "your username"
•	To Configure your email: git config --global user.email your email
•	To Generate SSH Key for the current pc you using: ssh-keygen -t rsa -C "your email"
•	To Access the public key: cat ~/.ssh/id_rsa.pub
•	To copy your key : clip  ~/.ssh/id_rsa.pub

Step 3 :

Now on the website gitlab.fabcoud.org you have to login using your email and password (generated automatically, you can change it). 
After logging in you should go to ssh key and paste the key you copied from the terminal in the 2nd step and give it a title. Now you have one key ( which means that you can edit your website from one pc).

Step 4 : 

Now all what you have to do is uploading your code files ( the one you wrote in brackets ), using these 3 sentences :
•	To pull your source files from the repository ( to make changes to the files ):  git pull 
•	To add the new files or the updated files to the website :  git add ~A 
•	To Record changes to the repository and a add brief description of what changes were made :  git commit ~m 
•	To upload the files : git push 

You should note that you have to select te directory which you will take the files from, to make it easy you should create new file in the desktop, so your CD cod will contain to places :
 CD desktop
 CD newfile 
          
     

tutorials

The links I used to learn about gitlab:

powerpoint presentation from my instructor
fabacademy tutorials

problems during the upload

When I was trying to upload me website, it was uploaded without any styles, it looked like the first code without the .css file, though I made sure that I uploaded it. I asked my instructor, Nadine, she figured that I uploaded the file named style.css without the folder that contained it, and in the code linked it inside its folder. So, all what I did now is uploading the css folders and the style.css inside it, and it worked perfectly.
another issue showed up during the upload process, it kept in pinding status for a day, its probably because of the load on the server, but the problem has been solved.