Interactive Design - Exercise

  

 Interactive Design - Exercise
Week 1 - Week 4
Hong Ze Yee / 0335678
Bachelor of Design in Creative Multimedia
Task 1 : Exercise

---

INSTRUCTION

---

LECTURE

Lecture 1 :

Week 1 | 27/08/2020

On first week, we have module briefing to let us know what we have tot do throughout the entire semester. Besides that, Mr Shamsul introduce us HTML and CSS for building and designing website. We were assigned to different groups and do the exercise during the class.

Fig 1.1, lecture slides 

Lecture 2 :

Week 2 | 03/09/2020

Mr Shamsul brief us about HTML code and tell us what to do before we start the exercise to make sure that we all clear about the instruction. Therefore, Mr Lun will show us the demo of using HTML code then we practice it during the class and submit into Netlify. 

We learned about how to use HTML code to create content, heading and subheading, adding link and image, opening and closing bracket for every content.

Fig 1.2, lecture slides 

Lecture 3 : Adding image on the web

Week 3 | 10/09/2020

This week lecture is quite similar with last week, we learn how to add hyperlink and images in HTML. Therefore, we were asked to begin our project 1 which is call prototype design. We have to come out with a landing page design.

Fig 1.3, lecture slide

Lecture 4 : Introduction to CSS

Week 4 | 17/09/2020

This week we learn about CSS (Cascading Style Sheet). 

What is CSS?

1. CSS allows you to create rules that specify how the content of an element should appear.
2. For example, set the background of the page, type face, fonts family, fonts colour and so on.

Fig 1.4, lecture slide

---

EXERCISE

First exercise :

This is our fist exercise of learning to use HTML code to create content with heading, subheading, paragraph, order list, list item, alternative as well as add image into HTML.

Below is the link of exercise 1 :

Please come say Hi

fig 1.1, note pad

fig 1.2, open in new tab

 

 

Second exercise :
This is the second exercise for us to practice again what we have learn during the class.

fig 1.3, note pad

fig 1.4, open in new tab

fig 1.5, open in new tab

Week 4 :

The first CSS class exercise.

fig 1.1, CSS exercise

fig 1.2, CSS exercise

fig 1.3, CSS

fig 1.4, CSS

fig 1.5, CSS

fig 1.6, CSS

fig 1.7, CSS 

fig 1.8, CSS

After the class, we were require to build a website. All the resources and prototype are provided in google classroom.

Below is the link of exercise 2 - layout exercise :

layout exercise

---

REFELCTION

At the very beginning, I have zero knowledge on building website and this module is very new to me. The first week of the class are more relax and all about introduction. We begin our first lecture on second week. On the first lecture, I was very focus on the class because I think that it will be very confusing and hard to catch up. However, the first lecture is start from the very basic which is HTML code. I feel very reax and easy. After that, we learn about CSS which is to design the layout of a website. It was very confusing and I felt stressed since I was a bit lose during lecture. I afarid that I will failed this module. So, I did a lot of research and asking other people for help to catch up the lecture. Therefore, I try to search for HTML and CSS code on YouTube to learn it by myself. Overall, it was a bit hard for me but after I have get familiar with it, it should be fun and satisfied.