Week 1: Principles and practices

Learning outcomes

A. Building a personal site
B. Familiarize with Git processes
C. Plan and sketch a potential project

A. Building a personal site

I used "Bracket" to create the frame set of HTML page with the css docuement as controlling the style of the content.

Originally, i planned to use one of the templates from HTML5 UP!.At the end, i choose to type my own framework for easier amendments.

HTML

Firstly, I try to think of the outline of the webpage that i want by creating different 'div' for separating the content.
For creating the content,'h1' 'h2' 'h3' are used for heading and the larger the number, the smaller the size of words, while 'p' is used for the actual content. 'br' is used for separating the paragraph.

For the image, ' image style="...;" src= "..." width = "..%" height ="..%"' is used. As i want a grey border with thickness, it can be specify under 'style'. 'Src' is for specifying the place of the image file, while width and height can be specify in percentage.

CSS

After outlining the basic content by using html, i linked it with a css file to create the style and position of items. For example, if the item is identified as 'div class' with a specific name,'.' plus the specific name is used in the css file for controlling the style. On the other hand, if the item is identified as 'div id' with a specific name, '#' plus the specific name is used in the css file instead.

'Margin' is used for controlling the poistioning of the whole 'div', while 'padding' is controlling the space within a 'div'.

'Text-decoration' equals 'none' to remove the underline of the link.

'Text-align' equals 'center' to move the text to the center.

B. Familiarize with Git processes

1. In the Terminal, generate a SSH Key by using ssh-keygen -t rsa -C “$your_email”.
2. Use cat ~/.ssh/id_rsa.pub to show the public key.
3. Copy the complete key starting with ssh-rsa and ending with username and host.
4. Copy the public key to the clipboard by using the command in the photo.
5. Once SSH Key is generated, add your public key to the profile.
6. Install Git

7. Navigate to the folder where you want to store the folder with the Archive (cd ~/Desktop/).
8. Clone the archive (git clone git@git.fabacademy.org:fabacademy2017/fablabbcn.git).

9. Input your name (git config --global user.name "John Doe")
10. Input your email (git config --global user.email johndoe@example.com)

Keys to updating the web page

1. Git pull


2. Git status


3. Git add . (add all files)


4. Git commit -m "message about you are uploading"


5. Git push

C. Plan and sketch a potential project

Introduction

I have always wanted to make a lamp with some personal touches. The lamps sold in the market are mostly fixed and cannot add messages on the lamp. Therefore, the idea of making a customizable lamp which is easily affordable has come up.

The goal

Lighting up a meangingful message in the form of calligraphy is the primany goal of the project. Using easily accessible material, such as wood and acrylic so that everyone can make it with affortable cost.

How

Inspirations

Sturlesi Shop
Studio Cheha
Intructables