INTERACTIVE DESIGN，Project 2 - Working Web Page

 INTERACTIVE DESIGN

Tuesday,April 23 .2024

18.06.2024 - 02.07.2024 | Week 9 - Week 11

Jia Wenbing /0365436/

Design principles/Bachelor of Design in Creative Media

Project 2 - Working Web Page

LECTURE

INSTRUCTIONS

Project 2-Working web Page

The assignment is to convert the static prototype from Project 1 into a fully functional and interactive web page. Use your knowledge of the web layout class to create a working website that closely matches the original prototype.

Review the static prototype from Project 1 and analyze its layout, typography, color scheme, and images.

Convert the design elements into code using HTML and CSS, ensuring a faithful representation of the original prototype.

Strive for pixel-perfect accuracy while maintaining responsive design principles to ensure compatibility across different devices and screen sizes.

Upload the files in Netlify, update your electronic portfolio using all the processes documented in the blog, and submit the link as your submission.

Neflify Link:

       https://exquisite-fox-191f87.netlify.app

Fig. 1.1 Original resume Week 6  (30/06/2024)

HTML：

Fig. 1.2 html code Week 6  (30/06/2024)

CSS:

Fig. 1.3  css code  Week 6  (30/06/2024)

According to Mr. Shamsul's suggestion, I changed to a simpler icon.

Fig. 1.4 icon images Week 9  (30/06/2024)

The original component was a ring, but I couldn't make a ring, so I could only use CSS code to make a circular fill background and stroke.

Fig. 1.5 original component Week 9  (30/06/2024)

Fig. 1.6 Circle made using CSS code Week 9  (30/06/2024)

Final picture :

Fig. 1.7 Final picture display Week 9  (30/06/2024)

Fig. 1.7 Responsive design Week 9  (30/06/2024)

Feedback

-N/A

---

Reflection

In this assignment, I learned how to use code to create a resume, and studied how to use code to make the page layout more like the resume picture I designed before. Although there are still some changes, I tried my best to do my best, which is a big improvement for me. I learned how to use CSS code to create circles, lines and text frame layouts, and I am satisfied with my progress. Overall, this is a challenging experience and I am happy to continue to improve my skills.