Labels

Interactive Design: Final Project- Final Working Website

24/6/25 - 22/7/25 // Week 10 - Week 14
Chuah Shu En // 0368157
Bachelor of Design (Honors) in Creative Media

Interactive Design // Final Project: Final Working Website



Table of Contents

Lectures
Week 10
Responsive website- adjusts itself to phone/laptop/diff devices.
Add "@media" at the bottom of css code, change all display to block.

Week 11
Upload final project on Netlify AND google drive + come on week 14 so that he can brief and check. Minimum 5 pages. 
Instructions

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


Based on my prototype design, I started working on my final working website in Adobe Dreamweaver. I mainly followed tutorials Mr Shamsul gave in google classroom and applied what I learned about navigation bars from class. 

Fig 1.1, Dreamweaver (24/6/25)

However, since Visual Studio Code had a built in AI assistant and was more commonly used nowadays, I decided to switch to using that instead. 

Fig 1.2, Visual studio code (24/6/25)

I realized that I hadn't made a prototype for the "Classes/Exhibits/Events" page in my previous task so I ideated one but just copy pasted the same code as the "About Us" page and modified the content. 

Fig 1.3, About us page (24/6/25)

Fig 1.4, Classes page (24/6/25)

Our website had to be responsive so I asked for help from the built in AI assistant and other AI platforms such as ChatGPT and it gave me some code for turning the navigation bar into a hamburger menu for mobile display. 

Fig 1.5, Hamburger menu icon (30/6/25)

Fig 1.6, Hamburger menu button (30/6/25)

At first these "Read more" buttons below were just <button> but I changed them to <a href="classes.html> so it would take the user to the "Classes/Events/Exhibits" page. I think this caused some layout problems so I went back to CSS to fix it. 

Fig 1.7, Services layout problem (30/6/25)

Fig 1.8, Buttons CSS (30/6/25)

Next, I went to find the social media links of the Riverside Art Center to add at the footer section of every page. 

Fig 1.9, Social media links (30/6/25)

I also had some layout problems with the mobile display but managed to fix it by adjusting the CSS.

Fig 2.0, Layout (3/7/25)

Fig 2.1, Layout fix (30/4/25)

Fig 2.2, Fixed layout (30/4/25)


Link to final working website: https://task3shuen.netlify.app/
Feedback

Week 14
Add pictures of humans for the "Our Artists" page.
Reflection

This was definitely the most fun module out of all the modules in this semester. Learning about HTML and CSS helped me build my problem solving skills as I had to figure out solutions when my code couldn't run properly or when my layout looked iffy. 

Labels:

Comments

Post a Comment