Interactive Design - Project 2
15/05/2023 - 05/06/2023 / Week 7 - Week 10
Glen Owen / 0354952
I did some repetitive codes in this area from the previous section. The only part I struggled hard is to make the "Back to Top" button to be placed where I wanted and the position of the text is perfect. It took me like 2 hours because ChatGPT keeps complicate the code that I wanted.
Interactive Design / Bachelor of Design (Hons) in Creative Media
Taylor's University
INSTRUCTION
Fig 1.1 Interactive Design MIB
PROJECT 2 - Working Web Page
This project is our continuation from Project 1 where in Project 1 we design a landing page. In this project we make our landing page to be a working landing page using HTML and CSS codes that Mr. Shamsul has teach us through doing exercises in class. After we're done with project 2, we had to publish the file in Netlifly or Github.
Fig 2.1 Static view of the landing page design I made in Project 1 (Week 9, 29/05/2023)
My first process before doing the coding itself is to divide parts into section so I can code easily. I learnt this tip from a Youtube channel called LearnCode.academy. I really recommend you guys to watch this video if you are new to coding.
Fig 2.2 Dividing parts (Week 9, 29/05/2023)
Fig 2.3 Inputting the code (Week 9, 29/05/2023)
I used Javascript to make the search button where you can type inside the box and click search. Of course it wouldn't get you anywhere because I only make a working landing page, not the entire website. For some of the navigation, I linked it to the existing page from the website itself.
While designing through the first section which is the section where there is the "CATEGORIES". I changed the background into background image instead of using a bland gradient color. The result is way more better than using the gradient color background.
Fig 2.4 With gradient color background (Week 9, 29/05/2023)
Fig 2.5 With image background (Week 9, 01/06/2023)
As you guys can see, the differences between Fig 2.3 & Fig 2.4 is very impactful. Of course with pleasant visual there is also a problem, if you have shitty or average internet the load of the images would take time but not that long. In this working web page I also added some borders into the images except for the "GUNDAM NEXT FUTURE" promotion poster because that is supposed to be an ads/promotion.
Fig 2.6 Continuation from Fig 2.4 (Week 9, 02/06/2023)
I did some repetitive codes in this area from the previous section. The only part I struggled hard is to make the "Back to Top" button to be placed where I wanted and the position of the text is perfect. It took me like 2 hours because ChatGPT keeps complicate the code that I wanted.
Fig 2.7 The footer part (Week 9, 02/06/2023)
This section right here is the hell hole of my coding because it took lots of time just to make it placed like that. Took me like 3-4 hours to fix the errors and bugs so I can see the layout clean like Fig 2.7. As a final touch, I add a floating button that acts as a "Customer Service" button.
Fig 2.8 Floating button (Week 9, 02/06/2023)
To look how visually good this website is, here's the JPEG of it. I am very proud of this work because it's ironic how I don't want to study coding and hate it, but instead I made it visually pleasing. How ironic my life is to learn coding.
Fig 2.9 Full page (Week 9, 02/06/2023)
If y'all wanna see the website in real time, here's the link to it. I suggest to view it with your desktop and not in mobile. Heck for no reason there's this gap that I don't know how the hell it appeared in mobile and whenever I tried to fix it it ruins all of the layout I made. In the end, I did whole of the process of this coding a total of 3 days.
FINAL SUBMISSION
Fig 3.1 Full Page Website JPEG form (Week 9, 02/06/2023)
FEEDBACK
Week 9 (01/06/2023)
Very nice visual
REFLECTION
Remember the part where I said "looking forward on the next project and see if I can suffer more" in Project 1's reflection? Guess what, I did suffer, but only for a day. Majority of the coding wasn't suffering at all except for the footer part. In the end whenever I see a bug or misplaced layout in the html file browser screen, I stayed calm and take a deep breath to prevent me smashing my laptop's screen and keyboard on how dumb I can be to not notice where the wrong code I input it in. Am I satisfied with the final result? There is 2 scenarios. If you show it to me in mobile, I would cry inside my room and never touch coding again. If you show it to me with your desktop, I would be so proud that I'll show it off to the world that I can code. Dividing parts into sections is really helpful for me because whenever I edit it in the CSS file, it could give me what I want and won't interrupt other parts. In fact, I would like to thank ChatGPT and LearnCode.academy to help me on this project.
Comments
Post a Comment