29 Jan 2020
Project management is the first building block to build any project. Documenting all the assignments on a personal website is the method that Fab Academy chooses to share the project through the Fab Academy Network. The website will assist you in organizing tasks, managing time, and monitoring the project. Also, allows the instructor to track the progress of your work.
When I read the assignment I was so excited ! because It is my first time making a website.
First of all, I received my GitLab account that was created by Fab academy.
GitLab is a web-based platform and an open source developer collaboration service that allows us to store our repositories and code.
SSH stands for “Secure Shell”. It is a network protocol that provides a secure tunnel to send data from the computer to the server.
I downloaded PuTTY which is a SSH client for Windows to generate the SSH key. To do that :
- Go to www.putty.org.
- Click "here" As shown in the figure below.
- I chose "putty-64bit-0.73-installer.msi" depending on my Windows PC.
After completing the installation:
- Select “RSA” as the type of key.
- Click the “Generate” button to generate the new key pair.
I faced a problem in this step. The green progress bar doesn't move ! but then I noticed there is a written instruction above the bar "Please generate some randomness by moving the mouse over the blank area" I know it sounds weird but it works !
- In the "Key passphrase" field and "Confirm passphrase" field make sure to type the same password then click the "Save private key" button.
- Copy the public key and add it to your “GitLab” page.
I spent a lot of time choosing a template for my webpage because there were plenty of free CSS templates with beautiful designs. Finally ! I chose the HTML template from here My Template .
I liked it so much ! It looks simple and professional at the same time. Also, It has different tabs that I can use for the final project, Home page, About me, contact me and the assignments.
For modifying my web page, I decided to use Notepad++. Actually It is my first time using this application.
Let’s explore it !
First, I opened the Notepad++ website. Then, I clicked on the download tab and chose the last Notepad++ release.
After that, I installed it by following all the regular steps that appeared on the installing window.
I noticed that Notepad++ interface is very simple. I started by choosing the coding language from the menu tab by clicking on Languages > H > HTML
One of the features that I liked on the Notepad++ is supporting Syntax Highlighting.
It is a feature that displays the codes in different colors and fonts. This feature makes the code readable and helps me to understand it.
HTML stands for Hyper Text Markup Language. It is the most used language to create Web pages for display in Web Browsers.
HTML Language includes tags, elements and attributes.
Tag is a special word or letter surrounded by angle brackets < > that indicates to a web browser of how a web page should display. It marks the start or end of an element.
Element is the basic building block of HTML that is defined by a start tag, some content, and an end tag.
Attributes are a modifier of an HTML element type such as width and height of an image. It is always located in the opening tag and consists of name/value like name="value" that provide additional information about HTML elements.
The most Tag that I used are :
To write the document head :
The root element :
The page's content :
section heading :
A heading line :
A paragraph :
A link :
An image :
Unordered list :
Ordered list :
List element :
A block-level container for content :
Also, there are some Attributes that I used permanently :
href attribute of
<a>specifies the URL of the page the link goes to.
src attribute of
<img>specifies the path to the image to be displayed.
height attributes of
<img> provide size information for images.
alt attribute of
<img> provides an alternate text for an image.
style attribute is used to add styles to an element, such as color, font and size.
I create a Master file to start pushing the commit from my local repository and pulling from the remote repository.
- Install GitBash for windows : GitBash.
-Some of Git Command that used to pull and push the site: