Interactive Design: Final Project
21/11/2024 - 4/1/2024 (Week9-Week14)
Amber Tan Jing Jing (0372746)
Interactive Design / Bachelor of Design in Creative Media / Taylors University
Final Project
Table of Contents
1. Lectures
2. Instructions
3. Final Project
Lectures
Lectures have been completed in Exercises.
Instructions
Final Project
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.
Building on our redesign proposal and prototype, we are now required to develop the final working website. This website should be fully functional, demonstrating your ability to implement web design principles, front-end development techniques, and best practices in user experience (UX) and accessibility.
Based on the prototype I created in Project 2, I wrote the code using Adobe Dreamweaver.
Firstly, I created five pages: index.html, menu.html, about.html, outlets.html, and contact.html, along with an images folder.
Everything was fine when I first wrote the code to match the desktop layout. However, when I started adjusting it for different devices, it became a challenge for me because I had never done it before.
When I first tried to center the image and text on the screen, I noticed that it didn’t work even after adding align-items: center and justify-content: center. I realized that I needed to add margin: auto or margin: 0 for it to work properly.
Final Website Netlify Link:
https://ambertanjingjing-finalproject.netlify.app/
In this project, I learned a lot of new things that I had never learned before. It is also quite challenging for me to build a functional website, as everything was new and outside my previous experience. Before this project, I had only learned the basics of HTML and CSS. Mr Shamsul introduce us to use Bootstrap which made it easier to build the website. Besides, Mr Shamsul also allowed us to use Chatgpt to help with solving problems, and this made it much easier for me to find answers. Chatgpt help me improve my code, and accelerate my learning.
At first, I built the website layout based on the prototype I created in Project 2. The prototype helped me arrange the layout, so I didn't have to spend as much time figuring it out. I started with the navigation bar, then added the content, and finally worked on the footer. For the navigation bar and the footer, I only need to write it for one page and then copy and paste it to the other pages, which helped save more time.
I faced a lot of problems during this project. One of the biggest challenges was making sure my website worked well on different devices. I spent a lot of time trying to fix this. At first, the layout looked perfect on my laptop, but when I checked it on my phone and iPad, the layout became very messy, and some words were cut off and couldn't be seen. Chatgpt helped me solve this problem, and I learned that I needed to use media queries to adjust the layout for different screen sizes.
In addition, I was also confused by the margin sizes when adjusting my layout for different screen sizes. At first, I set the margin size to create spacing between elements, and it worked well on my laptop. However, when I tested the website on my phone and tablet, the layout became messy, and some text was cut off the screen. I also noticed that adjusting the margins affected my vertically centered layout. I realized that the margin size needed to be adjusted based on the screen size to maintain the alignment. Chatgpt helped me solve this problem, and I learned how to properly adjust the layout for different devices.
Furthermore, sometimes Chatgpt didn’t answer my questions correctly or gave me the wrong answers, so I had to test many times and ask repeatedly to figure out the problem. It was so frustrating that I almost wanted to give up. However, I didn’t give up and kept asking until I finally found the solution. Completing this project was difficult but also very rewarding.
Overall, this project was quite difficult and challenging, but I gained a lot from it. Through this project, I learned more about how to build a website and how to find solutions when I didn’t know the answers. Compared to other modules, this project was much harder, and I spent a lot of time on it. Although the final result might not be perfect, I developed many technical skills and feel that I have grown a lot. In the beginning, everything was new to me, and I didn’t know where to start, but now I am able to build a website.
Comments
Post a Comment