Interactive Design - Exercise1&2
1/4/2021 - 17/6/2021 // Week 1 - Week 12
Gan Shin Tung / 0346455
Interactive Design / Bachelor of Design (Hons) in Creative Media
Exercise
Lectures
Instructions
This is the link to my Netlify page: index.html https://ecstatic-wright-3e5a5b.netlify.app
Gan Shin Tung / 0346455
Interactive Design / Bachelor of Design (Hons) in Creative Media
Exercise
Lectures
Week 1:
In the first week, Mr.Shamsul brief us about the module and also the learning
process throughout this module.
Week 2: Website Introduction
What is a website?
- Web document on the internet
- One page or more
- With intended purpose
Types of website
- information website
- Corporate website
- Portfolio website
- Brochure website
- Entertainment website
- Personal website
- Educational website
- E-commerce website
- Nonprofit website
Week 3: UI vs UX & Web Design
Instructions
<iframe
src="https://drive.google.com/file/d/17gAJVt0w293uSw8UPuuvmIg_pbAEcaDD/preview"
width="640" height="480"></iframe>
Exercises
Week 1:
In the first week, we were being brief on the modules only, there was no
exercise given. However, we need to sign up on this website called https://www.netlify.com/ provided by Mr.Shamsul in google classroom.
![]() |
Figure1.1 Netlify |
Week 2: Surveying the possibilities
Our first exercise is to find out 8 for each good and bad website from
https://www.webbyawards.com and
https://www.thebestdesigns.com.
We were put in groups to complete this exercise.
![]() |
Figure1.2 Our Group Excel Sheet |
Week 6: Exercise 1 -HTML File
This week's exercise we had to create the content of a page given by
Mr.Shamsul using the HTML codes we learned in class by using Dreamweaver.
After that, we have to upload to Netlify in order to submit our exercise 1.
![]() |
Figure1.3 HTML in Dreamweaver |
This is the link to my Netlify page: index.html https://ecstatic-wright-3e5a5b.netlify.app
Week 9: Intro to CSS File
Today Mr.Shamsul introduce us on how to create css file. After the lecture, we
did some practice in class with Mr.Shamsul demonstrating along the way.
![]() |
Figure1.4 HTML File |
![]() |
Figure1.5 CSS File |
![]() |
Figure1.6 Preview of CSS |
Week 10: Bootstrap
Today Mr.Lun introduces us on how to use bootstrap to make a website more
efficiently. We did some practice in class along with Mr.Lun.
![]() |
Figure1.7 HTML File |
![]() |
Figure1.8 CSS File |
![]() |
Figure1.9 Preview of Bootstrap |
![]() |
Figure2.0 Preview of Bootstrap |
Exercise 2:
For exercise 2 we have to create a website individually with the provided
images and content provided by Mr.Shamsul.
![]() |
Figure2.1 My HTML |
![]() |
Figure2.2 My CSS |
![]() |
Figure2.3 Final Outcome |
![]() |
Figure2.4 Final Outcome |
![]() |
Figure2.5 Final Outcome |
![]() |
Figure2.6 Final Outcome |
View my website at https://peaceful-mestorf-b4c0b5.netlify.app/
Comments
Post a Comment