Interactive Design - Project 2

2/10/2023 - 24/10/2023 (Week 6 - Week 9)
Katelyn Tan Kye Ling (0354148)
Bachelor Of Design In Creative Media (Interactive Design)
Project 2 - Resume Working Website

---

LECTURES

WEEK 6 - 2/10/2023

Class cancelled. Class cancelled. However, Mr. Shamsul did give us an exercise to complete along with the recorded lecture and tutorial video.

WEEK 7 - 9/10/2023

We learnt about box model, like div. 

Click here to see in class activity.

WEEK 8 - 16/10/2023

ILW

WEEK 9 - 23/10/2023

Click here to see in class activity.

---

INSTRUCTION

For this assignment, we had to turn our resume prototype from PROJECT 1 into an actual website with by applying our html and css knowledge from class.

Progress:
I thought that my prototype had too many unnecessary elements and there were also things we haven't learnt about so I couldn't include in my resume. Therefore, I edited my prototype slightly by simplifying it.

Fig 1.1 New Resume

I started working on things I couldn't add directly to HTML or CSS, so I made them into pictures first.

Fig. 1.2 Made my rectangle picture into a circle

Fig. 1.3 Education Timeline

Fig 1.4 Skill Meter

Fig. 1.5 Hobbies

I then started to work on the HTML part of the resume. And this was how it turned out.

P.s: I did edit my html slightly while doing CSS to fix whatever was too large or too small.

Fig. 1.6 HTML #1

Fig. 1.7 HTML #2

Fig. 1.8 HTML #3

Fig. 1.9 HTML #4

For the CSS part, I added things with the knowledge I learnt from class, for example the background, font, button, background box, text layout etc.

Special Pointers:

As learnt in class, we could change the width of the entire container. I made mine to 80% which is approximately the size of my original resume.

Fig. 1.10 Container Width

As for the projects section, it was originally supposed to be bullet points but I felt it looked a bit messy therefore I decided to just make the "task 1/2/3" bold.

Fig. 1.11 Original Project Section

Fig. 1.12 Project Section in HTML

After some feedback from Mr. Shamsul, I edited my resume.

Removed background colour for work experience and contacts section to balance it:

Fig. 1.13 Before Correction

Fig. 1.14 After Correction

REDOING MY WORK:

After checking with Mr. Shamsul on my work during class, there was a few problems therefore I edited them:

1. Education image doesn't work well have to change layout.

2. Skills section have to put image 1 by 1, one whole picture together will be inconvenient for mobile responsive.

3. Hobbies section's format has to change as well for it to work better for mobile responsive.

4. Background colour for skills and hobbies can be removed.

After the entire feedback session, I found that I did many mistakes in my HTML and CSS work. Therefore, I decided to redo my entire work editing parts of the resume and also adding newer things.

Here was what I edited/added:

Click here for the version of the resume before it was edited.

I made the education section more simpler so that it would be mobile responsive friendly.

Fig. 2.1 Before (Education Section)

Fig. 2.2 After (Education Section)

I removed the background colours for both skills and hobbies section and changed the layout of the hobbies section. Also, the skills section was originally all 4 logos in one picture and in the new one, all 4 of them are separated.

Fig. 2.3 Before (Skills and Hobbies Section)

Fig. 2.4 After (Skills and Hobbies Section)

I felt that the projects part was a bit plain and I also did the HTML and CSS part wrongly by complicating it therefore I corrected it and also made it look more welcoming and neat.

Fig. 2.5 Before (Project Section)

Fig. 2.6 After (Project Section)

Previously I put both the work experience and contacts section together, however I decided to separate it afterwards. I added some details and information about my work experience and for the contacts I put a contact form as well. Contact form tutorial from here.

Fig. 2.7 Before (Work Experience and Contacts Section)

Fig. 2.8 After (Work Experience Section)

Fig. 2.9 After (Contacts Section)

Final Resume: https://katelyn-project2.netlify.app/

---

FEEDBACK

Week 8: 

"To make work experience and contacts section balanced, I suggest you remove the background color."

"The image for timeline should be set to 100% so that it can be responsive, same as for skills and hobbies section. Remove the width and height attribute in HTML."

Week 9:

1. Education image doesn't work well have to change layout.

2. Skills section have to put image 1 by 1, one whole picture together will be inconvenient for mobile responsive.

3. Hobbies section's format has to change as well for it to work better for mobile responsive.

4. Background colour for skills and hobbies can be removed.

---

REFLECTION

Experrience
Overall, this project was quite fun! Though it was quite tedious trying to remember the specific terms to use and having so many class's and sections, it was interesting and fun to see my resume slowly build up. From just a plain white canvas with lots of words written on it, to it starting to have colours and different elements added to it. 

Observation
I observed that sometimes simple is best. When you have too many fancy things, things will start to get complicated. Especially since I just started learning how to code, I definitely shouldn't started slow and simple instead of having fancy things which ended up with me just scrapping those ideas off.

Findings
I start to admire and appreciate web pages much more now as making one isn't as easy as one thinks. Coding has a lot of steps to it, one wrong placement or mis-spelling could lead to checking through the long list of HTML or CSS again. Nevertheless, I did learn very well from Mr. Shamsul on how to code and with the guidance of Mr. Shamsul I was able to finish this entire project.