Interactive Design/ Project 2: Working Web Page

29th May 2024 - 29th June 2024 (Week 6 - Week 10)
Natalie Chu Jing Xuan, 0354589
Interactive Design, Bachelor of Design (Honours) in Creative Media

Project 2: Working Web Page

---

Table of Contents 

1. Module Information Booklet (MIB)
2. Part 1 Prototype Design
3. Part 2 Working Web Page

---

Module Information Booklet (MIB

---

Part 2 Prototype Design - Digital Resume/CV

Objective

This assignment aims to create a fully functional and interactive web page based on our Project 1 static prototype. Using the skills we learned in web layout class, we will produce a functional website that closely resembles our initial prototype. 

• Review our static prototype from Project 1 and analyse its layout, typography, colour 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 e-portfolio with all the processes documented in the blog, and submit the link as a submission

Process

I start with studying the layout of what I did previously in Project 1. 

Fig1.1 Studying the layout

In Fig.1.2, I link the CSS style file, font (Judson), and the star icon link that I'll be using later on. I also key in the different classes for creating the layout. 

　Fig.1.2 Header

Fig.1.3 Round profile pic CSS

I placed About Me & Contacts in a row, then attach the Instagram and Blogger icon to link to my accounts. I uses table to list down the phone and email. 

Fig.1.4 About me & Contacts

I put Educations and Experience in a div class called "left-block":

Fig.1.5 Educations & Experience

"right-block" contains Languages, Software Skills, and My Hobbies. Fig.1.5 shows the Languages. 

Fig.1.6 Languages

For the rating bar, I uses <div class="skill-bg"> <div class="LANGUAGE"></div> </div> in HTML, and this is my CSS:

Fig.1.7 Rating bar CSS

For the star in Software Skills, I uses <span class="fa fa-star fa-2x"></span> in HTML, and the CSS for the skills are:

Fig.1.8 Rating star CSS

Final Outcome

Netlify link: https://nataliechujingxuanproject2resume.netlify.app/

HTML code:

CSS code: