Final Project / Final Working Website
YANG YANG/ 0363575
20/06/2025 - 20/07/2024(Week 10 - Week 14)
Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Final Project / Final Working Website
Table of Contents
1. Instructions
2. Final Project
The goal of this assignment is to make your website redesign a reality by developing a fully functional website based on the prototype created in the previous assignment. The final product should reflect all design and user experience decisions made throughout the project, resulting in a polished and professional website.
Based on the redesign proposal and prototypes, we now need to develop the final working website. This site should be fully functional and demonstrate your ability to implement web design principles, front-end development techniques, and best practices in user experience (UX) and accessibility.
Based on the prototype created in Project 2, I wrote the code using Adobe Dreamweaver.
Firstly, I created five pages: animals.html, contacts.html, faq.html, home.html and location.html, as well as an image folder and created a css folder inside DW to facilitate the design of the programming site.
I encountered difficulties at the beginning of the production, in order to create the effect of text and icons overlaid on the picture I fumbled for a long time, and finally in the continuous adjustment and learning to get the desired effect.
In order to achieve the effect of ‘text over image’, I used .banner as a relative positioning container, and .content as an absolute positioning float, and let it full width and height over the image, so as to achieve the effect of text floating over the image.
After creating the body of the site, I also need to create web pages converted to different devices adaptive size layout, through the adaptive code I slightly changed the layout of the images and text, as well as the size of some text.
Final Website Netlify Link:
https://yangfinalproject4.netlify.app/
In this project, I explored many new aspects of web design and front-end development that I had never encountered before. Before I began, I only had very basic knowledge of HTML and CSS. To be honest, I felt quite overwhelmed at the beginning, as everything seemed complex and unfamiliar. However, as I moved forward step by step, I gradually improved through constant trial and error. With the support of my tutor and the helpful guidance I received from ChatGPT, I was eventually able to build a fully functional and responsive website that I’m truly proud of.
At the beginning of the design process, I used the prototype I created in the previous project as a foundation. It gave me a clear visual reference and helped me plan the layout of each web page more efficiently. I started with the navigation bar and then added a banner image, text sections, and the footer. This gave me a solid structure to build upon. One important technique I learned was how to reuse elements like the navigation bar and footer across different pages. This not only saved me a lot of time but also ensured a consistent look and feel throughout the site.
As I continued working on the project, I found myself constantly going back and making changes. I didn’t just follow the prototype blindly—in fact, I revised the layout several times as I realized certain sections didn’t look as good on the actual website as they did in Figma. I kept experimenting with placements, color tones, text sizes, and spacing. Each time I made a revision, the design became cleaner and more user-friendly. This trial-and-error process helped me understand that web design is not a one-step task; it's a continuous journey of adjustment and improvement.
One of the most fascinating techniques I learned was placing text on top of a banner image. I used position: absolute for the text and set the parent container to position: relative, which allowed me to control exactly where the text appeared. To make the text easier to read, I added a semi-transparent background using rgba. This was a brand-new skill for me, and I was surprised by how much of a difference it made. It gave my website a more polished and professional appearance, which boosted my confidence.
Responsiveness was another major challenge. While the website looked fine on my laptop, it became messy on smaller screens—text overlapped, some sections were cut off, and images weren’t aligned properly. I had to learn how to use media queries to adjust the layout for mobile devices. At first, it was really confusing to figure out how padding and margins behaved across different screen widths, but with lots of testing and debugging, I was finally able to make my site adapt well to various devices. This gave me a better understanding of how flexible CSS can be when used correctly.
Another proud achievement was embedding a live Google Map using HTML. In my previous prototype, I had only used a static image as a placeholder. Switching to a live map added interactivity and made the site feel more dynamic and real. I also spent a good amount of time adjusting image sizes and text alignment to make sure everything looked balanced. This taught me how important visual harmony is in web design.
Along the way, I also had to make unexpected decisions. For example, I realized that the font I used in Figma didn’t work well on the real website—it looked too fancy and wasn’t very readable. I decided to switch to a simpler, more web-safe font that maintained the aesthetic but improved legibility. This last-minute change turned out to be a smart decision, and it taught me to prioritize function as well as form in design choices.
That said, not everything went as planned. I wanted to add a hover effect to a cat image, where the image would scale slightly when the mouse hovered over it. Unfortunately, I couldn’t get the animation to work properly, even after several attempts. Despite my efforts, I had to leave that feature out in the final version. Still, I see it as something to learn and try again in future projects.
One of the biggest breakthroughs for me was learning to use Adobe Dreamweaver (DW). At first, I didn’t even know how to open a new file, let alone use the code editor efficiently. But through repeated practice, I slowly became more comfortable with its interface. I learned how to organize my folders, write code with syntax highlighting, and use the split view to preview my work in real-time. By the end of the project, I could confidently use Dreamweaver for essential tasks like writing HTML and CSS, as well as deploying my website locally.
In fact, this project marked my first time learning about and going through the process of basic website deployment. Although I didn’t publish it to a public domain, I learned how to test it locally, organize file structures properly, and prepare the site for potential deployment. Understanding how everything fits together—from writing code to structuring folders and previewing the final product—gave me a complete picture of how web development actually works in practice.
There were definitely moments when I felt stuck or frustrated, especially when things didn’t go as expected. Sometimes, the answers I got from ChatGPT weren’t perfect, so I had to ask questions in different ways or try out alternative solutions until something worked. But in the process, I improved my problem-solving skills and learned how to stay calm and patient. This experience taught me that persistence is one of the most valuable qualities in web development.
Overall, this project was not just a technical learning journey, but a creative and emotional one as well. I gained a deeper understanding of how websites are built, how to use design tools and software like Dreamweaver, and how to debug problems on my own. Even though the final product might not be perfect, I’m proud of how far I’ve come. It was satisfying to see my ideas come to life on the screen, and it inspired me to keep learning and improving in the world of web design and development.
Comments
Post a Comment