Interactive Design - Exercise 3

Interactive Design - Exercise 3

In this exercise, we are required to use the basic HTML and CSS code we learned in previous classes to create a personal CV page. This exercise will help enhance our knowledge of HTML and CSS coding for our upcoming assignment, which requires us to create a website.

Before I started coding, I created a simple CV design in Figma. I began with a basic layout design as shown below:

Figure 1.1 Draft in Figma

Since this is my first time coding a resume by myself, I started with a simple, affordable design. As a result, my design is very simple and straightforward. I began coding with HTML to list all the necessary content and group it into separate sections. Then, I created a portrait container to make my resume resemble an A4 format. Then, I added CSS code to adjust the colour and font, along with some minor style tweaks, to create an attractive hierarchy for my CV. Along the way, I also made some changes to my design, so it doesn’t look exactly the same as the one in Figma.

Figure 1.2 Code evidence

Figure 1.3 HTML/CSS code

Lastly, I uploaded this CV to Netlify. Click here to view the website.

Figure 1.4 Full screenshot of my CV

Reflection

It is not an easy task to create a desired webpage using HTML and CSS. In Figma, I can come up with numerous design ideas that I wish to create. However, when it comes to coding, it's not as simple as dragging and dropping the components. Every component in the design requires manual coding, including its style, format, location, etc. This is why I started with a simpler design. I'm glad I was able to arrange the elements nicely with a tidy hierarchy and clear sections. I hope to utilize this experience to create a better website in my upcoming assignment.