Project Management
COUNTDOWN
HTML Website
For this week's assignment, we had to write our own website. We have the option of writing it from scratch or download a template and adjust anything in order to attain the required result.
In my case, I preferred to write it from scratch (for two reasons, '1' I wanted to actually learn how to write it, '2' when I tried altering an already written code from a template it just seemed much more confusing) even though the esthetics were not what I actually wanted, but figured I could do them in later on stages if need be. For now, I am ok with it as long as my content is what is required and the purpose of this website is fulfilled.
I wrote my source code in HTML format on an app I downloaded called Brackets and used basic CSS commands to align the text and create the overflow scroll box to showcase the code I have written (found below). I got to know these commands by searching the web, mainly used W3 Schools and the assistance of our FabAcademy remote instructor.
I will have scroll down boxes for each main page and one example page of the duplicates (such as weekly assignment pages)
HTML basic code definitions (used)
HTML COMMANDS
| CODE |
MEANING |
| <![CDATA[<br>]]> |
Break a line (go down) No need to close this command |
| <![CDATA[<hr>]]> |
Have a line seperating horizontally. No need to close this command |
| <![CDATA[<h1></h1>,<h2></h2>,<h3></h3>, ...]]> |
Have titles in between, 1 is the biggest and goes smaller from 2 and on |
| <![CDATA[<p></p>]]> |
Open close Paragraph (enter to go down does not count) |
| <![CDATA[<pre></pre>]]> |
Open close paragraph, all spaces and enters(return) are counted. |
| <![CDATA[<html></html>]]> |
Open and close HTML page. |
| <![CDATA[<body></body>]]> |
Open close body of the page (content). |
| <![CDATA[<b></b>]]> |
Use to make phrase/word bold font. |
| <![CDATA[<i></i>]]> |
Use to make phrase/word italic font. |
| <![CDATA[<u></u>]]> |
Use to make phrase/word underline font. |
| <![CDATA[<ul></ul>]]> |
Open close Unordered list (points) |
| <![CDATA[<ol></ol>]]> |
Open close Ordered list (numbers) |
| <![CDATA[<li></li>]]> |
Open close point/number in lists. |
| <![CDATA[<img src="pickfile" alt="Description">]]> |
Insert an image. |
| <![CDATA[<a href="URL"> HYPERLINK </a>]]> |
Add hyperlink that takes you to a specific URL. |
| <![CDATA[<xmp>]]> |
Mainly used to display command line or code. this exempts what is within these from being read as html. |
Index Page
About Me Page
Main Projects Page
Weekly Projects Page
Git Configuration, Setup and Workflow
GitLab is a form of Version Control System (VCS). A VCS is a system that records changes to a file or set of files over time so that you can recall specific versions later. It allows you to revert selected files back to a previous state, revert the entire project back to a previous state, compare changes over time, see who modified something that might be causing a problem, who introduced an issue and when, and many more options.
In this case I would be using what is called a distributed VCS or DVCS. Where I would have a local file and fully mirror it to the repository on GitLab. This is a two way check whereas I have the file on my local PC and its clone on the repository which then updates my website. This is a safe approach as every update would be saved both locally and on the server of the repository. If anything was to happen to my file on this pc I could always (pull) using the (git pull command) and this reverts my local file to the last version or state it was in (last push). And vice versa, if the server was to be down for any reason (highly unlikely) I can always push back and revert the files to their updated state. This could also allow the option of creating another clone of this file on another PC using the pull command which then makes it even more reliable as multiple files of backup are found in different physical locations. The latter also helps in projects that include more than one person where they could collaborate seperately, keep track of their files, and Updates or (push/commits) could be seen on the repository to see what has been added and when.
In order to operate on Gitlab I had to:
- Step 1:
This step is to download the Git platform to be able to push/pull and cofigure
Version control: git installation and bash
- Windows: http://gitforwindows.org/
- Mac OS: https://git-scm.com/download/mac
- Linux: 'apt-get install git' or 'yum install git'
- Step 2:
This step is to setup and configure Git
The following commands are used for the git setup:
1. First we configure user name and email
- git config --global user.name 'Ada Hein' (your name)
- git config --global user.email adahein@example.com (your e-mail)
2. Then we choose the editor in which we will operate git
- Mac OS: git config --global core.editor vi
3. Mac OS
- echo .DS_Store >> ~/.gitignore_global
- git config --global core.excludesfile ~/.gitignore_global
4. The last two commands are to generate and enable the ssh key
- ssh-keygen -t rsa -C 'your_email'
- cat ~/.ssh/id_rsa.pub
- Paste the ssh key generated to gitlab website on the ssh keys
Step 3:
This step is necessary to be able to write a source code (HTML) that is to be uploaded
Create an Index file on Gitlab
In order to create the index file, follow these steps:
1. On the '+', select New File
2. On the field after the '/', we write index.html
3. Then Press 'Commit changes'
Step 4:
This step is to create a .yml file that the index page requires to be uploaded
In order for the index page to be uploaded, we need to add a .yml
file.
.yml file is a language that informs gitlab about continuous
integration flows. To add the .yml file, we follow these steps:
1. On the '+', select New File
2. This time, on template we choose .gitlab-ci.yml and then HTML
3. Then press 'Commit changes'
Step 5:
This step is to be able to push/pull to Git and web
GIT workflow and upload
1. Create a working copy of a local repository by running the command:
- git clone username@host:/path/to/repository (it can be found in your repository in
gitlab after choosing ssh)
2. cd /path/to/repository (enter the file created by using the cd command)
3. git add * or git add –A .
4. git commit –m 'commit message'
5. git pull (ONLY IF you are working in two different computers,
modifications were made by a 3rd party or the local file has been damaged for any reason)
6. git push origin master
Week 4 Updates
- Index page update
- CSS File Update
<![CDATA[
body {
background-color: rgb(200,200,200);
text-align: center;
font-family: monospace;
font-size: 22;
}
p, h1, h2, h3, h4 {
text-align: center;
font-family: monospace;
font-size: 22;
color: black;
}
h3 {
color: red;
}
.image {
position:absolute;
top: 12%;
left: 50%;
right: 50%;
width: 80px;
height: 80px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 9s linear infinite;
-moz-animation:spin 9s linear infinite;
animation:spin 9s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.scrollmenu {
background-color: #333;
overflow: auto;
white-space: nowrap;
}
.jak {
position:absolute;
top: 27%;
left: 50%;
right: 50%;
width: 120px;
height: 160px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 9s linear infinite;
-moz-animation:spin 9s linear infinite;
animation:spin 9s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.scrollmenu {
background-color: #333;
overflow: auto;
white-space: nowrap;
}
div.scrollmenu a {
display: inline-block;
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
font-size: 22;
font-style: normal;
}
div.scrollmenu a:hover {
background-color: black;
}
</style>
</head>
<body>
]]>