INTERACTIVE DESIGN / PROJECT 2: WORKING WEB PAGE

Week 8 to Week 10

22/05/2023 – 11/06/2023 

Name: Joan Chiam Zi Woei 

Student ID: 0350211

Interactive Design

Project 2 - Working Web Page

---

Instructions:

Module Information Booklet

---

Process

This project is an continuation of our work in Project 1. In the previous assignment, we redesigned an existing web page and produced a static prototype using web design software like Adobe XD or Figma. Now, in this project, we needede to bring that static prototype to life by coding a functional web page using HTML and CSS.

Fig. 1.0 My prototype design from Project 1

To start it off, I downloaded the photos that I needed then after that I put them all into the file so that I can use it later on. Moving on I started setting up my HTML and link it with my CSS file. 

Since my website uses white background so I just leave it at that. After that, I started coding for my navigation.

Fig 1.1 Process of creating navigation bar

I also made the buttons for login and register to change color when the cursor hover over it.

Fig 1.2 CSS for the navigation

When I was done with navigation, I moved onto putting into the landing image and the images below which categorize the woman. man and kids sections. I adjusted the images size and placed them together in a row by using display flex.

Fig 1.3 Process of inputting images in appropriate placing

With all the images placed in, I begun to put in the captions and descriptions of the items that are for sale. I also changed the font as well as the text color and sizes to make it look better.

Fig 1.4 Process of inputting captions and descriptions

Since I was done with most of the things I needed to do, I just did some minor adjustment for the words and images to make sure that they are placed correctly.

Fig 1.5 Final adjustments

I finished it up by adding the footer and with that I am done with everything.

Fig 1.6 Process of making footer

Fig 1.7 A screenshot of some of the CSS codes

The working web page can be seen by clicking this here.

---

Reflections

In the beginning of this project, I was quite nervous as I only had limited experience with HTML and CSS. Although I had some basic coding skills from previous projects and exercises, I felt uncertain about my ability to create a complete web page. However, I was able to work smoothly with the help of the tutorials from the internet. It was a nice feeling when I finish coding my web page, it made me felt proud as I was able to build something purely out from coding. It was amazing and an enriching experience for me as I learn through the journey of coding even though I did not liked it that much at the start but as I slowly learn, I found it quite fun but it does take a lot of time and patience. Therefore,  I need to improve my time management skills. Planning my schedule thoroughly and avoiding procrastination.