Interactive Design | Final Project: Final Working Website
2/12/25 - 11/1/26 (Week 10 - Week 14)
Kimberly Miaw Jya Nee | 0366836
Bachelor of Design (Honours) in Creative Media | Taylor's University
Interactive Design
Final Project: Final Working Website
[Table of Contents]
1.
Instructions
3.
Feedback
4.
Reflection
5.
Quick Links
[Instructions]
[Final Project]
For our final project, we are required to create a fully functional
website, based on our prototype in Project 2.
- Minimum of 5 pages
- Project MUST be deployed on Netlify
- Add project folder to Google Drive as backup
Submission:
- A live URL to the fully functional website
- A brief report (800–1,000 words) documenting the development process, any challenges faced, and how they were overcome in your E-Portfolio, and upload the final project main folder into Google Drive and include the link in your e-portfolio (set the access to public)
Process Work
I decided to use Visual Studio Code for my final project. Previously, I have been using Dreamweaver for the class exercises but thankfully VS Code is easy to use as well. I also used Bootstrap while completing this project.
Home Page
I started with the homepage, with 4 main sections.
1. Hero CTA
2. Our Story + Customer Favourites
3. Cafe Atmosphere
4. Find Us (Simplified)
I added the logo on menu bar first. Then, I proceeded with the hero section of the page, followed by the rest. At this stage, I'm quite clear on what to code in the html page since we did this many times during tutorial sessions.
I find that working on the HTML and CSS simultaneously works the best for me since it's easy for me to get confused. I can keep track of each section's details better this way. Working on the CSS part is quite fun but it's also the part I spent the most time in readjusting back and forth, especially with the alignments, padding and margins.
The "Your New Favourite Brunch Spot" text is originally in white. However, while I was doing the Menu page's CSS class I accidentally linked both hero contents.
Our Story Page
This page is pretty straightforward since it's a one big section which consisted a heading, a panoramic image and a few paragraphs. I coded in the texts and arranged it in CSS.
Fig. 4. Process in VS Code: Our Story HTML
This page is one of my favourite ones to work it, I'm happy with the minimalist layout that I manage to do, and maybe also because this page is also easier to code = less issues...
Fig. 5. Process in VS Code: Our Story CSS
Fig. 6. Screenshot of Live View: Our Story Page
Menu Page
For the menu page, it also has an image hero section, similar to the home page. For the images of the food, I kept the same centred layout with a label on the bottom left of the images to keep it cohesive.
Fig. 7. Process in VS Code: Menu HTML
The CSS section is also where I messed up, I accidentally named the hero content section the same as my home page one so while I was editing the contents for menu page, the home page's hero section is also linked. For some reason it took me quite awhile to realise that the class name was the problem.
Fig. 8. Process in VS Code: Menu CSS
Fig. 9. Screenshot of Live View: Menu Page
Services Page
Fig. 10. Process in VS Code: Services HTML
Fig. 11. Process in VS Code: Services CSS
Fig. 12. Screenshot of Live View: Service Page
Find Us Page
Lastly, the find us page consists of 2 main sections, which is the information area and the embedded map.
Fig. 13. Process in VS Code: Find Us Page HTML
It took me a few tries to align the contact information into 3 columns, and the same goes to the embedded map. I also accidentally linked the CSS class to the Home page's one so I had to edit back and forth to get it right.
Fig. 14. Process in VS Code: Find Us Page CSS
Fig. 15. Screenshot of Live View: Find Us Page
Final Outcome
Google Drive Link:
Working Website (Netlify):
[Feedback]
Week 11 (3/12/25)
General Feedback:
Final Project started. I decided to use VS Code to do my final.
Specific Feedback:
This week, I continued to refine and make changes to my Project 2 according to the feedback I have received.
Week 12 (10/12/25)
General Feedback:
This week I continued to work on the website, I mainly worked on readjusting the Home page and the Our Story page.
Specific Feedback:
N/A
Week 13 (17/12/25)
General Feedback:
Continued working on the website this week but I only did CSS refinements on the Home and Our Story page. I also began to set up my final project blog.
Specific Feedback:
N/A
Week 14 (31/12/25)
General Feedback:
I added the HTML contents for the Menu and Services page.
Specific Feedback:
This week has been a little busy since another subject is having final presentation and submissions.
Week 15 (11/1/26)
General Feedback:
[Submission Week]
Specific Feedback:
I did last minute refinements to my website before deploying it to Netlify, while updating the blog at the same time.
[Reflection]
Experience
I learned a lot while working on this final project. There was a lot of trial and error, and at times it was frustrating when I couldn’t figure out the issues in my code. However, it was very satisfying to see the final outcome. I found the HTML part relatively straightforward, while the CSS part was more challenging. I had to go back and forth to figure out the exact numbers and spacing to make sure elements didn’t look wonky or out of place.
I recognize many errors and imperfections in my final website, which I will take note of for future projects. Although my website is simple and doesn’t have much interactivity, I’m glad with what I was able to accomplish for my first “large-scale” coding project. Coding has always seemed intimidating to me, but I realized that it just feels and looks overwhelming at first. Once I got into it and gave myself time to work through the problems, I was able to finish the project without rushing and still doing my best.
Observation
I noticed that I often make minor errors, which sometimes makes it difficult to identify the issue in my code quickly. Patience and careful checking are important skills in coding.
Findings
Being organized is crucial in avoiding confusion and minimizing errors. Planning the structure of the code and keeping things tidy makes it much easier to spot problems and maintain consistency. I also learned that trial and error is a normal part of coding, and taking the time to test and adjust improves both my knowledge and the final outcome.
[Quick Links]
Thank You
Comments
Post a Comment