Week 1 - principles and practices, project management

1) Plan and sketch a potential 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:

click

https://about.gitlab.com

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.

Download Bracktes from http://brackets.io/

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

HTML uses special bits of programming language called "tags" to let the browser know how a webpage should look. The tags usually come in pairs: an opening tag to tell the browser when to start doing something, and an ending tag to tell the browser when to stop doing something. There are many different kinds of tags, and each one has a different purpose.

Basic HTML website:



<!DOCTYPE html>

<html>

    <head >

        <title>PageTitle<title>

    </head>

    <body>

        <h1>Hello</h1>

        <p>This is my first paragraph.</p>

    </body>

</html>

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.

CSS describes how HTML elements should be displayed. It was designed to separate presentation requirements from content.

Basic CSS structure:



<!DOCTYPE html>

<html>

    <head >

        <meta charset="utf-8">
        <title>PageTitle<title>

    <style>

        article {width: 100%;

            border: 1px dotted red;}

        p.one{ text-align: center;}

        p.two{text-align: center;

            color: mediumaquamarine;}

    </style>

    </head>

        <body>


            <h1>Hello</h1>

            <p>This is my first paragraph.</p>


        </body>

</html>

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:

template-link

html template.zip

css template.zip

back to index