INTERACTIVE DESIGN - PROJECT 2
See Zi Yi 0340094
Interactive Design
Project 2 - Microsite
INSTRUCTIONS
LECTURE
Week 8 (03/06/2020)
In today's lecture, we learnt about Bootstrap. It is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.
Below are the Youtube video tutorials on this topic:
No class as we were given time to continue working on our Project 2.
EXERCISES
Week 8 (03/06/2020)
After learning about Bootstrap, we were tasked to experiment with Bootstrap with the following exercise to have a first-hand experience before using Bootstrap for our Project 2. Below is my attempt on this exercise.
 |
| Fig. 1.1 Bootstrap exercise (1/4) |
 |
| Fig. 1.2 Bootstrap exercise (2/4) |
 |
| Fig. 1.3 Bootstrap exercise (3/4) |
 |
| Fig. 1.4 Bootstrap exercise (4/4) |
LINK TO BOOTSTRAP EXERCISE: https://interactivedesign-bootstrap.netlify.app/
Week 9 (10/06/2020)
Today, we started to work on our Project 2 which is to create a layout based on our Project 1. Below are the screenshots of my landing page for Project 2.
 |
| Fig. 1.5 Project 2 (1/5) |
 |
| Fig. 1.6 Project 2 (2/5) |
 |
| Fig. 1.7 Project 2 (3/5) |
 |
| Fig. 1.8 Project 2 (4/5) |
 |
| Fig. 1.9 Project 2 (5/5) |
LINK TO PROJECT 2: https://seeziyi0340094-project2-final.netlify.app/
FEEDBACK
Week 8 (03/06/2020)
Mr Shamsul commented that for my Bootstrap exercise, everything looks fine when viewed from desktop, but when opening from mobile, the width of the content becomes too narrow.
Week 9 (10/06/2020)
No class as we were given time to continue working on our Project 2.
Week 10 (17/06/2020)
Specific feedback: I was advised to fix the point size of the title using media enquiries because it looks too huge when viewed on the phone. Besides, Mr Shamsul suggested that I can create a table for the Youtube videos in the second section.
Online feedback:
Mr Shamsul mentioned that everything looks fine from the desktop but there’s something not right on the footer when I viewed it from his phone. I figured out that the details in the footer should be centre-aligned instead of left-aligned to make it appear neat and balanced.
Week 11 (24/07/2020)
Specific feedback: I have given you feedback so okay.
Online feedback:
Mr Shamsul mentioned that everything looks fine from the desktop but there’s something not right on the footer when I viewed it from his phone. I figured out that the details in the footer should be centre-aligned instead of left-aligned to make it appear neat and balanced.
Week 11 (24/07/2020)
Specific feedback: I have given you feedback so okay.
REFLECTION
Week 8 (03/06/2020)
Experience: Learning Bootstrap was something very new to every one of us, it seems very exciting as well, knowing that we can create something on Dreamweaver with so much of ease as compared to earlier on.
Observation: The lecturers were very patient in explaining about Bootstrap to us and even paused from time to time to ask if we got what they taught in class.
Findings: It was very difficult for me to start off with the Bootstrap exercise as I had to spend time rewinding the recorded Youtube tutorials from time to time. The whole process was very time-consuming.
Experience: No class as we were given time to continue working on our Project 2.
Observation: No class as we were given time to continue working on our Project 2.
Findings: No class as we were given time to continue working on our Project 2.
Week 10 (17/05/2020)
Experience: Today was more of a feedback session as most of us are almost done with our Project 2.
Observation: Most of us are done with our Project 2, as everyone was just touching up their websites for submission. I observed that some classmates' website are not responsive when the screen is minimized.
Findings: I find it very difficult to make the website responsive as it might look absolutely fine when viewed on the desktop but the alignment would look so off when viewed on the phone or when minimized. Therefore, I am very grateful for the existence of media enquiries.
Comments
Post a Comment