Interactive Design Project 2: Working Landing Page

12/06/2022 - 17/06/2022 (Week 12- Week 13)
Evaleez Voo Lian Yun / 0350275
Interactive Design / Bachelor of Design (Hons) in Creative Media

Project 2: Working Landing Page

---

Instructions

---

Task

Before the start of this task, we were introduced to Bootstrap. You can check out the exercise here. The lecture Mr Shamsul gave was easy to understand and I could grasp how to use Bootstrap fairly easily.

Afterwards, I moved to Visual Studio Code and started creating the working landing page. For the landing page, I use the Navbar, card and footer from Bootstrap. Meanwhile, the character showcase, video pop up and loader screen was referenced from external sites and my own tweaking.

Fig 1.0 Original Character Showcase (14/06/22)

One of the hurdles I faced was the character showcase. As we weren't taught javascript yet, I wasn't sure how to create the rolebox for the buttons, which would switch the text and photo when the small profile was clicked. In the end, I managed to write my own script but the only problem was it was not responsive. So in the end, I switched to and accordian style character showcase instead.

Fig 1.1 Event Card (15/06/22)

The orginal idea for the cards were circular with a magenta frame around them. However, as I changed the character showcase format (as seen below), I decided to switch the shape to a square.

Fig 1.2 Character Showcas Edits (15/06/22)

As stated before, the character showcase format was changed. Here, I am contemplating wheter to add the "Characters" header in the landing page or not.

Fig x.x Testing Responsiveness (15/06/22)

Another hurdle I had was the character showcase section again. This is because the original tutorial did not make it responsive. So I attempted to reduce the font size so the divs can be read. Afterwards, I had help from Mr Shamsul and he taught me how to make it responsive.

Final Output

Link: https://evaleezvoo-landingpage-chroma.netlify.app/

HTML:

 

CSS:

---

Reflection

This assignment made me have a love hate relationship with coding. It's both so fun but also so frustrating when it doesn't work like you want it to. I also found out what stack overflow and codepen is and I am so grateful for their existence. Amen.

In terms of experience, I learned a lot from this assignment. I managed to use terms I never knew I would and write my own script to make the functions work (although I'm still confused with some parts).