Assignment 1 - Week1 - Website Development and uploading

Of course nowadays website development is easy to learn from the internet , and i have to learn it to make my own site that i will upload my assignments of fab academy on it.

 

First: html&css - Second

• In the begining I draw an idea for the website and the menu bar

 

 

• Then i searched google on how to make a website and i find that i can use dream weaver for writing the html code and add css code that make the style of the website. here is the link of the tutorial that i used http://www.using-dreamweaver.com

 

 

• after installing dreamweaver and opening it , it shows that window that serve many options .

 

 

• I created a new html file and name it index in title

 

 

• then i saved it as index in my site folder >> html&css

 

 

• Now i'm ready to write the html code , but nowadays no one write the code from the begining so i decided to search for a good suitable free template that i can use its code and change it to the design i want , and thanks to the creator of that template, here is the link http://www.html5webtemplates.co.uk/templates.html

 

 

• And here is a picture for the free template

 

 

• I downloaded the zip file and extracted it in my sites folder (html&css) and opened the index.html file with dream weaver

 

 

• After opening the index.html in dream weaver , I edited the code and remove the useless parts and start to modify it to my desired design and that of course after i learned basic idea of html and how to deal with it.

Here is after editing some lines.

 

 

• I tried to make the tamplate more clear and easy for the viewer, so i changed a lot of things in the free template , i just took the core code to build my design upon it .

 

 

• I used html and css only to make it so simple and to load more quickly

And here is a screenshot for a part of the css style

 

 

• In the assignments section i made the code as a template to ease adding the projects and assignment decumentation in the future by coping the code to a new html file .

 

 

• I prepared more than an assignment page html file and linked them to the main assignment page but for now i made the links commented so that not to be active or seen in page to make it easy to modify or add new assignment quickly in the future.

 

 

• After long time of learning from tutorials how to edit and modify the html code of the free template , and managing to make a simple and practical website here is the final view of it.

 

Second: uploading - First

• After I finished writing every thing, it was time to start using GIT, I'm using Windows 10 so i downloaded it .

 

 

• I used this tutorial inchoo to create SSH key with git bash, it was so easy.

 

 

• Then i open git bash and start typing the tutorial instructions.

 

 

• Then i downloaded smartgit for windows .

 

 

• After entering the SSH key in my fab academy profile .

 

 

• I took the link of SSH link in the fabacademy2016 / fablabegypt.

 

 

• Then i started smartgit and proceed the first steps and pasted the SSh link .

 

 

• I copied my site folder to the specified repository folder then i pressed sync. after pressing stage and commiting for the first push.

 

 

And voilà :) .