Interactive Design/ Project 2: Working Web Page

19/06/2024 - 29/06/2024 / Week 9 - Week 10

Lim En Yu / 0354452

Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor’s University 

Project 2: Working Web Page

---

TABLE OF CONTENTS

1. Instructions

2. Project 2: Working Web Page

3. Feedback

4. Reflection

---

Instructions

Fig 1.1 Module Information

---

Project 2: Working Web Page

Objective:

• The objective of this assignment is to transform your static prototype from Project 1 into a fully functional and interactive web page. You will apply your knowledge of web layout class to create a working website that closely aligns with your original prototype.
• Review your static prototype from Project 1 and analyze its layout, typography, color scheme, and imagery.
• Use HTML and CSS to translate the design elements into code, ensuring a faithful representation of the original prototype.
• Aim for pixel-perfect precision while maintaining responsive design principles to ensure compatibility across different devices and screen sizes.

Here is the prototype I have done from Project 1:

Fig 2.1 Prototype from Project 1, Week 10 (24/6/24)

Progression on HTML code:

Fig 2.2 Start on HTML code, Week 10 (24/6/24)

Here is the outcome of the HTML code while I haven't applied any CSS code.

Fig 2.3 Outcome fro HTML code #1, Week 10 (24/6/24)

Fig 2.4 Outcome fro HTML code #2, Week 10 (24/6/24)

Fig 2.5 Outcome fro HTML code #3, Week 10 (24/6/24)

After I finished HTML code, I proceeded with CSS code. I have inputed the box-sizing property first, along with the scrolling element and the font that I have gotten the embed code from google font.

Fig 2.6 CSS code, Week 10 (25/6/24)

First, I started with the navigation bar which is located at the top of the web page. I have applied what I have learned during the class, such as transition for hover effect. Throughout the class, I also learned how to locate the navigation bar always on top of the web page while I scrolling through any part of the web page.

Fig 2.7 CSS code for navigation bar, Week 10 (25/6/24)

Here is the result of the CSS code, I added the hover effect to change the colour and font size of the text, so that the text will enlarge while hover on top of it, same goes to the search button.

Fig 2.8 Outcome of navigation bar, Week 10 (25/6/24)

For the introduction section of the web page, which included my name, information and also picture, I have divided it into two parts, which are left and right so it is easier for me to arrange. The left part will be my profile the right side will be my information.

Fig 2.9 CSS code for introduction section, Week 10 (25/6/24)

Here is the outcome of introduction of the web page with the background added.

Fig 2.10 Outcome of introduction section, Week 10 (25/6/24)

Followed by the second section which is education, I created the lines beside the title using the CSS code below, same goes to other titles.

Fig 2.11 CSS code for education title, Week 10 (26/6/24)

Here is the outcome of how the title will look like with the lines:

Fig 2.12 Outcome of education title, Week 10 (26/6/24)

Next part is the timeline of education, which I have been struggled on a lot. I have no idea how to create a timeline using CSS code. I have done quite a few of research online and this is what I created before modifying it.

Fig 2.13 First attempt on timeline, Week 10 (26/6/24)

Here is all the CSS code for the timeline after I have adjusted for many times to get the right one.

Fig 2.14 CSS code for first timeline, Week 10 (26/6/24)

Here is the outcome after I have modifying the timeline:

Fig 2.15 First timeline for education section, Week 10 (26/6/24)

After I have done the first timeline, there is another timeline I need to deal with for experiences part. This is a bit more complicated for the first one, but I roughly understand how the timeline worked. However, the outcome was still a bit not ideal. I have done some research again to solve the problem.

Fig 2.16 First attempt on experiences timeline, Week 10 (26/6/24)

Then I have fixed the position, but the circle is only one! I need to find the issue again :D And then I found it, it was the position problem! I have accidentally set it to absolute so all the circles are combining together.

Fig 2.17 Second attempt on experiences timeline, Week 10 (26/6/24)

