Week 1


  • 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.

Final Project Ideas

My Idea is to make a Segment Display by exploring change in physical.

I got this idea as what if each pixel is filled with Liquid.


When we want to Display some number it will open few valves and coloured liquid will be filled.


Multiple servo or solenoid  valve will control the flow of liquid.

GIT Setup

Go to GITs website and download the relevant Version of GIT.


 * Double Click on the Downloaded File and Install it.


 * A pop-up will ask to allow GIT  to make changes to your PC. We trust it. Select YES.


 * Continue installing GIT and keep pressing NEXT.


 * Keep all setting to default.


 And  You have Git installed.


To to an Empty folder and Right Click and start Open git bash in this folder.

This Folder will hold the Website form now onwards.


Type Git init

and this will initialize a empty git repo.


First Task is to setup git configurations for name and email using the following commands.


git config --global user.name "USERNAME

git config --global user.email "EMAIL ID

















No white spaces in git commands. they will show error.


Next We Will generate SSH key to username and link that too GitLab profile.


ssh-keygen -t rsa -C "YOUR EMAIL ID"




Now to Copy the ssh key to clipboard type following command


cat ~/.ssh/id_rsa.pub | clip

Paste the SSH key to your



Now we will get the git repository link and clone into our pc.


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



Sometimes it get necessary to do a git pull inside the students directory to keep updated.

git pull

After the previous step, following commands will push the test site I made to the class archive.

git add -A

git commit -m "Your Reason to commit"

git push

Website Setup- Muse


Adobe Muse Can be Downloaded from This link

I have referred following Tutorials To learn Adobe Muse.

I Know Adobe Illustrator and Photoshop and i am use to the adobe environment.


Following are the Steps of Setting up new site in Adobe MUSE


First got to Files and click on New Site


In second step select Following Settings

The Height and Width of the Site

Fluid or Fixed this depends if we want to optimized for mobile site.

I kept all Default options and pressed Ok


This is how the website layout looks like. For the data that we need on all the pages of the website, we have Master slide. We can have more than 1 Master slide if required.


The master slide is like the template which will repeat it content in its child  pages as well.

Next I have create a basic site as above.

used as horizontal menu and some styles.


I am Following Following Color Theme Inspired form Mercedes Petronas Car Theme


Next I added a Title and tested how it looks like


to export press Ctrl + Shift + E


This will show the site in browser.


I have created few character styles

and Graphics styles.


They work as like templates for selecting how our content will look like.


We have Plan View

Then Design View that shows each page individual

and then the Preview which open inside muse as how will it look in browser.


i prefer Ctrl + shift + E for preview in browser.


Next i exported the content as HTML and all files were exported in a folder.