Project Management

Learning outcomes What I will do:

Build a personal site describing you and your final project.
Upload it to the class archive.
Work through a git tutorial.
Sign the student agreement.

Learning outcomes:

-Explore and use website development tools.
-Identify and utilise version control protocols.

I enrolled late in the program and when I started I didn't have access to my GitLab, I don’t have any background about web designing and programming, what I was really excited about that I will share what I will do in this journey, I met with. Yousef and Eng. Hussain to help me with the website, I was trying to link my MacBook with Putty, and they really work hard, and also from my side I was trying to link them but, unfortunately, it does not work. It needs some other Software to use putty on Mac although putty is used widely on Windows Platform. So I switch to use Windows 10 and I started over again.

First, I should understand what are the Experts talking about. I google about Version Control System VCS band I found that it is a software that helps software developers to work together and maintain a complete history of their work.
Listed below are the functions of a VCS:
It allows developers to work simultaneously.
It does not allow overwriting each other’s changes.
Maintain a history of every version.

Then I search about SSH Key is typically used to log into a remote machine and execute commands, but it also supports tunneling.

Putty is a GUI terminal emulator for Windows with a built-in SSH client for remote terminal sessions.

GitLab is Gitlab is a service that provides remote access to Git repositories.

In addition to hosting your code, the services provide additional features designed to help manage the software development lifecycle.

And it is the only one that is open source itself and self-hosted.

So I need to do:

-Download Putty for Widows.
-Generation of SSH Key.

Download Putty

Sign up to GitLab

After I switched from FabLab Bahrain to Talents lab because it is near to my place. I really liked the environment in FabLab Bahrain and the staff over there. They motivated me to enroll in this cycle. Recently, I got an email from GitLab informed me that I am now a Maintainer.

Add the SSH Key to the GitLab from the Setting.

Create Master file:

Creating a new gitlab-ci.yml for my HTML websit.

Building Website

I choose a template that was recommended to me, it was basic but with many tabs, I found some difficulties in how to edit it with Dreamweaver I pushed only the first page then, I askd for help to change the template to a more simple one, I got the support form Eng. Salman AlOraibi, he created a new branchc with a new template, also he recommended me to use Atom instead of Dreamweaver, especially it is my first time to code and program a website. For the new website, it is easier for me. It is a Bootstrap free template. The Bootstrap is a potent front-end framework used to create modern websites and web apps. It is open-source and free to use yet features numerous HTML and CSS templates for UI interface elements such as buttons and forms. Bootstrap also supports JavaScript extensions. I found tutorials about the HTML and Bootstrap on W3shool. And I used the links below to helped me with coding. also the cheat sheet for HTML it is useful too.

W3School-HTML-

W3School-Bootstrap-

The old template.

The new template.

Starting editing and pushing the web site

The First push and I use Dreamweaver for editing.

Git Workflow :

Before we start working with Git commands, it is necessary that you understand what it represents.
Repository: A directory or storage space where your projects can live. Sometimes users shorten this to “repo.” It can be local to a folder on your computer, or it can be a storage space on any online host. There are four fundamental elements in the Git Workflow.

Working Directory.
Staging Area.
Local Repositor.
Remote Repository.

here are some common terms used in Git, which you must know:

Clone operation creates the local instance of the repository.
Pull operation copies the changes from a remote repository instance to the local repository.
Commit operation holds the current state of the repository.
Push operation copies changes from a local repository instance to the remote repository.
Fetch remote files and zip packages directly into your project.

I did a mistake while uploading the pictures to my folder before I resized them.
Then I pushed the page to uploaded, but an error message popped up
I directly searched for solutions, and tried them all, but nothing worked.
After that I contacted our mentors, they told me I should resized all the photos and deleted all the old ones.

Then I used four programs to resize the photos: Microsoft Office Picture Manger, GIMP2, and ImageResizer.

After that I tried to send all the photos to Mail recipient, and copied them to my folder, but I lost the resolution and the measurements.I tried as well to add plugin to Atom, but I didn’t find the resolution as I want.
What I was looking for, compress all the photos and keep them in good resolution as much as I can, what I finally did? I ask our Mentor, and he recommended to use what’s app! It is the simplest way, and it worked!. All the photos between 60-150kb and rare are 200kb

The workflow of Git.

You modify a file from the working directory.
You add these files to the staging area..
You perform commit operation that moves the files from the staging area..
After push operation, it stores the changes permanently to the Git repository..

With Atom you can do all the above with out opening the get bash.

Save the changes after edit the Code.

On the left Unstaged Changes tab click Stage All..

You will see the files go down to Staged Changes tab..

Write a commit message to Master (describe shortly what did you do) , then click on commit to master the blue button..

Press Fetch in the lower tab and wait a moment..

Then click Push.

Editing by using Atom

am still learning and adding more features to my first web, but I prefer to keep it simple and easy to access.

What I have learned about Html:

All HTML documents must start with a document type declaration: <!DOCTYPE html>..
The HTML document itself begins with <html> and ends with </html>..
The visible part of the HTML document is between <body> and </body>..

Nested HTML Elements:

The <html> element defines the whole document..
It has a start tag <html> and an end tag </html>..
Inside the <html> element is the <body> element..
The <body> element defines the document body..
It has a start tag <body> and an end tag </body>..
Inside the <body> element is two other HTML elements: <h1> and <p>..
<br> is an empty element without a closing tag (the <br> tag defines a line break)..
You can use the style attribute to specify the width and height of an image..

Playing a YouTube Video in HTML

To play your video on a web page, do the following:

Upload the video to YouTube
Go to share and select embded link
Use the width and height attributes to specify the dimension of the player

For more you can vist W3school it is useful website to learn more about html.

When I want to shake the Index images I search about the cde and follow it step by step as here.

HTML sheet cheat

Techinical problems

The characters show up when I push any page by using Atom, after searching and trying many suggestion solutions, I fixed this problem in some pages by editing the same page using text edit, then saved it, staged the changed and committed by Atom, finally, I pushed the pages using Git Bash.

Download file here:

Doaa's Student Agreement