💧 Project 2

15/04/2020 - 17/04/2020  (Week 8 - Week 10)
NG MEI YING (0340563)
Interactive Design
Project 2

---

INSTRUCTION

---

LECTURE NOTES

03/06/20 (W8): Responsive Web Design (Bootstrap)

Watch Lecture: 

• Week 8 Lecture Part 1 - Intro to Bootstrap
• Week 8 Lecture Part 2 - Intro to Bootstrap
• Week 8 Tutorial Video 1 - Using Bootstrap

CSS Revision Source: 

• https://learnlayout.com/
• https://www.w3schools.com/

---

PROJECT 2: Microsite Design

03/06/20 (W8): Exercise with Bootstrap

There will be no marks counted for this exercise as it aimed to establish a better understanding of the application of bootstrap HTML codes to create a dynamic responsive website that could adapt to any dimension of layout size in the different websites (Chrome, Safari, Firefox...etc) as well as in different devices (computer, smartphone, tablet...etc).

Fig 3.0   Microsite Exercise Tutorial

Fig 3.1   Microsite Exercise Part 1

Fig 3.2   Microsite Exercise Part 2

Fig 3.3   Microsite Exercise Part 3

Fig 3.4   Microsite Exercise Part 4

CLICK ME:  https://sad-bhabha-410310.netlify.app/

FEEDBACK: Mr Shamsul commented that the responsive microsite exercise waa a good attempt. However, carousels height was not responsive when opening from mobile. Other than that, the overall design and arrangement looked fine.

10/06/20 (W9): Microsite Development with Bootstrap

In this project, the students needed to develop a dynamic responsive microsite which is a further development of the prototype landing page design in project 1. The website design should be responsive and able to adapt to various devices and websites with clear information, call-to-action button and so on. Students ought to come out with a responsive microsite within 2 weeks of time. 

Fig 4.0   Microsite Design Process & Solutions.

Fig 4.1   Microsite Development in Dreamweaver

Fig 4.2   HTML & Bootstrap in Dreamweaver

Fig 4.3   CSS in Dreamweaver

Fig 4.4   Upload file in Netlify to generate website link

Fig 4.5   Header with navbar & carousel (Part A)

Fig 4.6   Header with navbar & carousel (Part B)

Fig 4.7   Header with navbar & carousel (Part C)

Fig 4.8   Three introductory driven feature

Fig 4.9   Featuring movies

Fig 4.10   Footer with SNS

Microsite Before Modification:  https://silly-turing-11e420.netlify.app/

Microsite After Modification:   https://cocky-northcutt-0c452b.netlify.app/

FEEDBACK:

• Mr Shamsul commented the responsive microsite design was a good job and there were not many issues with the layout but only the minor problem at the footer logo. 

• Praise had been given on the ability and the willingness to explore more solution and possibilities for the microsite design. 

• Mr Shamsul also commented to remove the blue bar at the footer as it looked weird and change the SNS logo hover colour into blue. Insert the CSS code {overflow: hidden;} for the text in the card to avoid the text overflowing. 

• The size adjustment of the logo was a little too big after the HTML bootstrap modification according to the solution guided by Mr Lun, but it was much better than the previous version.

---

REFLECTION

03/06/20 (W8) 

• Experience: I felt quite excited and also a bit worried about the new lesson of using bootstrap to create a responsive dynamic microsite. I felt excited as I could have a chance to create something really interesting! 🤔 I felt a little worried as I might not able to utilise them well.
• Observation: I observed that the way Mr Lun teaching of the lesson was quite clear to understand and things seemed to be very easy when I saw how he built the webpage using bootstrap steps by steps. I realise that some students had a great talent in creating a good responsive website in a short time, they had a good grasp of using bootstrap as well! 😯😮😲
• Findings: However, things were totally different when it came to me! I had to rewatch the recorded lectures again so that I could have a better grasp on utilising the bootstrap.😫 Besides, I found that every time if there was a new lecture about the new technique to be applied to the website HTML, my previous "stable understanding" about the coding would totally collapse in no time...... As I knew, the different techniques should be connected well as a bridge to build a great website!!! But not collapsing every single time when it came to new lectures 🤣😂😅 My knowledge learning for Interactive Design circumstance is: 🧱Built, 🔨Collapse, 🧱Built, 🔨Collapse, 🧱Built, 🔨Collapse......but I still love this course, so can survive anyway.

10/06/20 (W9) No class

• Experience: -
• Observation: -
• Findings: -

17/06/20 (W10) 

• Experience:  There was no lecture class and students were given some time to continue work on their microsite design as well as to show lecturers the working progress with comments given.
• Observation: I observed that many students were encountering some challenges in their website design as well. Things to appreciate were the lecturers were very friendly to guide students to solve their problems. 
• Findings: I found that some times the solutions suggested by lecturer would not be 100% workable for some certain cases. Hence I needed to find out the solution on my own...but things was that my solution did not really work as well...I was in a total dilemma.