Here is the CSS code for the second timeline:

Fig 2.18 CSS code for second timeline, Week 10 (26/6/24)

Final outcome of how the timeline in experiences looked like:

Fig 2.19 Outcome of second timeline, Week 10 (26/6/24)

For language part, I have faced the issue of I cannot style the progression bar :(  Again I searched for the Internet to look for the code that could solve my problem. And then I found it! I need the code which is ::-webkit-progress-bar to style the value and also the bar.

Fig 2.20 CSS code for language section and progress bar, Week 10 (28/6/24)

Here is the outcome of the language part:

Fig 2.21 Outcome for language section, Week 10 (28/6/24)

For abilities part, I have been thinking how to place the images and texts, and then I came out with an idea which is divide them into 4 parts which is 4 columns and this has solved my problem.

Fig 2.22 CSS code for abilities section, Week 10 (28/6/24)

Here is the outcome for both language and abilities part which are the fourth section of the web page:

Fig 2.23 Outcome of language and abilities section, Week 10 (28/6/24)

There are not much issues I have faced on projects part, I just applied flex and the flex direction: column to make it arranged neatly and nicely.

Fig 2.24 CSS code for projects, Week 10 (29/6/24)

Here is the outcome for the projects part:

Fig 2.25 Outcomes of projects section, Week 10 (29/6/24)

Moreover, there is also nothing much for skills part. I only keep adjuting on the position of the content to make it align and the outcome was fine also.

Fig 2.26 CSS code for skills, Week 10 (29/6/24)

Here is the outcome for the skills part:

Fig 2.27 Outcome of skills section, Week 10 (29/6/24)

For contacts section, as it is horizontal, therefore I have appleid flex-direction: row to make it in one line. Also, I have added the hover effect to change the colour and also the size of the text.

Fig 2.28 CSS code for contacts, Week 10 (29/6/24)

Here is the outcome for contacts part, the text that I was hovering was in a different colour and it will be bigger compare to others.

Fig 2.29 Outcome of contacts, Week 10 (29/6/24)

Last but not least, I have added CSS code for my web page to be compatible and responsive on different sizes of screens and devices.

Fig 2.30 Added CSS code for responsive web page, Week 10 (30/6/24)

Here are how different sections will looked like when it is in smaller sizes of screen. I have change the layout of the introduction section and also the colour of the quote so it is readable.

Fig 2.31 Responsive layout #1, Week 10 (30/6/24)

Also, I have change the background of the fourth and fifth section as if it is the image, it is hard to control the layout.

Fig 2.32 Responsive layout #2, Week 10 (30/6/24)

For contacts section, it will also looked too packed if there are in one line. Therefore, I have changed the layout to vertical so it is more readable.

Fig 2.33 Responsive layout #3, Week 10 (30/6/24)

Final Outcome for HTML and CSS code:

Fig 2.34 HTML code for the final outcome of Working Web Page, Week 10 (30/6/24)

Fig 2.35 CSS code for the final outcome of Working Web Page, Week 10 (30/6/24)

Final Outcome for Project 2: Working Web Page

Final Web Page Link: https://project2-limenyu.netlify.app/

Fig 2.36 Final Outcome for Project 2 Working Web Page, Week 10 (30/6/24)

Fig 2.37 Final Outcome for Project 2 Working Web Page (Responsive Version), Week 10 (30/6/24)

---

Feedback

No feeback received for this project.

---

Reflection

I was so scared of working on this project since I have done Project 1, because I have no idea whether I could do this or not. I think I am very weak on coding and this module :(  I have tried my best to understand all the informations and knowledges taught by Mr Shamsul.

I have applied what I learnt during the class in this project and also I have done some research in order to do better so that it could same with my prototype. I was so happy and statisfied when I done this project! I could not believe I did it!

I will continue to improve on myself as a bigger challenge which is the final project is still waiting for me. All in all, I really learned a lot fo things through this project, after really doing something practical, I have gain more confidence on myself.