Project Management
Creation of a website
The first assignment was to create our own website in order to document our progress. Before creating a website you need to insall a proper code editor. I decided to use Brackets to create my HTML and CSS files, because with this editor I have the possibility to directly see the website modification I make on Google Chrome. I already had some experience wit HTML and CSS, but the w3schools website still helped me a lot creating this website.
Website code
Only the Home page has a differnt layout and style than the rest of the website. I decided to show you the most important part of the Project Management page, because it is similar to all the other pages. Furthermore I only used one stylesheet (CSS file) that contains all the style elements of my website. So, I am also going to show you the CSS code of my page.
In the HTML code there are some comments, explaining the tags and elements I used. The comments start with <!-- and end with --> signs. It is also very important to know that every tag consists of a start and end tag only the <img/> and the <br> tag don't have an end tag.
<!DOCTYPE html>
<html lang="en">
<!-- the DOCTYPE tag defines this document to be HTML5. The HTML tag represents the root of an HTML document and it is also the container for all other HTML elements. -->
<!-- the head element contains meta information about the document. Metadata is not displayed. -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- This meta tag creates the responsive design of our website. The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).The initial-scale=1 part sets the initial zoom level when the page is first loaded by the browser.-->
<!-- with the title element we define the name of the tab of our website.-->
<!-- the link element links the page to an external stylesheet.-->
<body>
<!-- the body element contains the visible page content.-->
<!-- the div tag defines a division or a section in an HTML document and it is often used as a container for other HTML elements to style them with CSS. To style the HTML elements I created diffrent classes.-->
<!-- the nav tag defines a set of navigation links. Here I created a sidebar with a dropdown function using an unordered list.-->
<!-- the ul and the li tag create togehter an unordered list-->
<!-- the br tag is a single line break-->
<!-- with the img element I added a picture in my list-->
<li>Kamp-Lintfort</li>
<!--the next to tags are the title of the img-->
<br/>
<li><a href="index.html">Home</a></li>
<!-- the a tag represents a hyperlink, wich conects this page to the home page. -->
<!-- this is a link to the about me page.-->
<!-- I created a new list inside the sidebar list, to set up the dropdown menu.-->
<li><a href="week1.html">Project Management</a></li>
</ul>
</li>
<ul>
</nav>
<br/>
<div class="pjmanagment">
<h1 class="h1">Project Management</h1>
<!-- the h1, h2, h3 tags are used to make headings.-->
<!-- The p tag defines a paragraph.-->
<p>The first assignment was to create our own website in order to document our progress. Before creating a website you need to insall a proper code editor. I decided to use <a href="https://brackets.io/">Brackets</a> to create my HTML and CSS files, because with this editor I have the possibility to directly see the website modification I make on Google Chrome. I already had some experience wit HTML and CSS, but the <a class="links" href="https://www.w3schools.com/">w3schools</a> website still helped me a lot creating this website.</p><h3 class="h3">Website Code</h3>
<p>Only the Home page has a differnt layout and style than the rest of the website. I decided to show you the most important part of the Project Management page, because it is similar to all the other pages. Furthermore I only used one stylesheet (CSS file) that contains all the style elements of my website. So, I am also going to show you the CSS code of my page.</p>
<p>In the HTML code there are some comments, explaining the tags and elements I used. The comments start with <!-- and end with --> signs. It is also very important to know that every tag consists of a start and end tag only the <img/> and the <br> tag don't have an end tag.</p>
</div>
</div>
</body>
</html>
Stylesheet
The CSS file defines the style of the webpage as I mentioned before. I decided to show you only the style of the Project Managment page, because it consists every important style element. The stylesheet has also some comments explaining the code. They are indicated with the /* and */ signs.
/*the body class contains the main style of my page.*/
font-family: Verdana;
/*the font-family property specifies the font for an element.*/
/*the color property sets the color of a text in HTML.*/
/*the size attribute specifies the size of the text.*/
/*with this property you can set the background color for HTML elements.*/
/*this specifies the style oh the border og a HTML element.*/
/*styles the sidemenu, by defining the height, width, postion and border*/
background-image: url(https://media.giphy.com/media/xTiTnxpQ3ghPiB2Hp6/giphy.gif);
width: 250px;
height: 100%;
position: fixed;
/* the position fixed means that the element is positioned relative to the browser window.*/
/*styles the unordered list. The most importent style element here is the list-style-type, because it removes the bullets of the list intems.*/
list-style-type: none;
margin: 0;
padding: 0;
}
/*styles the color, size and text-align of the list intems*/
text-align: center;
font-size: 12px;
color: white;
background-color: black;
}
/*styles the links in the sidemenu*/
padding-left: 100px;
/*the padding property is used to generate space around an element's content, inside of any defined borders.*/
/*the margin property is used to create space around elements, outside of any defined borders.*/
/* it displays an element as a block element, that means it starts on a new line, and takes up the whole width*/
text-decoration: none;
font-size: 23px;
background-color: black;
color: white;
text-align: center;
}
/*creates a special effect when you hover over the link*/
background-color: lightcoral;
color: white;
}
/* the sidebar floats to the left of its container*/
float: left;
/* float property is used for positioning and layout.*/
}
/*styles the img in the sidebar*/
width: 120px;
display: block;
margin-left: auto;
margin-right: auto;
}
/*styles the dropdown menu. The display elemenet is the most relevant one, because it lets the dropdown menu disapear.*/
font-family: 10px;
display: none;
}
/*this style actives the dropdown menu, when the mouse hovers over the project management link*/
display: block;
}
/*styles the texts of all the pages except the home page*/
font-family: Comic Sans MS;
font-size: 16px;
margin-left: 350px;
margin-right: 50px;
text-align: center;
}
/*styles the headings of all the pages except the home page*/
font-family: Trebuchet MS;
font-size: 30px;
}
/*styles the htmlcode I display on the project management page*/
margin-left: 350px;
text-align: left;
margin-right: 50px;
font-size: 12px;
color: darkgray;
font-family: verdana;
border: 2px groove lightgray;
padding: 10px;
overflow: scroll;
/*this property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area.*/
height: 500px;
background-color: aliceblue;
}
/*styles the csscode I display on the project management page*/
.csscode {
margin-left: 350px;
text-align: left;
margin-right: 50px;
font-size: 13px;
color: gray;
font-family: courier new;
border: 2px groove lightgray;
padding: 10px;
overflow: scroll;
margin-bottom: 50px;
height: 500px;
background-color: aliceblue;
}
/*styles the links in the text I display on the project management page*/
font-weight: bold;
color: coral;
text-decoration: none;
}
/*styles the comments I display on the project management page in the htmlcode and csscode.*/
.comments {
color: coral;
}
/*styles the images on the project management page.*/
margin-top: 10px;
display: block;
margin-left: auto;
margin-right: auto;
}
GitLab
Furthermore in the assignment was written that we had to create a public repository on GitLab to publish our website. A repository is like a folder for your project. Your project's repository contains all of your project's files. Repositories can be public or private. Public repositories are visible to everyone. To create a repository on GitLab you need to create a personal account. After that you can create a new project by using the plus icon in the upper right corner of the navigation bar.
This opens the new project page.
Now you need to enter the name of your project in the project name field. You can modify the project's viewing and access rights for users by changing the visibility level.
After creating your project you need to open your Terminal and check if Git has already been installed.
Use the following command to check if Git is installed.
According to that you should receive a message that tells you which Git version you have on your computer. If you don't receive a message, you need to download Git. Usually Git is already preinstalled on Mac and Linux. Moreover it is important to configure your Git username and email address, because every Git commit will use this information to identify you as the author. You only need to do this once since you are using the --global option. Use the following two commands to set up your Git username and email adress.
In addition you need to generate your public SSH key for authentication. If you don't already have a SSH key by deafault you will need to generate one by using this command:
Note: if this command does not work just remove the -o option and try again. Then you will be asked to input a file path to save your SSH key pair and to input a password to secure your SSH key pair. The next step is to copy the public SSH key, because we later need to add the key to GitLab.
If you have MacOS use this command:
If you have Git Basch on Windows use this command:
Open your Profile Settings by clicking on the last Icon of the navigation bar.
Next click on SSH Keys in the sidebar navigation.
Finally, add your public SSH key to GitLab and give it a relevant title.
The project we made has already been set up in a central repository, so we only need to get a copy of the existing Git respository by using the clone command.
To see the changes you made check your git status by using the following command:
When you check your status be sure that you are in the file that was created when you generated your key. You can find your file by using the ls command and open it with the cd command. The local changes you made are shown in red. These changes may be new, modified, or deleted files/folders.
Now you can add and commit all local changes with these two commands.
At last push your local changes to your online repository with the next command:
To be sure that you published everything, go to your GitLab project and click on CI/CD --> Jobs in the sidebar navigation.
If there is a job, you can be sure that you pushed all your files. Wait untill the job get's the status passed.
Now check if your website is online click on Settings --> Pages in the sidebar navigation.
Here you can find your internet adress. Click on it and check if your website is online.
