Interactive Design / Final Project

  

22/10/2021 - 26/11/2021 / Week 10 - Week 14
Ngu Kah Shin / 0347666
Interactive Design / B' in Creative Media / Taylor's Design School
Final Project: Website

---

  INSTRUCTIONS  

HTML Link:

<iframe src="https://drive.google.com/file/d/1FB-Eru30HkNNXNqvT6h97EMMMeQyAem1/preview" width="640" height="480" allow="autoplay"></iframe>

---

  EXERCISE: 

When I was tasked with this assignment to build a website, I knew 3 things were important in this process; a functional website that will allow users to achieve a certain set of objectives, making a purchase. Secondly, a visual aesthetic that is attractive, engaging, and unique. Thirdly, simple with clean code for a faster load time. 

Using a fictional cake store as my client, I started with the back-end of the website using HTML as my programming language. I had my friend Jia Sheng teach me and he was really helpful. The first webpage started off with his guidance but eventually, I continued coding on my own. I faced several problems that I was unable to solve; placements of the texts and images were difficult to position to exactly where I wanted them to be; the layers were being wrongly placed and worse comes to worst, I was unable to find where I went wrong because my codes were difficult to understand.

Fig 1.1 About Us HTML code attempt #1 (txt format)

Fig 1.2 About Us webpage attempt #1 

I decided to delete all my codes and restart from scratch after reaching our Mr Tarmizi for help. He explained to me how I should not have used the flex property as it is quite of an advanced skillset and even he is not comfortable using that property. He recommended using bootstrap for all my web pages and that is exactly what I did for the following attempts:

Fig 1.3 Using Bootstrap on Dreamweaver

Fig 1.4 Using Bootstrap on Dreamweaver

Following Mr Tarmizi's advice, this time I used bootstrap to create my webpages. Everything seemed to be going ok as bootstrap had pre-coded properties and elements like tables, navigation bars and footers for me to use. However, when I opened the HTML file on chrome, everything went haywire!

Fig 1.5 About Us HTML code attempt #2 (txt format)

Fig 1.6 About Us webpage attempt #2

Fig 1.7 All Time Favourites HTML Code attempt #2 (txt format)

Fig 1.8 All Time Favourites webpage attempt #2 

Fig 1.19 Style CSS (txt format)

Obviously, countless issues arose and I was unable to solve the issues even when I reached out a few other developers. It was because of my messy codes which they were unable to spot my mistakes. I began reordering and reorganising my codes so that they are clean and readable. This process was hectic and time-consuming. I should've done this from the beginning.

Once I was done with the backend of the website, I commenced work on the CSS work for the front end. before even beginning to code, it was vital for me to put my ideas down on paper, especially in the process of developing this fictional cake store. It is a common occurrence to perceive brand-building websites without adhering to their corporate identity. Some of the key criteria I implemented for the user interface include fonts, color palettes and imagery.

The CSS portion of this website went smoothly. I learned 3 things throughout this process, 1 making clean code is important as I faced several problems of during my previous attempts. Secondly, in a world of collaboration, coherent code is vital. Lastly, do not do last minute work! Foolishly, I thought this final project wouldn't be too difficult as I have had basic coding expereicnes in the past. I ended up submitting my work late because of my unwise underestimation of workload and the duration of completing this project.

Nevertheless, I finished the project and the results were a bit lower than satisfaction. I have already started to re-code and learn how to make even better websites as my semester break has already started. Hopefully in this month long break, I can become a better web designer.

 FINAL SUBMISSION 

 1. Home page 

Fig 2.1 Final Homepage (index.html) - JPG

Fig 2.2 Final Homepage (index.html) - TXT

 2. About Us page 

Fig 2.3 Final About Us page (aboututs.html) - JPG

Fig 2.4 Final About Us page (aboutus.html) - TXT

 3. Contact Us page 

Fig 2.5 Final Contact Us (contactus.html) - JPG

Fig 2.6 Final Contact Us (contactus.html) - TXT

 4. All time favourites page 

Fig 2.7 Final All time favourites page (alltimefavourites.html) - JPG

Fig 2.8 Final All Time Favourite page (alltimefavourite.html) - TXT

 6. CSS 

Fig 2.9 Final CSS (style.css) - TXT

 7. bootstrap.css 

Fig 2.10 bootstrap.css - TXT

 8. Retail page 

Fig 2.8 Retail page (retails.html) - TXT

Fig 2.11 Retail page (retail.html) - TXT

 9. style sheet  

Fig 2.12 Final CSS (style.css) - TXT