Project Management

Navigation
  1. Creating the first Website
  2. Uploading with Git to GitLab
  3. Redesign of the website

Creating the website

Choosing the structure

I intended to create a simple and clean website.
Therefore I made a sketch to get an idea of the look of my website.
I will also explain the basic of my code later on.

A sketch of the design of the website
Coding

First of all I built a structure.
CSS, javascript and image files are stored in their own directories.
The index.html file from a website is the file that is always loaded first.

Directory structure

At the beginning the file looks like this:

                    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Document</title>
    </head>
    <body>
    </body>
    </html>
                    
                

The title tag represents the name of the page that is opened in the browser.
Now the CSS and javascript files have to be linked to the index.html file. This happens with a link and a script tag.
I also added a font from Google.

                
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Majda Suljanovic</title>
    </head>
    <body> 
    </body>
    </html> 
                
            

The next step is to add the structure of the website shown in the sketch above.
For this I used div tags to reproduce the containers in the sketch and CSS classes to sort my code and style it later on:

                
    <body>
    <div class="header">
        <div id="textoverdiv">
            Fundamentals of Digital Fabrication
        </div>
    </div>

    <div class="navbar">
        <div class="home">
            <a href="index.html">Home</a>
        </div>
        <div class="dropdown">
            <div class="dropbtn"><a href="#projects" class="dropdownp">Projects</a></div>
            <div class="dropdown-content">
                <a href="project1.html">Project 1</a>
                <!-- <a href="#">Link 2</a> -->
            </div>
        </div>
    </div>

    <div class="heading">
        <p>About me<p>
    </div>

    <div class="content">
        <p>
            My name is Majda Suljanovic. <br>
            I am 20 years old and studying Medien- und Kommunikationsinformatik <br>
            at Hochschule Rhein-Waal in the fifth semester.
        </p>
    </div>

    <div class="heading">
        <p>My Projects<p>
    </div>

    <div class="content" id="projects">
        <a href="project1.html" id="projectsa">
            <div>
                <img src="img/website.jpg" alt="Code of a website">

                <p class="projectheading">
                    Project 1: Project Management
                </p>
            </div>
        </a>
    </div>

    <div class="footer">
        Created by Majda Suljanovic
    </div>
</body>
                
            

Now it looks like this:

Look of the website

It does not look like the website on the sketch at all.
That is why CSS is needed. I started with the header.
I wanted a picture of the Hochschule Rhein-Waal and a text: "Fundamentals of Digital Fabrication" on it.
Here is the CSS code so far:

                
    body {
        font-family: 'Roboto', sans-serif !important;
    }
    
    .header {
        width: 70%;
        height: 400px;
    
        margin: auto;
    
        box-shadow: 0px 1px 4px #888888;
    
        overflow: hidden;
    
        position: relative;
        text-align: center;
    }
    
    .header img {
        max-width: 100%;
        height: auto;
        
        margin-top: -150px;
    }
                
            

The header should have a width of 70% and portrayed in the middle of the screen-width. The "margin: auto" displays the header in the center.
I wanted the picture to be cut after the height of 400 pixels. So I needed to hide the overflow.
To make it appear more alive I added background shadows.
And now my header looks like this:

Header

I completely rebuilt the sketch now and copied most of the CSS from my header.




Problems

My big problem was that my headings would float next to an element above them:

Heading floats next to an element above

After a lot of trying I found out that there is a CSS option that clears an element from floating elements.
I simply had to add "clear: both" to my heading.

                
    .heading {
        font-size: 25px;
        height: 35px;
        border-bottom: 1px solid #888888;
    
        width: 70%;
        margin: auto;
        clear: both;
        font-weight: 550;
    }
                
            
Screenshot of the website If you want to check out the old website click here: Old website


Uploading the website with Git

The website will be uploaded on GitLab. For that I need Git Bash.


To configure my username and emailadress I use these commands:
Replace "myemailadress" with your real emailadress.

                        
    $ git config --global user.name "Majda"

    $ git config --global user.email myemailadress
                        
                    
After that I have to generate an SSH key:
                        
    $ ssh-keygen -t rsa -C myemailadress
                        
                    
Now I have to get my public key.
This command shows the public key. I copy it and upload it on GitLab: https://gitlab.com/profile/keys .
Copy everything besides your emailadress.
                        
    $ cat /c/Users/Majda/.ssh/id_rsa.pub
                        
                    
Next I create a new project named "majda.Suljanovic" on: https://gitlab.com/dashboard/projects
I also make it public and create automatically a README file.
Then I change to the directory I want to keep my website and clone the project from GitLab.
                        
    $ cd /d/your/link/

    $ git clone git@gitlab.com:Majdaa/majda.suljanovic.git
                        
                    
Now I can switch to the directory of my project.
                        
    $ cd majda.suljanovic
                        
                    
Here I store all of my website files which will be uploaded.
I will check the status of the files and add and commit them. After that I will push them to GitLab:

Code of Git Bash

The following code adds every file at once:

                        
    $ git add -A .
                        
                    
I commit my files with a note what I did:

Code of Git Bash commit

Now I can push my files:

Code of Git Bash push




Getting a link to my website on GitLab

To get my own link on GitLab to my project I did the following:

I go to my repository and add a new file:

GitLab

Choosing the .yml type:

GitLab

Applying the HTML-template:

GitLab

After submitting the file I had to wait circa 15 minutes until my website could be reached.
You can find your own link under: Your repository > settings > pages

