Interactive design-Project 2

10.10.2023-24.10.2023(week7-week9）

Guan Wee Lun/0364012

Interactive Design/Bachelor of Design in Creative Media

Project 1 CV Prototype

---

Content

1. Lectures
2. Instruction
3. Project 2
4. Feedback
5. Reflection

---

Lectures

    refer to lecture in task 1

---

Instruction 

---

Project 2

Requirement-Working Web Page/Responsive CV

• 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 and submit the link here. Update your e-portfolio with all the processes documented in the blog.

Step 1

Creating HTML code regarding on the prototype I did it in Figma, As I have done my layout and create all information, I need last timeslot would be slightly easier to done it. I insert all of the info, figure and image inside, it looks boring before CSS style.

  

Figure 1.1 HTML Code Review. Png

Figure 1.2 HTML code 1.PNG

Figure 1.3 HTML code 2.PNG

Figure 1.4 HTML code 3.PNG

Figure 1.5 HTML code 4.PNG

Figure 1.6 HTML code 5.PNG

Step 2

Choosing font and creating layout using CSS - For the font, I am using Poppins font searched in google font, for the Layout color I use black on the left and white on the right.

Figure 1.7 CSS Style 1.PNG

Figure 1.8 CSS Style 2.PNG

Figure 1.9 CSS Style 3.PNG

Figure 2.1 CSS Style 4.PNG

Figure 2.2 CSS Style 5.PNG

Figure 2.3 CSS Style 6.PNG

Final Submission

Netlify link: WEELUN RESUME (project-2-guanweelun.netlify.app)