26/11/24 - 04/01/25 (Week 9 - Week 14)
Andrea Choo Qin Hui (0366959)
Andrea Choo Qin Hui (0366959)
Interactive Design / Bachelor of Design (Hons) in Creative Media
Final Project
INSTRUCTIONS
FINAL PROJECT
Website Redesign Proposal
The objective of this assignment is to bring your website redesign to life by
developing a fully functional website based on the prototype created in the previous
assignment. This final product should reflect all the design and user experience
decisions made throughout the project, resulting in a polished and professional
website.
Here is my the prototype for my website that I plan on remaking in code.
Figure 1.1 Website Redesign Prototype in English PDF
Figure 1.2 Website Redesign Prototype in Bahasa Melayu PDF
Coding
Since my website has multiple pages, I watched a Youtube tutorial to help me proceed
before I started coding.
Figure 2.1 How to create multiple webpages & link them together in Dw
After fully understanding everything, I started to create separate files for each
webpage.
 |
| Figure 2.2 All the files |
Having both the HTML and CSS in one file would be very messy so I decided to link
them together so it would be easier for me by watching this Youtube tutorial.
Figure 2.3 How to link CSS to HTML on Adobe Dreamweaver
 |
| Figure 2.4 HTML for Home Page |
 |
| Figure 2.5 CSS for Home Page |
Figure 2.4 How to make your website multilanguage
After watching this video and also some help from my friends, I figured out how to
make my website multilanguage; although it did take me quite some time to actually
get it correct.
I didn't know how to remake the lines I did on the prototype as shown below:
 |
| Figure 2.5 Line in Prototype |
So I decided to just replace it with a line break instead.
 |
| Figure 2.6 Line Break in Code |
I wanted to have a favicon like every website for my submission, so I watched a
Youtube video on it.
Figure 2.7 Youtube Tutorial
I first went on Google to find a PNG of what I wanted as my favicon, Then going onto
favicon generator.net, to make the PNG into a favicon and putting it into my images
folder.
 |
| Figure 2.8 Favicon |
 |
| Figure 2.9 Favicon in Code |
 |
| Figure 2.10 Favicon on Website |
As I previously said in Project 2, I wanted to include an interactive map in the 'Contact
Us' page so I followed this tutorial below:
Figure 2.11 Insert Google Map into your Website
 |
| Figure 2.12 Coding for the map |
Final Project
Click here to view the final project: https://andrea-finalproject.netlify.app/
Brief Report
Working on my website was both challenging and rewarding. Since coding isn’t really my strong suit, this project pushed me way outside of my comfort zone. Even though it was difficult, it helped me grow and taught me the importance of persistence and asking for help when I needed it. After completing the prototype in Project 2, I already had a clear idea of what I wanted the final version to look like. But when it came to actually building it, the technical aspects were pretty overwhelming. My plan included using basic HTML, CSS and JavaScript for structure and interactivity, but even starting with those basics felt intimidating because I didn’t have much experience with coding. There were moments when I doubted if I could actually finish it, but I was determined to make it work.
Since coding doesn’t come naturally to me, I relied a lot on external resources like YouTube to help me figure things out. Even with that, there were plenty of moments where I felt really frustrated. One of the toughest parts was creating a responsive design that worked well on both desktop and mobile devices. At first, I thought it would be simple, but it turned out to be way more complicated than I expected. It took a lot of trial and error to make sure the layout and functionality worked properly on different screen sizes. Debugging errors was especially hard because I didn’t always know where to start. Each mistake felt like a setback, but over time I learned to break problems down into smaller, manageable pieces.
One thing that really helped me keep going was the support and encouragement I got from my friends who had more experience with coding. Whenever I hit a roadblock, they were always there to give me advice or show me how to fix things. For example, when I struggled to create a smooth navigation bar, one of my friends showed me how to use JavaScript to make it interactive. Their help didn’t just fix the issues I was having—it also taught me useful tips and best practices that I could use for other parts of the project. On top of the technical help, their encouragement motivated me to keep going, especially during the times when I felt like giving up. Having people who believed in me and reminded me why I started made a huge difference. It also showed me how important collaboration can be, even in projects that seem like solo efforts. Asking for help isn’t a sign of failure—it’s actually a step toward improving and learning.
Building the website itself was a slow process that required a lot of tweaking and revising. I started by setting up the basic structure with HTML. Once I had that in place, I moved on to styling the site with CSS. This part was actually pretty fun because I could see my ideas taking shape through things like color schemes, fonts, and layout adjustments. But I did run into issues with keeping everything consistent across the different sections of the site. There were a few spots where no matter what I did, I couldn’t get it to match the prototype exactly, which was frustrating. I had to go back and rework my CSS multiple times to get it as close as possible.
Adding interactivity with JavaScript was another steep learning curve. To make these features work, I had to rely heavily on online tutorials and code snippets from the developer community. It was super time-consuming, but it felt amazing when I finally got those elements to function the way I wanted. Each small success gave me more confidence and pushed me to keep going, even when things got tough.
Looking back, one of the biggest lessons I learned from this project is the value of perseverance. There were so many moments when I felt stuck, but taking a break and coming back with a fresh perspective often helped me figure things out. I also learned that breaking big tasks into smaller steps made them less overwhelming. Instead of focusing on how much I had left to do, I could focus on making progress one step at a time. Another important takeaway is how useful online resources can be. Without platforms like YouTube, I wouldn’t have been able to get through this project. They didn’t just give me the technical guidance I needed—they also reminded me that a lot of people face similar challenges, and it’s okay to struggle. Seeing how willing the coding community is to share knowledge and solutions was really inspiring and made me feel less alone.
Finally, this project taught me to accept that things don’t have to be perfect. My website isn’t flawless, but it’s a product of all the hard work, learning, and growth I put into it. Finishing this project gave me a greater appreciation for how complex web development can be, but it also gave me more confidence in my ability to take on similar challenges in the future. In the end, developing my website was a transformative experience that made me confront my weaknesses and grow in ways I didn’t expect. Even though coding isn’t something I’m naturally good at, this project taught me the importance of persistence, resourcefulness, and teamwork. With the support of my friends, countless hours of effort, and a determination to succeed, I was able to create a website that I’m genuinely proud of. This project wasn’t just an academic milestone for me—it was also proof of what can be achieved with dedication and a willingness to learn.
Comments
Post a Comment