Interactive Design

April 10, 2020

Interactive Design - Exercises

Week 1-Week 3

Alfie Koh Chen Fong (0340310)

Interactive Design

Exercises

INSTRUCTION

LECTURE

Week 1(15/04/2020)

For the first class of interactive design, Mr Shamsul briefed us according to MIB booklet and explained the assignments we will face. He also had a lecture session about "website" which explained the functions, purpose and the types of different website.

Week 2(22/04/2020)

Today Mr Shamsul explained about how can we create our own websites by using HTML and CSS.
He also simply taught us the purpose of attributes, tags in website design.

Week 3(29/04/2020)
This week Mr Shamsul and Mr Lun were teaching us how to add image in HTML. They had a lecture section explaining the different between JPEG, GIF and PNG and the way of adding them into the HTML. Basically, we use tag <img> followed by an "url" or the link of the image when we want to add image in the HTML. We also learned how to add the description for the image using alt and title.

Week 4(06/05/2020)
This week lecturers introduced about CSS and how to apply it in HTML. Basically we use CSS for the appearance such as background color, typeface, alignment and etc. CSS rule includes two parts which are selector and declaration. The declaration need to sit inside curly brackets and each is made up of two parts which are property and value.

Week 5(13/05/2020)
This week we going to learnt about how to set the appearance of website by using CSS.

EXERCISES AND TUTORIALS

Week 1(15/04/2020)

For this week's topic "website", Mr Shamsul asked us to defined the different types of website and find an example for each types. There are 9 types of website:

1. Informational Website

2. Personal Website

3. E-Commerce Website

4 Corporate Website

5. Portfolio Website

6. Brochure Website

7. Entertainment Website

8. Non-profit Website

9. Education Website

I made a slides that explain all different types of website with an example link for each types.

Week 2(22/04/2020)
For this week, Mr Shamsul taught us how to use notepad to create a website. We made a simple website with 3 heading and each 2 paragraphs which introduce ourselves and our activities at home during this MCO period. This is my website's link:
file:///C:/Users/Alfie/Pictures/Sem%202/Interactive%20Design/html%20document/index.html

Week 3(29/04/2020)

Exercise 1

After this week's lecture section, We were assigned to finish our first exercise for this week in two hours during the class. The exercise is about create a website following the Word file provided by Mr Shamsul. We should follow all the details and appearances of the contents. Below is the content we should follow.

Also, some images were provided by lecturer for this exercise.

Fig 1.01 "Cycling"

Fig 1.02 "ITU"

Fig 1.03 "Running"

Fig 1.04 "Swimming"

Fig 1.05 "USA Triathlon"

Fig 1.06 "Transition"

Fig 1.07 "WTC"

For my first attempt, I had some problems mentioned by lecturer which are <img src ="link"> is wrong because I shouldn't put blank space between "src" and "=". Also, I didn't add description for my images. After editing these errors, I uploaded the files to the google drive and shared with Mr Shamsul.
Below are the codes of my exercise 1 in pdf and the link of the website.

file:///C:/Users/Alfie/Pictures/Sem%202/Interactive%20Design/html/index.html

Week 5(13/05/2020)

Exercise 2
After learning how too add internal CSS into a HTML script, we were assigned to create a layout followed the layout Mr Shamsul posted.(Fig 1.08)

Fig 1.08 Layout design reference

Below are my HTML and CSS file for this layout.
Link to the website: file:///C:/Users/Alfie/Pictures/Sem%202/Interactive%20Design/Exercise%202/index.html

HTML code of layout design

CSS code of layout design

Below are the appearance in the website.(Fig 1.09-1.10)

Fig 1.09 Header of website

Fig 1.10 Footer of website

After that, we proceeded to another exercise. We need to create a website using the content and images provided. Below are the content and images provided by lecturer. (Fig 1.11-1.15)

Embed Pdf of content of layout exercise