Aim:

To learn to design a webpage and host is over
a server solving the problems that come by.

Task 1:
Designing The Website

For Designing the website, I decided to go for website having css and js tags, since I had learnt HTML and wanted to explore more, for that I searched and downloaded a css template and manipulated the css and js tags to get what we see it now. For this I downloaded a template from this website
For both of the things I did seek for help on www.w3school.com, and some of my friends, both of the sources proved to be very helpful i terms of knowledge and development.

The tools that I used and I do personally recommend are listed below:

• SUBlime Text editor : For editing the HTML and CSS files it's actually a good tool where you can visualise the flow of the code through colours, and also it has different presets for various syntax.
  
  



• Corel Draw and Photo Paint:
  These are actually good and softwares with an easy user interface, I prefered to go for these cause I had used photoshop for quite of a time, still few of my images I rendered it from there.
  
  
  
  
  

Problems Faced:

During the process there were several problems that I faced, due to lack of adequate practice few of them
were solved completely and some are left to be solved later, Those Being:-

• Problem:
  The first major problem that I faced was generating a code behind the submit button below the equiry tag of contacts.html

  
  
  
  
  At first I tried to get the code out in html using the input tag and by adding href, but it logically opened
  my mail instead of generating an enquiry.
  The next thing I came to know was local server(Wammp), So i installed wamp server on my and went
  through the processes it generated.
  Through that I came to know that there is another peripheral known as the "Back End Management",
  which is basically creation and management of databases
  
  Wamp included following processes:
  1. Apache: Service That controls execution of code on local host
  2. PHP: Service that connnects the front end files with the database
  3. My SQL: Service that helps in creating and maintaing the database
  
  
  
  
  

  Solution:

  During the process I tried to learn PHP and MY SQl but due to extreme shortage of time, I did'nt prefer
  to learn the entire language, rather just follow the steps to desired outcome.
  
  For this I took help from some of my friends who helped me better understand the steps I did.
  
  The process was simple making a database in local server, then I actually did'nt bother to add the entire code of php into the main document, rather as my friend suggested, I generated a file naming connection.php which acted as a middle man between the database and main page, which intern was benefitial since I did'nt have to change the entire html to PHP .
  
  Then we made a page in php, containing a "Thankyou" message, and had called the connection.php in the same code which parallely sent the data to local database. Following are the images of the test message:
  
  
  
  
  
  
  

  Hence this case was solved, but due to further more issues I have not been successful to upload the code over git lab, since I am unaware of how to connect the local server from the website which is pushed over the web, through PHP(or it is possible or not), So for the time I prefered to stick to the learning further skill rather than pushing all the energy over one, to which I would be returning later.





• Problem:
  The second problem I faced was actually a set of two small issues.
  1st thing i faced was, every content used to run over the fixed header for which after a lot of trial and error method i came to the result, which can be concluded as..
  Solution: "If the content runs over the fixed header, find a class in the header tag which is responsible for the entire alignment, locate it in the style.css and add the following command "z-index='any integer more than'" and the problem gets solved
  
  

  
  
  

  Problem:
  2nd thing I encountered that the fonts that I had used were being displayed on my machine (since they were installed) but when I pushed the website online all these fonts came to basic.
  
  

  
  
  

  The result of troubleshoot was, most of the times it is the firewall of the individual computers, that avoided the command being called on the browser,
  For that I tried various methods like :
  
  1. Copying the path files in style tag in html

  
  
  
  
  

  2. Adding font tags and their paths in style.css and calling te classes in the div tag

  
  
  
  
  

  But none of it proved to be usefull
  Solution:
  So finally I went to try out the google fonts and embade them into the header tag and adding them to css,
  which I further called in the html tag. And it showed the results....
  
  

  
  
  

Task 2:
Understanding and pushing the website over git lab

What is Git lab or version control ?

Version control as its name suggest is a platform that lets you access your entire document and its changes over a passage of time, i.e even if you mess up at a particular step say while giving attributes to some image, (in a long code) considering the error it is physically tiresome to locate and correct the error, This is where version control helps you by saving every backup and change as different versions of same file.Thus on a click you can see where have you fumbled

Git lab is a similar kind of platform that enables version control and also helps pushing you the website to the desired domain (in this case http://fab.academany.org) Also git is a free platform (if every document is public) to host all your work.

How to install Git Lab and Push Your website?

Initially after the completion of my website, I had decided to install Debian Linux but there had been some issues with the reading of image file in my machine.

So after a tideous process of searching the problems, I finally decided to use the ubuntu app, which provides an interface of linux terminal and windows cmd(bash)

There are few setting that are actually needed to be configured before installation,

1.the windows must be updated to latest version
2.enable the package of linux from windows tool

Then after it actually is easy that you can install it from the windows store directly, but in my case it gave me some errors so i went to command prompt and applied command of "lxrun /install", it asks you if you wish to proceede tap "y" and your installation would be done

This Actually proves to be a better solution than dual boot since you have a common platform to edit stuff in your website and push it where as in the case of dual boot you have to edit stuff in windows and push through linux

Once Git is installed there are few simple steps which are to be followed exactly to get the perfect results and make
the work easy.

For configuring git there is a sequence of steps which runs as follows:

1. Install git using the code: sudo apt-get install git --all
   (this installs git packages to your computer, the problems may occure only if the system is not upto date so
   code can be used to fix that(apt-get update)
   
   
   
   
2. Add the following commands to generate a .ssh key(this is unique for each machine)
   
   



3. After that enter the directory where the .ssh file is stored (generally home directory)
   and enter the command "cat id_rsa.pub" {this gives the reading of the ssh key}
   Then go to your page on fabcloud/gitlab and copy the ssh key into the box that appears in {setings/ssh keys}
   Hit generate to pear your computer to git lab through ssh.


4. Then in the bash, going back to the directory add the command "git clone (the link that appears on the
   main page of your git dashboard"
   
   
   
   This results in cloning of the repository


5. Then you can add following commands to configure your username and email
   
   
6. Then there is this set of commands everytime you need to follow:
   
   1. git pull: this updates and merges the changes done online with the folder on your machine (then add your changed folder to the offline repository)
   
   2. git add --all: This adds your changes to the repository (but these are not applied untill you commit)
   
   3. git commit -m "{name for your action}": This will commit your changes permanently with a messages which makes it easy to find
   
   4. git push: This will push your offline repository to the online repository
   
   

The most important here is to manage how the folder have been sagregated and managed, to make it easy to find and analyse the issues, hence for the same I had tried a management as seen here...




During this process I had noticed a file with an extension, after a search on few websites, and going through a lecture by Fiore, I got an understanding as yml, "Yet Another Markup Language", is basically provides a support to the continuous update over the git lab.

This is actually needed since git lab, provides a strong provision for version control, hence for a path and support over CI/CD, there needs a pipeline, that would monitor the updates, and a *.yml file is capable for it.

Hence following ends my journey and understanding with the version control...