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:
- navigation bar
- start page
- about me page
- pages for the assignments, mostly in a drop-down menue
- pages to describe the development of the final project
- page with the contact dates
- the creative commons licence
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