Interactive Design - Project 2: Working Web Page

10/10/2023 - 24/10/2023 Week 7- Week 9
Ng Jia Ern 0363033
Bachelor of Design (Honours) in Creative Media
Interactive Design
Project 2: Working Web Page

---

---

LECTURE NOTES

Refer to another blog

INSTRUCTION

Part 2 Working Web Page – Digital Resume/CV

This assignment aims 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, 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 and submit the link in Google Classroom. Update your e-portfolio with all the processes documented in the blog

PROCESS

First, I began by analyzing my prototype. I noticed that my layout could be effectively displayed using a grid system, dividing it into 50% columns. I also categorized similar headings during the HTML stage, making it more convenient to style them in CSS.

Additionally, I exported all assets from Figma. I chose to export all icons in SVG format and placed them in the "images" folder.

Furthermore, within the major sections, I broke them down into smaller groups and carefully planned how to structure them. For example, for the "contact" section, I used "display: flex." In the "experiences" section, I employed an unordered list <ul>, while for "languages," I utilized a <ul> without bullet points. In the "personal skills" group, I applied a nested grid to achieve the desired layout.

I began coding from HTML. First, I entered all the content and then differentiated them using <div> elements, assigning classes to each of them based on their respective groups. This made it easier to select and style them in the CSS later on.

Then I started coding the CSS to style them according to the prototype's appearance. It's important to remember to import fonts from Google Fonts. To make the webpage responsive, I used @media only screen and (max-width: 768px)" to specify changes for screens or windows smaller than 768px. For example, I made my profile picture and name, which were originally side by side, stacked on top of each other in a block layout on smaller screens.

For the contact list, I learned on YouTube to code the icon in line with the text. Whereas the language progress bar is learned from bilibili.

Outcome on Week 9:

On large screen:

On small screen:

Originally, I intended to add that rectangle after the profile picture, as shown in the prototype. However, after receiving feedback from Mr. Shamsul, I thought it might look better without it, for a more minimalist design. 

There are still some minor issues to address, like aligning the icons in the contact list and adjusting the professional skills section where the icons, text, and bars are evenly distributed. I want to widen the bars and align the text to the left. 

Additionally, I need to make the website responsive, particularly for small screens, and adjust the layout of the contact list, among other things.

Refinement:

I figured out why the contact list can't align liao. Because I set the general setting of all element's padding and margin are 0. So need to add a specific selector to select those elements that I want to modify. eg. .contact-list img, .contact-list p {padding:initial; margin:initial; }

Alright, the issues have been resolved!

Another problem is the Professional Skills list. 

Originally, I grouped icon, text and progress bar in one div, then displayed it flex. But I can't archive aligned text on the left. So I think another way.

I group the icons and text in one div, and the progress bar into another div. So that I can set the skill-group div on the left, and the skill-progress div on the right.

Yay, problem solved.

Responsive:

Final Outcome:

Link to my working web page: https://ngjiaern-project2.netlify.app/

On Big screen:

On small screen:

REFLECTION

Actually, I completed this assignment in a single day, pushing myself to the limit. There are some details that I'm not entirely satisfied with, so I plan to revisit and refine them when I have more time. I found that coding was manageable once I grasped the basic principles. If I got stuck in the middle, I would search for tutorials online to learn about the specific part I needed. I discovered a YouTuber who explains things very well. Before starting this assignment, I watched his tutorial where he coded his resume webpage while explaining why he made certain choices. By the time I finished the video, I had a good understanding of the entire process of coding a webpage, which helped me avoid feeling lost at the beginning.

Apart from that, the most helpful resource for me in this assignment was ChatGPT. Many times, when I got stuck in the middle and wasn't sure how to achieve the desired effect, I would copy my code and ask ChatGPT for guidance on how to proceed. Additionally, when I encountered errors, ChatGPT helped me troubleshoot and correct them. For example, during the coding process, I couldn't achieve a specific effect, and it was only after consulting ChatGPT that I realized I had made a typo, resolving my major issue.