Interactive Design Exercise


15/4/20
Yeoh Wen Jun ( 0334234 )
Interactive Design Exercise

LECTURE

Week 1

In the first class, the lecturer started the class with a brief of this module. We also went through the MIB. After that, we had your first lecturer which Mr.Shamsul explained what is a website to us. Several types of website also being introduced by the lecturer. After that, we were given our first exercise. This exercise is to make us more understand how to differentiate the type of website.


Week 2

This week's lecture is about Web Standard. Then we also learn about how the web works and the structure of a web. After that, Mr. Shamsul also shows us some basic to do coding for HTML. He also told us the purpose of attributes, tags in website design.


Week 3

This week we mainly focus on how to add image in HTML. The lecturer also explained the differences between JPEG, PNG, and GIF. <img> will be the main tag and add on src="url" for our image source. We can also add on "alt=" to add a description for the image. 

 

Week 4

This week we have a new challenge, we started to learn about CSS. Basically, CSS allows us to design our web. For example, the layout of our web, background colour, typeface, the colour of the font and so on. We have to understand that CSS rules contain two part which is a selector and a declaration. The declaration needs to sit inside curly brackets and each is made up of two parts which are property and value.

Week 5

This week we learn to design web appearance on CSS. We went to the basic elements such as font-weight, font style, the dimension (width and height), and so on. Border, margin, and padding also being explained by the lecturer.



INSTRUCTIONS



EXERCISES

Week 1

As we had gone through the 9 types of website during this week's lecture, we were asked to define all the 9 types and provide an example for each. We needed to make a slide for this exercise. Below is my slide for this exercise.

Week 2

This week, we learn to do coding on notepad. We were asked to create a website with 3 headings and 2 paragraphs. For the content, we will need to introduce ourselves and what we were doing during MCO. Sadly I forgot to save my work after I show it to the lecturer during the class. This is a very serious careless mistake that I made.

Week 3

In today class, we were asked to finish our first exercise before the class end. In this exercise, we will need to create a simple website, the content will be provided by the lecturer. Below is the content provided by Mr.Shamsul:


Images provided:

Fg.1.0 ITU Logo

Fg.1.1 Triathlon Logo

Fg.1.2 Ironman Logo

Fg.1.3 Cycling  

Fg.1.4 Running

Fg.1.5 Swimming

Fg.1.6 Transition

As this exercise is to let the lecturer know that do we understand how to do HTML, we will not be too focus of the design but the code. While Mr.Shamsul was checking others' code, I realize that I made the same mistake with some of them which are I forgot to at alt for img. I added them before my turn to show my work. Mr.Shamsul says that there is no error for my code which is good. Below is my code for this exercise:

Week 5

As we started to learn CSS this week, we were asked to try out design website layout in CSS. We were given a layout by Mr.Shamsul and we need to follow the layout provided. 

Fg.1.7 Layout Reference

Below is the link to my work and Fg.1.7 shows my progression on Dreamviewer.


Fg.1.7 My progression on Dreamviewer
After that, we were asked to proceed with our last exercise for this module. We will start the projects after this. Again, the content and images were provided by the lecturer. Below are the content and images provided:


Fg.1.8 Photoshop Logo

Fg.1.9 Image article 1

Fg.2.0 Image article 2

Fg.2.1 Main image

Fg.2.2 Image neon

My HTML code for this exercise:

My CSS code for this exercise:



Fg.2.3 My progression on Dreamviewer
After that I upload my file to a hosting website call Netlify. Below is the link to my work:
https://interactivedesignexercise1.netlify.app/


Comments

Post a Comment

Popular posts from this blog

Sonic Design Final Project

Image
Yeoh Wen Jun ( 0334234 ) Sonic Design Final Project  INSTRUCTION Week 12 In the final project, it is different from what we did before. Before this, we normally use the free stocks sound effect to conduct our exercises. But this time we will need to record our own sound effects. We were given a variety of videos to choose from. Also, an audio storyboard was prepared by Mr.Razif. The reason to have an audio storyboard is that if we are going to record sound in a studio, we need to save time as it is not cheap. We need to get ready for all the materials and know what sound we need to create. Audio storyboard and video provided by Mr. Razif: https://drive.google.com/drive/folders/0B4qFCRRLg21uaVVfNTFsMGsyMU0?resourcekey=0-aaijjah6ADp53WbCOfaCsg&usp=sharing Other than sound effects, we were required to create simple background music and some narration if needed. In this case, our classmate Avery Ong was invited to give us a talk about piano.    The tone for different...
Read more

Major Project

Image
  Yeoh Wen Jun ( 0334234 ) Major Project INSTRUCTION Week 1 For the first class of Major Project, we were given a short brief by Mr. Asrizal in the class. It was the first time we can all sit in class together after so long since the pandemic. We went through the MIB and we were told that we can conduct the project in 3 ways. The first is to continue with our dissertation topic, the second is to get a client and the last is to make something with the 17 Sustainable Development Goals.  After the instruction, Mr.Asrizal showed us some seniors' work to give us some ideas. Someone designed a font for Pasar Raya, someone illustrated her own Tarot card, and someone designed a series of collateral. We will need to propose our ideas to Mr. Asrizal in the next class and we started to brainstorm our idea until the class ended. Week 2 This week, the class was separated according to the 4 specializations. The animation group started for the first and we propose our ideas to Mr. A...
Read more

Professional Development Week

Image
Yeoh Wen Jun ( 0334234 ) Professional Development Week Introduction As this is our final semester and we will be graduating very soon, we were asked to learn different knowledge from the people working in the industry and make a report. Hence, we were assigned to take part in the Professional Development Week. Professional Development Week is on week 8 of this semester, and there are many types of workshops provided. In this case, we will need to attend at least 6 workshops which is a total of 6 learning hours. Some workshops were compulsory as it was selected by our Program Director but for the rest, we can choose for ourselves. Below are the workshops that I took part in: Tuesday, May 17 For me personally, I enjoyed the “Financial Literacy for Fresh Graduates" workshop by Mr. Fairuz Izman from MAYBANK the most. The way he presented was really interesting and made me feel like I want to listen more from him as he was sharing his own story as an example. From this workshop, I ...
Read more