Interactive Design - Project 2 ( Working Web Page )

19/06/2024 - 30/06/2024 ( Week 9 - Week 10 )

Chong Wee Han / 0368863

Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University

Project 2 - Working Web Page

---

LECTURE

Week 9 - Lecture 09

---

INSTRUCTIONS

 

<iframe src="https://drive.google.com/file/d/1_LR3FnphEcPH66w9nxaUtexUfHB5F2h-/preview" width="640" height="480" allow="autoplay"></iframe>

Project 2 - Working Web Page

Requirements for project 2

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.

Upload the file in Netlify, update your e-portfolio with all the processes documented in the blog, and submit the link as a submission

Process

This is how my resume looks like :

Figure 1.1

I first put together all the important item in a folder and named it ID Project 2 in case I got the wrong folder. I included my HTML file named index.html, CSS file and images folder that would be shown in my resume web page.

Figure 1.2

HTML&CSS

I have included a lot of different fonts in my resume so I searched it on Google Fonts and copied the embed code to my HTML.

Figure 1.3

Part 1

I want to do like website navigation in my resume so I included the navigation bar on the top. 

Figure 1.4 Outcome

Figure 1.5 HTML

Figure 1.6 CSS

Figure 1.7 CSS

Part 2

I do a border in my "experience" section.

Figure 2.1 Outcome

Figure 2.2 HTML

Figure 2.3 CSS

Part 3

I rotated my word "RESUME" and added the bullet to my soft skills. I used Illustrator to do the progress bar and apply the image in my HTML.

Figure 3.1 Outcome

Figure 3.2 HTML

Figure 3.3 HTML

Figure 3.4 HTML

Figure 3.5 CSS

Figure 3.6 CSS

Part 4

I also found the free social media icon images from Freepik and downloaded them to include them on my web page. 

Figure 4.1 Outcome

Figure 4.2 HTML


Figure 4.3 HTML

Figure 4.4 CSS

Figure 4.5 CSS

Figure 4.6 CSS

Figure 4.7 CSS

Final Submission - Project 2

Website Link : https://chongweehan-project2.netlify.app/

---

REFLECTION

This task is quite difficult for me because we have to ensure the layout is similar to the resume design that we created in Figma. My resume used different types of fonts and layouts so it's quite complicated for me to organize and separate it. The tough part is also I have to make sure that the HTML and CSS code is working, so it also takes time to check it. Overall, I have become more familiar with using Adobe Dreamweaver after doing these few weeks of exercises, and I also found out that doing website design is quite interesting for me.