Interactive Design: Final Project
WEEK 13 - WEEK 15 (26/06/2022 - 09/07/2022)
Adena Tan Sue Lynn (0345769)
/ Bachelor of Design (Honours) in Creative Media
Interactive Design
Final
Project
DIRECTORY
INSTRUCTIONS
To start this, I created prototypes to give me a slight idea of how to structure the other four pages. Below are they:
Below is a list of links for the images I have used in the prototype and will be using in my code:
- Pancakes: https://www.pexels.com/photo/pancake-with-honey-on-plate-357573/
- Soup Dumplings: https://www.pexels.com/photo/round-white-and-blue-ceramic-bowl-with-cooked-ball-soup-and-brown-wooden-chopsticks-955137/
- Noodles: https://www.pexels.com/photo/top-view-of-a-chinese-noodle-in-the-plate-with-chopsticks-5848496/
- Marinated Cucumber: https://www.pexels.com/photo/a-chinese-food-in-the-bowl-5848501/
- Fried Dumplings: https://www.pexels.com/photo/delicious-crispy-dumplings-on-a-ceramic-plate-7287719/
- Pesto Gnocchi: https://www.pexels.com/photo/overhead-shot-of-a-white-plate-with-a-vegan-dish-6659552/
- Buttercake: https://www.pexels.com/photo/cake-2928379/
- Curry Rice: https://www.pexels.com/photo/plate-with-rice-stewed-vegetables-and-meat-4611424/
- Pastry: https://www.pexels.com/photo/bread-994178/
- Kimchi: https://www.pexels.com/photo/kimchi-on-clear-glass-jar-6823261/
- Tofu #1: https://www.pexels.com/photo/photo-of-tofu-on-white-ceramic-plate-4518602/
- Tofu #2: https://www.pexels.com/photo/photo-of-tofu-with-soy-sauce-and-sesame-seeds-4518610/
- Tofu #3: https://www.pexels.com/photo/photo-of-tofu-on-white-ceramic-plate-4518586/
- Tofu #4: https://images.pexels.com/photos/7214485/pexels-photo-7214485.jpeg?cs=srgb&dl=pexels-anna-nekrashevich-7214485.jpg&fm=jpg
- Soybean #1: https://www.pexels.com/photo/photo-of-soybeans-in-white-ceramic-bowl-4518599/
- Soybean #2: https://www.pexels.com/photo/photo-of-soybeans-near-drinking-glass-with-soy-milk-4518614/
- Team: https://www.pinterest.com/pin/766667536580556858/, https://www.pinterest.com/pin/766667536580556882/, https://www.pinterest.com/pin/684406474631347928/, https://www.pinterest.com/pin/588845720043799628/, https://www.pinterest.com/pin/122160208634097933/
Below are some websites I used in order to gain some extra knowledge as to how to make my website a tad bit better! (I also referenced the same websites in Project 02, in order to continue coding my website.) ((Again, some of these are probably super easy to figure out, but I was constantly worried about having the wrong code!))
-
Zoom on Images when Hovering
- Rounded Corners on Images
- How to remove HTML Purple Links
- How to make HTML Links Activated by Clicking on <li>?
-
HTML <hr> tag
- Three Column Layout
-
11 Ways to Center div or text in div in CSS
Next, here is my source code for my About, Products, Recipes & Contact pages.
Next, is my CSS code for the above pages!
Finally is my updated code + CSS for my home page.
FINAL SUBMISSION
Link: https://atslfinalproject.netlify.app
REFLECTION
This project really made me learn how to manage my time! As I had two other deadlines alongside this, my time was real packed, and I was constantly anxious in completing my work with my own satisfaction. Overall, I was very intrigued whenever a piece of code would work! Personally for me, coding is like maths. Maths has never been my strongest subject, and even though coding doesn't really require hardcore maths, I realised how important it was to constantly be practicing coding. I noticed how if I missed a week, I would lose track on how to do certain things, and would need constant referencing.
However, this project has really encouraged me to do my best when it comes to coding. I'm quite slow when figuring out certain things, especially if I have no idea how to word my idea in my head. I'm really grateful for the amount of resources online as well as the basics that was taught by Mr Shamsul. Without it, I would've really been toast!
