Interactive Design - Project 2

03/06/2020 - 17/06/2020 (Week 8 - Week 10)
Yeo Hui Qi (0334134)
Interactive Design
Project 2

---

LECTURES

Week 8

We were introduced to Bootstrap this week. We were taught how to implement Bootstrap into our code and then apply the grid system and how to use it. We were also introduced to the Bootstrap NavBar and Carousel elements that we might be using for our Project 2 later on. Everything regarding Bootstrap code and resources are available at https://getbootstrap.com/ . We also carried out an in class Bootstrap exercise. https://upbeat-ride-69a7f8.netlify.app/ We were asked to upload it to netlify and this link was the one I submitted for the exercise.

Week 9

There was no lecture this week as Mr Shamsul annouced on Google Classroom that he will give this week for us to work on our Project 2.

---

INSTRUCTION
Project 2

We are supposed to reference our Project 1 design and turn it into a workable website using HTML, CSS and Bootstrap. 

For reference, this is my design in Project 1:

Figure 1.1 Project 1 reference

Referencing this design, I started to work on my code.

After Coding:

Figure 1.2 Coded NavBar

For the navigation bar, I used the template code in Bootstrap and changed the background colour and aligned the navigation links to the right next to the search bar. The title font was also changed as seen on the left.

Figure 1.3 Coded Newsletter Section

The free form shapes and picture on the right are implemented as background image. I used the same font for the "Subscribe now" button I used for the title "Delicious" in the navigation bar to ensure consistency. 

Figure 1.4 Coded Pop-Up Window

When "Subscribe Now" button is clicked, there will be a pop-up window for users to enter their email. I used Bootstrap Modal to implement this function as well as some minor JavaScript in my code.

Figure 1.5 Coded Author Section

For this section, only the tomatoes on the right are implemented as background image, The author image is in its own div and aligned horizontally to the text using CSS.

Figure 1.6 Coded Cuisines Section

Figure 1.7 Coded Top Picks Section

This screenshot of my Top picks section isn't complete because my screen size isn't very big so it won't fit everything inside. The fruits and vegetables you see on the side are implemented as background image with the picture and text in the middle sized using col-md-4 Bootstrap. The picture and red line on the left of the text is implemented as background image with the text positioned accordingly using padding and position: absolute in CSS.

Figure 1.8 Coded Footer

The footer was coded as 2 separate divs and each side width is 50% so that I could align each div to the left and right respectively. The background colour is also consistent with the navigation bar and other elements to ensure consistency of my colour palette throughout my website.

My website is able to scale to match the browser's window size as well.

Minimized version:

Figure 1.9 Minimized Navigation Bar

For the navigation bar, I made sure that the menu options collapsed into a hamburger menu and added the search inside as well because it would've been to big to fit inside small size windows.

Figure 1.10 Minimized Newsletter Section

For this section, I made the background image remain at it's size even if the window is minimized. It was the best option for me to ensure the text is still able to be seen no matter what the size of window.

Figure 1.11 Minimized Pop-Up Window

Even if the window is minimized, the pop-up window is still able to function properly and fits inside the window.

Figure 1.12 Minimized Author Section

For this section, there were a lot of issues while using the Bootstrap grid system to scale the content. This was the best outcome I could achieve, even though there's 2 words on the right that overlaps with the tomatoes in the background.

Figure 1.13 Minimized Cuisines Section

When the window is at maximum width, the cuisines are displayed in 2 rows with 3 images each. When minimized, the cuisines are displayed with 2 images in each row instead. No matter the screen size, the images are able to scale with width at 100% and height auto in order to fill out the maximum space according to the Bootstrap grid system that has been set.

Figure 1.14 Minimized Top Picks Section

 

When the window is at maximum width, the top picks are arranged with 3 in one row. When minimized, the 3 columns stack on top of each other nicely by using col-6 and offset-3 in each div.

Figure 1.15 Minimized Footer

For the footer, the Bootstrap grid system was not needed as the contents were able to scale properly according to each size of window without distortion or overlapping. 

I uploaded my website to Netlify and submitted with this link: https://elated-keller-ecc362.netlify.app/

---

FEEDBACK

Week 8 (Bootstrap in-class exercise)

    - The images in the carousel are too big. Adjust using width 80% and height auto.

Week 10 (Project 2)

    - Make sure the content is scalable by using Bootstrap grid system, don't use too much CSS for placement.

Week 11 (Project 2)

    - Make the border on the left of the text in top picks section thinner.

---

REFLECTION

Week 8

1. Experience
• It was a stressful week, because we learned new things for Bootstrap.
2. Observations
• I was having trouble adjusting the size of the carousel, even after some advice and help from Mr Shamsul.
3. Findings
• I found that even though Bootstrap makes a website more dynamic and interesting, it requires much more practice and understanding of its class elements.

Week 9

1. Experience
• I was relieved that Mr Shamsul gave us the week off to work on our Project 2.
2. Observations
• Coding for Project 2 wasn't easy but I managed to finish it relatively fast in 3 days after it was announced.
3. Findings
• Throughout the coding process, I hit a few bumps but many websites on the internet helped with organizing and teaching me more about CSS and Bootstrap code.

Week 10

1. Experience
• My experience of the class was quite chaotic because of the COVID-19 situation my brother was having classes and there was too much noise at home, wifi connection was also slow.
2. Observations
• For the feedback on Project 2, I wasn't surprised by the feedback given because I already knew that the scalability of my website was the only issue I was facing.
3. Findings
• I found that all the students from this course were all very nice to me and willing to help me with any issues I was facing.