INTERACTIVE DESIGN/ PROJECT2_WORKING WEB PAGE

10.10.2023 - 24.10.2023 (Week 07 - Week 09)
TAN JIE YING / 0353959 / BACHELOR IN DESIGN OF CREATIVE MEDIA

INTERACTIVE DESIGN

PROJECT 2 / WORKING WEB PAGE

---

INSTRUCTIONS

---

Project 2/ Working Web Page
This project aims to convert our static prototype from Project 1 into a dynamic and interactive webpage. 

Progress

Same as previously I created a folder that includes three folders and files inside (image, index, and style).

Figure 1.1 Create a folder

My first trial was not ideal. 

Figure 1.2 First trail out

After getting feedback from sir, I realized a mistake I made was I didn't create a div to separate left and right.

So, I created a new project and started in create a div (container) that includes two left and right divs.

Figure 1.3 Progress

Next, I filled out the content in left and right based on my prototype.

Figure 1.4 Prototype

Figure 1.5 Progress

After inputting the content, my initial focus was on refining the layout. I began by adjusting the dimensions of the left and right containers. Following that, I fine-tuned the font size and family for optimal readability. The next step involved adjusting the spacing and positioning of both images and text elements. 

Figure 1.6 Progress

Finally, I adjusted some parts to fit other devices' sizes (992px and 390px).

Figure 1.7 Progress

Final Working Web Page
WebPage

Figure 2.1 Final web page- desktop version

Figure 2.2 Final web page- mobile version

Figure 2.3 Final web page HTML and CSS 

---

FEEDBACK
Week 08

• You need to create a div and class for each section. 
• Use <span> for the lines instead of using <ul>.

---

REFLECTIONS

During this project, I encountered considerable stress as I struggled to effectively separate content into left and right sections, and faced challenges in aligning images and text correctly. Despite multiple attempts, I found myself unable to resolve these issues initially. However, perseverance prevailed, and I eventually managed to rectify the problems. This experience has left me with a lasting awareness of the importance of creating a div (container) before segmenting it into distinct sections. While the process was admittedly challenging, the sense of satisfaction derived from the final outcome made it worthwhile. Moreover, I deepened my understanding of utilizing HTML elements such as div and span, which proved to be valuable knowledge gained from overcoming these obstacles.