Week 1 - principles and practices, project management

1) Plan and sketch a potential final project

  • Final Project
  • 2) Work through a git tutorial

  • git - the simple guide "just a simple guide for getting started with git. no deep shit ;)"
  • A very good and easy Tutorial from Roger Dudler. You find the basic commands and the workflow of git.

    Git and Gitlab:

    Gitlab is Version Control System (VCS) helps software developers to collaborate their work together and maintaining a complete history of their work. It offers various management and bug tracking functionalities. The Software helps you to host several git repositories and has an user management to give users the permissions for specific projects.

    Install and configure Git:

    At first I Sign up at fablabs.io. With the same credentials login to git.fabacademy.org. The next steps explain you how to configurate Git:

    Now you configure git with a link to the Git page of the Fabacdemy, you need to create an account and a password. You have to clone the repository to make sure that you have the latest version. Type on your terminal:


    git clone https://github.com/git/git.git

    git config --global user.name "Your Name" git config --global user.email "Youremail@domain.com"

    Once you followed those steps, go to: https://git.fabacademy.org and configurate your SSH-Key:

    Use Git:

    Clone the repository:


    git clone git@git.fabacademy.org:fabacademy2017/fablabbottrophrw.git

    Basic git workflow:


    git pull -> Pull all changes from the Server. git add * -> Add yll your changes. git commit -m "your Commit Message" -> Write an signifikant Message to find changes in history. git push -> Push all of your changes to the Server.

    3) Build a personal website using HTML and CSS

    As an webdeveloper editor for HTML and CSS, I decided to use Brackets. Bracktes is an open source program that allows a live preview of the written code and has an automatic code completion.

    HTML (HyperText Markup Language) is a computer language (markup language) for creating webpages.

    Basic HTML website:


    <!DOCTYPE html>
    <head >
    <p>This is my first paragraph.</p>

    That is how my "aboutme" with the navigation actually look like in HTML and CSS code:

    CSS (Cascading Style Sheets) is a language that describes the style of an HTML document.

    Basic CSS structure:


    <!DOCTYPE html>
    <head >
    <meta charset="utf-8"> <title>PageTitle<title>
    article {width: 100%;
    border: 1px dotted red;}
    p.one{ text-align: center;}
    p.two{text-align: center;
    color: mediumaquamarine;}
    <p>This is my first paragraph.</p>

    This is a section of my style.css source code from bracktes:

    Special Thanks to http://www.w3schools.com/. There I find a lot of useful Tutorials and Vocabulary for HTML and CSS.

    Template source for this website:


  • html template.zip

  • css template.zip
  • Back to top of page

    back to index