Assignment 1:

principles and practices, project management


Task:

-Build a personal site describing you and your final project.
-Plan and sketch a potential semester project and add it to your website.
-Upload it to the class archive. Work through a git tutorial.

Work

In my studies there was an short introduction in designing and editing websites. That was years ago, so i have to learn the state of the art and learn the basics again.
For the programming I used the open source platform Brackets of Adobe. After testing a few diffrent tools I liked Brackets most of it. It is compatible with all standart prgramming languages and allows various add-ons to make the work more easy. So for example it is possible to install the add-on "Beautify" witch automaticly formats the code to make it more easy to read.
Also Brackets notices missing code and make suggestion. The best feature of Brackets is in my opinion the live-preview. So you can directly see what your site will look like by coding. (Thats only available with the Crome browser. Download it here!) That´s a great help for me as an noob at website designing.
For the design of my website I used the open source Framework Bootstrap. With this toolkit it is possible to create responsive website very quickly. At w3schools.com there is a huge collection of tutorials, references and examples. It includes diffent elements and the associated code.
I started to create a personal frame for my content witch I would like to copy for all my different sub-pages. I took a look at the archiev of the last year and noticed allways the same content on each students website, so i decided to transfer it to my frame. That includes the following elements:
So I started editing the standart html frame:
 <!DOCTYPE html>
 <html>

    <head >

        <title>PageTitle<title>

    </head>

    <body>

        <h1>Hello</h1>

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

 </body>

 </html> 
            
First of all I added the bootstrap frame. here is the css document and the skripts included that will be needed for the other bootstrap drafts. You can find it here.
The first content i added was the navigation bar. Bootstrap offers various drafts. I choose one I liked and copied it into my html code. After that I had to edit the draft to get my personal fitting navigation bar. It incudes the points below in addition of a Link to the offical FabAcademy-Homepage.
After that I added a carousel, becouse it makes the page more dynamic and professionel and is a great possibility to add a lot of pictures without waisting space. I had some problems to make my page responsive. But after some corrections it works well. So now you can see the final product here around. Hope you like it.
Find the Download below.h2

Downloads

Website template (zip) download
Other stuff download
Creative Commons Lizenzvertrag
Dieses Werk ist lizenziert unter einer Creative Commons Namensnennung - Nicht-kommerziell - Weitergabe unter gleichen Bedingungen 4.0 International Lizenz.