FINAL PROJECT

Week 10-Week 14 (25/06/2025-28/07/2025)

Jennifer Michelle Hiendrawan/0374682

Interactive Design/Bachelor of Design (Honours) in Creative Media

Final Project 

---

TABLE OF CONTENTS 

1.Lecture

2.Instructions

3.Task

4.Reflection

---

LECTURE

On the other blog

---

INSTRUCTIONS

---

TASK

Brief

We must build our own website based on the redesign proposal and prototype. This website should be fully functional, demonstrating our ability to implement web design principles, front-end development techniques, and best practices in user experience (UX) and accessibility.

WEEK 10 PROGRESS

Before creating the website, I created a folder and placed all the photos I needed into that folder. This week, I created the website from the first page and started making the navigation, drop down menu, adding the logo, and also creating the search bar. I also added the font that will be used in my website in HTML and CSS.

Fig 3.1 Home Page HTML and CSS

Here is the result

Fig 3.2 Result

After that, I started creating the first section for the homepage. Here, I added a background, text, and also a CTA for the first section. Then I also adjusted the size and tidied it up through CSS.

Fig 3.4 Home Page HTML and CSS

Below is the result. I created a hover effect for the call-to-action button. When the mouse is hovered over the button, a different color (a darker color) will appear. For the search bar, I designed it to look like we can really type there.

Fig 3.5 Result 

After that, I continued to create the second section for the home page. Here, I inserted several photos that I had placed in the folder and arranged it in alignment with the same size in the CSS. I also added some text and background color.

Fig 3.6 Home Page HTML and CSS

Below is the result.

Fig 3.7 Result

After that, I continued to create the third section. Here the concept is more or less the same as the second section, which is to arrange the photos neatly. However, in this section, I added text below the photos, background text, and also included a link in the text 'click here' (I also added a hover effect).

Fig 3.8 Home Page HTML and CSS

Below is the result. I made a hover effect on the text 'click here' to turn it green, and when clicked, it will display a link containing the news articles.

Fig 3.9 Result

Next, I created the fourth section. This was a very difficult section because I have to make a carousel, which means I also have to create JavaScript. I tried to create the carousel several times and it didn't turn out well. At times, I got it working, but it couldn't be moved to the right or left, it couldn't be resized, and so on, which left me very confused while making this. At that time, I also managed to create the carousel, but the number of slides per photo was incorrect, among other things. However, I did not give up and kept learning why the carousel couldn't move, until I finally solved the problem and created the HTML, CSS, and also the JavaScript. Below is the progress.

Fig 3.10 Carrousel Progress

Below is the html, css, and Java Script

Fig 3.11 HTML and Java Script Home Page

Fig 3.12 CSS Home Page

Below is the result.

Fig 3.13 Result

Next, I created the last section on the home page, which will be used and always present in every section, which is the footer. Here I included some information and created several buttons that, when clicked, can connect to another page or a link. I also created hover effect for each of the button.

Fig 3.14 HTML and CSS Home Page

Below is the result.

Fig 3.15 Result

WEEK 11 PROGRESS

I continue to make the first section of the second page. (about page, group)

Fig 3.16 HTML and CSS code

Fig 3.17 Result

Then i continue to make the second section for the about page. I think this part is very difficult because I have to create a photo that can be flipped. At first, the photo could be flipped, but it couldn't be moved. Then, the photo could be moved, but the result of the flip was not in the exact same position as the original photo. I was very dizzy and confused. I tried many times but failed, until finally I asked Mr. Shamsul and he said not to use 2 div containing id and class, delete one of it. In the end, it worked well.

Fig 3.17 HTML and CSS code

Below is the result.

Fig 3.18 Result

Then i continue to make the third section for about page.

Fig 3.18 HTML and CSS code

Below is the result.

Fig 3.19 Result

Then i continue to create the fourth section for about page which is the carrousel again. Because I have learned from my mistakes in the previous carousel, I can complete this carousel more quickly.

Fig 3.20 HTML and CSS code

Here is the result.

Fig 3.21 Result

Then i continue to make the first, second, and third section of the third page (business, health care)

Fig 3.21 HTML and CSS code

Here is the result.

Fig 3.22 Result

