Interactive Design - Project 2

08/11/2022 - 15/11/2022 (Week 11-Week 12)

Yong Kai Yi (0352826)

Interactive Design

Project 2- Working Landing Page

---

INSTRUCTIONS

Before starting to code the landing page, we need to go through the tutorial recording as we missed one class during that week. 

Mr. Shamsul will demonstrate and explain how Bootstraps works. This website included all the items we needed to create a working landing page. 

Some useful additional websites for the Bootstraps guide I referred to:

How to create responsive buttons

How to utilize the grid system for the layout

Explanation of the grid system from Bootstraps

Hover image effect

HTML Entities 

HTML Lists

How to create a gallery

How to position text over an image

Progressions in Dreamweaver:

fig 01: bootstrap getting started

Before starting, we need to key in the bootstrap bundle to let us use the code from bootstrap.

fig 02: navigation

At first, I was planning to use the navigation bar from bootstrap but was unable to customize it to the transparent background, hence I just made the navigation manually which was taught in class too. 

 

fig 03: about us 

After creating a row, I added two <div>s to create different margins for the header and paragraph. Adding "mt-5" to create spaces between the header and the previous page. I tried to place the image beside the texts, and after a few testing, I used row and col to achieve that. 

fig 04: pastries page

The different pixel sizes of the pictures might causes problems when placing them in Dreamweaver, hence I changed all the pictures into the same pixel size in Photoshop before placing them into a gallery. 

fig 05: hover effect

After that, I added class names for the pictures to which I wanted to add hover effects, referring to the W3school website.

fig 06: pastries page CSS

I edit the width, padding, and margin for the pastries page by using the class names set in the HTML. 

fig 07: row and div for order guide

After consulting Mr. Shamsul, I tried using row and div for each step of the order guide in the list and manually adding the class name to add a bottom border for each row. 

fig 08: row and div for order guide

Unfortunately, the icons are not in line with the texts, hence I keep trying different codes variation, and saving all the tested codes in a txt file just in case. I realized if I remove the <li> and manually type numbers instead it helps a lot. 

fig 09: row and div for order guide

This is what it looks like if I remain the <li> for each row, even though I tried to align the center and so on still doesn't work, hence I just remove the <li> and edit the padding a little. 

fig 10: footer

I used a website provided by Mr. Shamsul to create the wave-like background for the footer, it will generate an SVG code. 

fig 11: footer

Paste the SVG code in the HTML, and I realized the outcome is not what I expected, the height of the shape is not enough for me to fit my footer elements in it.

fig 12: footer

This is what it looks like, so I added a row for the footer (SVG) and change the row background color to white which is the same as the wave. 

Outcomes:

Outcome 1: https://yongkaiyi-project2-2.netlify.app/

Problems: exceeding rows

FINAL OUTCOME: yongkaiyi-project2-3revised.netlify.app

---

REFLECTIONS

Actually coding our own website is really fun to learn, but the time limitations were too tense and hectic, which make me can't handle it properly. Time was a big challenge for me when doing this assignment, but it was still fun when me and my friends trying to figure out solutions and codes whenever we have issues.