Interactive Design: Project 2

7/6/2022 - 26/6/2022 (Week 11-Week 13)

Adeline Wong Chyn Nee / 0344017 / BDCM

Interactive Design

Project 2 / Working Landing Page

---

INSTRUCTION:

---

For our project 2, we were first introduced to Bootstrap by Mr. Shamsul before starting with our own progress. We learned how to get Bootstrap from getbootstrap.com and how to bring the templates over to Dreamweaver.

Fig. 1.1 Getbootstrap website

During class, I attempted to create my own website with the given knowledge, I added a navigation bar, a carousel, and 4 cards with texts. From this. I've gotten more understanding on how to work Bootstrap in Dreamweaver.

Fig. 1.2 First attempt at using Bootstrap

Fig. 1.3 HTML and CSS from my attempt (PDF)

Not only that but Mr. Shamsul provided us with a folder of Bootstrap codes in Google Classroom for the students to refer to and learn from.

Fig. 1.4 Provided HTML and CSS file

---

TASK

week 11 (7.6.2021)

Starting with this project, I wanted to make it simple but still had the necessary information on the page. I created the base for my page and it needed alignment and styling to make it come to life, however, I struggled a lot on that part and ended up spending most of my time trying to fix the problems.

1) Both columns appear to be in different rows even though it was placed under one row only.

Fig. 1.5 Column issue for 'Call To Action' section

I have attempted to change the padding and margins of both columns for the text and image, however, nothing worked. I then tweaked the column number and found one that suited us both the column stayed in the given row and was balanced like how it was intended. The code below underlines the element I changed to solve the issue

Fig. 1.6 Code that fixed the issue

2) Image and text are imbalanced

Fig. 1.7 Column issue for 'About Us' section

The image used in this section did not seem to fit the overall size as the height was too big and scaling it down would create a huge space between the image and the text, so I've decided to replace the image with a horizontally oriented image. The image below shows the changed code.

Fig. 1.8 Code that fixed the issue

2) Overall column and row 

In the beginning, working with rows and columns was super confusing as I am unfamiliar with the 12-column grid concept even after learning about it. Many sections of the page were disoriented and unaligned because of this. However, after some further learning, I've done on YouTube, I realized the importance of entering the right grid number for every specific content.

The images below show the changes after getting to know the column grid concept more.

Fig. 1.9 Code that fixed the issue

---

Final code for Project 2:

Fig. 2.1 Final code for Project 2

Netlify link to Project 2: https://project-2-indexhtml-adeline-wong.netlify.app/

---

Feedback:

Week 11

In this feedback session, I told Mr. Shamsul about my code issue on columns and rows, and he suggested I rewatch the video in Google Classroom. Mr. Shamsul also commented on how the image on my 'About Us' section was too big and needs to be scaled down.

---

Reflection:

In the beginning, working with Bootstrap seemed like a quick and doable task for me because of how a lot of templates are given to you at the getbootsrap.com website. However, I've slowly come to realize that lots of detailing go into the code because one wrong number and a whole column goes to the next row. So not only was this project testing my patience but it taught me to pay more attention to every detail. Not going to lie, this was one of the hardest modules I have ever learned and it's the first one that I thought I could have a chance of failing, coding is very difficult for me because it reminds me of math and I used to cry while solving math problems.

In the end, I finished the landing page with no permanent scars physically and mentally so that must be a good thing, right? Well, I'll have to see for the final project and prepare myself mentally for it.