GitLab Pages




Redesign
My website looks like my sketch but as I tested it on other devices it appeared to not be very responsive.
I will redesign my website with a framework named Materialize because I want it to be responsive.

First step is to link the framework in the head-tag. The CSS and the JavaScript files are needed. I am also adding the icons:
        
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
        
    
Now I can use their classes to build my website.
First I will add a navbar. For that I have to simply copy the HTML code in my file:
        
    <nav class="blue-grey lighten-3" role="navigation">
        <div class="nav-wrapper container">
            <a id="logo-container" href="#" class="brand-logo">Logo</a>
            <ul class="right hide-on-med-and-down">
                <li><a href="#">Navbar Link</a></li>
            </ul>
    
            <ul id="nav-mobile" class="sidenav">
                <li><a href="#">Navbar Link</a></li>
            </ul>
            <a href="#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>
        </div>
    </nav>
        
    



I want a white color for the clean effect. After that I have to replace their text with my text.
I do not have a logo. Therefore I will simply delete that line and add a dropdown for my projects.
                
        
    <ul id="dropdown1" class="dropdown-content">
        <li><a href="project1.html" class="black-text">Project 1</a></li>
        <li><a href="#!" class="dropdisabled grey-text">Project 2</a></li>
        <li><a href="#!" class="dropdisabled grey-text">Project 3</a></li>
        <li><a href="#!" class="dropdisabled grey-text">Project 4</a></li>
        <li><a href="#!" class="dropdisabled grey-text">Project 5</a></li>
        <li><a href="#!" class="dropdisabled grey-text">Project 6</a></li>
        <li><a href="#!" class="dropdisabled grey-text">Project 7</a></li>
        <li><a href="#!" class="dropdisabled grey-text">Project 8</a></li>
        <li><a href="#!" class="dropdisabled grey-text">Project 9</a></li>
        <li><a href="#!" class="dropdisabled grey-text">Project 10</a></li>
    </ul>

    <nav class="white" role="navigation">
        <div class="nav-wrapper container">
            <ul class="right hide-on-med-and-down">
                <li><a href="index.html" class="black-text">Home</a></li>
                <!-- Dropdown Trigger -->
                <li><a class="dropdown-trigger black-text" href="#!" data-target="dropdown1">Projects<i class="material-icons right">arrow_drop_down</i></a></li>
            </ul>
    
            <ul id="nav-mobile" class="sidenav">
                <li><a href="index.html" class="black-text">Home</a></li>
                <li><a href="project1.html" class="black-text">Project 1</a></li>
            </ul>
            <a href="#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>
        </div>
    </nav>
                
            



I wanted to list my projects but disable them because they are not available yet. For that reason I made CSS classes, changed the cursor and made it look like it is not clickable.
        
    .dropdisabled {
        cursor: default !important;
        color: white;
    }
    
    #dropdown1 li {
        color: white;
    }
    
    .dropdisabled:hover {
        color: white;
        background-color: unset;
    }
        
    
Under the navbar I am positioning a picture.
For that I use a parallax-container:
                
    <div class="parallax-container">
        <div class="parallax" ><img src="img/parallax.jpg"></div>
    </div>
                
            
However the container zooms in the picture and makes it look blurred.
Parallax Image blurred To fix that I needed to add a width of 100% to the picture:
Parallax Image not blurred


For my content I used the container class and columns of Materialize.
It uses 12 grids to subdivide the content. Therefore I can choose how wide my containers should be.
You can learn more about it on https://materializecss.com/grid.html.
                
    <div class="container">
        <div class="row">
            <div class="col s12">
                <br> <br>
                <h4>About me</h4>
            </div>
    
            <div class="col s12">
                <p>
                    My name is Majda Suljanovic. <br>
                    I am 20 years old and studying Media Communication and Computer Science <br>
                    at Hochschule Rhein-Waal in the fifth semester.

                    <br><br>
                </p>
            </div>
            <div class="col s12">
                <h4>My Projects<h4>
            </div>
    
            <div class="col s12 m5">
                <a href="project1.html">
                    <div class="card projectimage" id="project1">
                        <div class="card-image">
                            <img src="img/website.jpg">
                            <span class="card-title">Project Management</span>
                        </div>
                        <div class="card-action">
                            <a href="project1.html" class="blue-grey-text darken-1-text">Project 1</a>
                        </div>
                    </div>
                    <br><br>
                </a>
            </div>
        </div>
    </div>
                
            

How to get the hover effect

I used Javascript respectively jQuery to add CSS effects when the mouse hovers over the whole div.
The problem with only CSS is, that hovering is only triggered when the image is hovered and not the div.
If you hover for example the title, the picture stays grey.

I also needed the ID of the hovered element because otherwise it would have effected every project card.

                    
    $(".projectimage").mouseover(function() {
        var id = $(this).attr('id');
        $("#" + id + " img").css({"cursor": "pointer", "-webkit-filter": "grayscale(0%)", "filter": "grayscale(0%)", "transition-duration": "0.2s"});
    });

    $(".projectimage").mouseleave(function() {
        var id = $(this).attr('id');
        $("#" + id + " img").css({"-webkit-filter": "grayscale(100%)", "filter": "grayscale(100%)", "transition-duration": "0.2s"});
    });
                    
                
                    
    .card-image:hover {
        cursor: pointer;
    }
                    
                
At the end I added a second parallax-container and my old footer.
For the syntax highlight I used highlight.js.