Interactive Design Project 2 / Working Webpage

15 Sep 2023 - 15 Oct 2023 / Week 4 - Week 7
Leem Sejin / 0362419
Interactive Design / Bachelor of Design (Honour) in Creative Media
Project 2 - Working Webpage



LECTURE

Refer to Exercises



TASK

Based on the prototype done in Project 1, I started with HTML code in Dreamweaver.

I found the google font ; Lato because the letter is consistent and straight.

Fig 1.1 Google font

First, I divide the section into Main, Row, Footer, followed by sections in div.

Fig 1.2 Divide sections


I started with Main section, by creating <div>Main</div>.
Under the main section, I created two div for profile and title of the resume.

Fig 1.3 Divide sections

Fig 1.4 Divide sections

For the Row section, I was unsure to create vertical line next to the content. After the research, I found the timeline html code tutorial and decided to refer the the code for the resume.

Reference tutorial :

However, I was challenged to align the vertical lines because the line is keep disappearing and not aligned to the content although I changed the margin and padding.

Fig 1.5 first attempt

Fig 1.6 Second attempt


After figuring out the problem for two days, I decided to change a little bit of my prototype.

Fig 1.7 Updated prototype

Similar to the first attempt, I divided the prototype into sections

Fig 1.8 Dividing the sections

About section, I create new div and h2 for the title. Under the css code, I apply the background colour and change the margin value to make the content center.

Fig 1.9 

I created div section for education and experience section. Followed by

Fig 1.10 

Under CSS code, I create ::before to create the vertical line. 

Fig 1.11 

Fig 1.12

Fig 1.13




Final Submission

Fig 2.1 Website full screen jpeg

Fig 2.2 Website full screen pdf

Fig 2.3 Mobile full screen jpeg

Fig 2.4 Mobile full screen pdf


HTML CODE
Fig 2.5 HTML CODE pdf

Fig 2.6 CSS CODE pdf



REFLECTION
It was first time that creating working website based on the prototype, and I failed to create exactly same as the prototype. It took me a long time to figure out how to create timeline, and went through many failures for a week. In the end, I have to changed my prototype and managed to complete it within the given period. The journey was tough, but I feel that the understanding of the html and css code increase dramatically, because I find that the amount of the time I spent in coding become faster.


Comments

Post a Comment

Popular posts from this blog

Major Project 2 Final compilation

Image
23 Sep 2024 - 28 Mar 2025 / Week 1 - Week 8 Leem Sejin / 0362419 Major project 2 / Bachelor of Design (Honour) in Creative Media INSTRUCTION <iframe src="https://drive.google.com/file/d/1l21JUgA9rHGS7vO8UwTRIXr7f5uqSeGR/preview" width="640" height="480" allow="autoplay"></iframe> TASK To view Major project 1 proposal click here   Week 1 This week we get the brief about the major project 2. Basically, we need to execute the campaign that we proposed during major project 1. For my job, I need to create advertise motion graphic and 3D mock up for campaign booth. After the class, we discussed about the design of the 3D mock up, and we decided to create a stack of cube booth, inspired from the shape of rabbit r1 device and the minimalistic design direction. Fig 1.1 rabbit house sketch 1 ...
Read more

Design Portfolio - Final Compilation

Image
24 April 2024 - 24 Jul 2024 / Week 1 - Week 16 Leem Sejin / 0362419 Design Portfolio / Bachelor of Design (Honour) in Creative Media Final Compilation INSTRUCTION <iframe src="https://drive.google.com/file/d/18sleY6aHY7A2M3O8JXI1yqj5xGoSy-fG/preview" width="640" height="480" allow="autoplay"></iframe> TASK Task 1  For task 1, we are tasked to create showreel, resume, namecard, and portfolio website Namecard Before I proceed for drafting the name card, I went to research about the name card designs and collected the name card from illustrators who participated in KL Illustration Fair. Fig 1.1 Reference Name card Based on the research, I drafted out some of the layouts of the name card. I utilised the logo that created during the Advance Typography, my best illustrations, and tablet pens, to represent me as animator / Illustrator. Fig 1.1 Namec...
Read more

Major Project 1

Image
5 Feb 2024 - 29 Mar 2024/ Week 1 - Week 8 Leem Sejin / 0362419 Major Project 1 / Bachelor of Design (Honour) in Creative Media LECTURES Week 1 3 Choices of the major project 1. Commercial Project  World is seen as increasingly digital : Utilised the brand in the world ( eg. Nike / Adidas) and choose the product / conceptual of brand / services to do product launch or concept. 2. Find Industry Project and work with them 3. Impact Project ( Social Impact Project ) choose social problem and provide its solution ( refer to taylors impact lab) * avoid mental health* Do creative and immersive product launches Looking at the references such as Viemo INSTRUCTION <iframe src="https://drive.google.com/file/d/1LKiT6EpUX1tRyY6aZU6ZmOTg7gWYpSVl/preview" width="640" height="480" allow="autoplay"></iframe> TASK Week 1 This week, I got brief instruction about the major project 1....
Read more