Interactive Design: Project 02
WEEK 11 - WEEK 13 (06/06/2022 - 26/06/2022)
Adena Tan Sue Lynn (0345769)
/ Bachelor of Design (Honours) in Creative Media
Interactive Design
Project
02
DIRECTORY
INSTRUCTIONS
First, we were taught how to use Bootstrap for this project by Mr Shamsul. Using my website idea as a base, I coded with his instructions to come up with the below:
Below is the code I used for the above file.
Not only that, but Mr Shamsul also provided us his own code for our further understanding.
Proceeding on, I started my own code for my project. Along the way, I encountered some issues, such as:
1. My Footer constantly being attached to the contact & social media section
Solved: I realised that I had accidentally connected both of them using a div. It's a small matter, but it really made me frustrated for days! Have to thank one of my friends for this one.
2. As seen in Problem #1, after using the Bootstrap grid code, it left the contact & social media parts attached in a small grey box.
Solved: I simply used a really simple HTML & CSS code, which managed to fix it well!
3. My Contact Form was too skinny!
Solved: Oddly, one that worked was making the width 80% instead of 46%. Something that was taught was that it should be 46% to fit with the other container. However, I think this was due to having separated the row in the HTML Source Code.
All my problems basically came from the bottom part of my website. It was pain, sure, but I managed to get it done with the help of the Internet! I'm super grateful to have been given more time to do this, as the bottom part definitely almost made me slam my head against my keyboard from stress. It's a bit embarrassing it took such a simple solution, but still, I digress.Sometimes, I was really confused with some parts of code, so I would like to add this segment to specify which websites helped me in the end! I did not use all of these, but they helped me in understanding some parts of code, especially when combining HTML with bootstrap! [They were really simple solutions, but definitely helped me get a refresher on how to do certain things. It also might help anyone else who wants to build a site somewhat like mine!]
-
Placing two divs next to each other in HTML
-
3 ways to display two divs side by side
-
A Complete Guide to Flexbox
- How to position a button on website using html/css
-
How TO - Position Text Over An Image
Below is my final code!
SUBMISSION
FEEDBACK
Week 11 (07/06/2022)
When showing my work to Mr Shamsul in Week 11, he advised me to use container and rows for my issue.
REFLECTION
Overall, I found this project to be quite hard. Again, coding is not my strongest suit. However, I did find joy when I was coding and my code actually worked out!
I noticed something within this project. Coding plays a big part of teaching a designer how to analyse each thing with clarity and clearness. For me, this is due to the fact that I sometimes miss codes that actually mess up my entire website. It's pain and cringe when I actually realise the root for a lot of my issues could be solved if I opened my eyes better... But alas, I persevered, and with the help of my friends & the Internet was I able to create a website I actually liked!