Then i continue to make the fourth section of the third page, where i make the grid for each of the hospital.

Fig 3.22 HTML and CSS code

Below is the result.

Fig 3.23 Result

Next i continue to make the first, second, and third section for the fourth page (sustainability, sustainability report).

Fig 3.23 HTML and CSS code

Below is the result.

Fig 3.24 Result

Next i continue to make the section for the fourth page 

Fig 3.25 HTML and CSS code

Here is the result.

Fig 3.25Result

Last i continue to make the first, second, and third section for the contact page. For the second page, I think it's very difficult because I have to embed a map from Google Maps, and for the third page, I think it's very difficult because I cannot get the correct size, the position is always wrong, and so on. However, it finally got resolved after several hours of working on it and studying the mistakes.

Fig 3.26 HTML and CSS code

for the map, I added some js code to make it work well

Fig 3.27 js code

Here is the result.

Fig 3.28 Result

Then i created the last page, which is the link. I added hover also.

Fig 3.27 HTML and CSS code

Below is the result.

Fig 3.28 Result

Here are some of the progress or trial and error I faced while creating certain pages, where sometimes the layout was completely messy, the design was really bad, the text or images could not be moved at all, and so on. It took a long time to solve all these problems. I also happened to lose all my coding for a full page because I accidentally closed the page without saving it first, which made me left behind compared to my friends. When i try to redo it, the process is not that easy. Often I find it confusing how to move text or elements left or right because of the margin, padding, and others that can't be, it turns out sometimes due to a small mistake that I was not careful about (writing error) or also sometimes because of code in another part that causes it not to move. This is resolved with carefulness in working.

Fig 3.29 Progress

Fig 3.30 Progress

After finishing the layout neatly for the laptop display, I continued to create the media queries so that the design would be responsive on various types of devices. Here are some of the results. I had a lot of difficulties making each page responsive on every device size because I didn't know why every time I wanted to fix or tidy up the media queries for other device sizes, the responsiveness for the other designs would also change. In the end, I worked on this responsiveness for several days and managed to tidy up each page.

Here are some of the media queries. I made the media queries for all different size of device, so that the design can be responsive in any devices.

I improved some of the designs from the proposal that I had made so that they look neater and better organized. Overall, all the colors and layouts are the same as in the proposal. The only adjustments are in the carousel section which now looks neater (also with buttons that look more professional), and in the grid for the hospital section which I made tidier. I also removed some text decorations, namely the underline under the text that has links, because it looked unprofessional, so I replaced it with a hover effect to keep it clearly visible. For navigation, I also improved the dropdown menu to become a professional and tidy dropdown menu of a large website, because previously in the proposal it was still not tidy. 

The difficulty I faced was that sometimes I could spend a lot of time working on 1 section, especially if it was for 1 page. I addressed this difficulty by continuously studying coding, asking Mr. Shamsul during consultations, and asking friends, so that with almost every day I worked on this project, I became more understanding about coding, where my mistakes were, and how to solve it.

https://jennifermichellefinalproject.netlify.app/

Google drive link

---

FEEDBACK

Mr. Shamsul said to always remember to use only 1 class or id, do not use 2 so that the layout does not get messy and can be arranged neatly. Mr. Shamsul said that the design is already good and consistent.

---

REFLECTION

Experience

I gained a lot of new experiences after working on this project. I learned how to create a good, consistent, and responsive website design. I learned what makes a website considered a good website. I learned to build a website from scratch, organizing text and images one by one, and also learned about the coding elements that really helped me in completing this final project. I faced a lot of difficulties while working on this project, but fortunately, I managed to finish it on time. This project sharpened my thinking skills because every time I worked on a section, I would encounter problems where images or text could not be moved, things were very messy, and so on, which required me to think about how to make it neater and be corrected, if there was something affecting it making it immovable, and many other issues.

Observation

I observe that making a website must be really consistent. If we want to make the images square, then everything must be square, there should be no round ones. Additionally, making a website must be responsive so that it looks neat on all devices. Besides that, it turns out that making a website takes a very long time because there are many trials and errors, but I am grateful that I could finish it well.

Findings

For me, coding is actually quite fun and challenging. I have learned a lot through this project about coding and how the creation behind a very good website works.