Interactive Design - Project 02: Working Web Page
INTERACTIVE DESIGN GCD 60904
WEEK 06 - WEEK 08 (29.05.2024 - 12.06.2024)
NAME: Chin Tze Wei
I.D: 0357423
COURSE: Interactive Design / Bachelor of Design (Honors) in Creative Media
GROUP: Class 01 Sec 04
Interactive Design - Project 02: Working Web Page
- LIST -
TABLE OF CONTENT
1.
Instruction
2.2
Create prototype
2.4
HTML with CSS
2.5
Final Submission
3.
Feedback
4.
Reflection
1. INSTRUCTION
Module Information Booklet (MIB)
<iframe
src="https://drive.google.com/file/d/1YEH0Ri7vzbhdZBqUNjLtI80L6MrIDxmn/preview"
width="640" height="480" allow="autoplay"></iframe>
2. PROJECT 02: WORKING WEB PAGE
Things to do for complete the task:
- Transform the static website from Project 01 (Resume) into a functioning interactive website
- Apply your knowledge of web layout class to create a working website that closely aligns with your original prototype.
- Ensure compatibility across different devices.
- Upload to Netlify.
2.1 Task 01 Prototype
This is the prototype that I created during Project 01. Since I need to
transform this to a functioning interactive website, I need to create it
according to this protoype I made before. But it is to hard for me to recreate
it by typing code in Adobe Dreamweaver because I just learn HTML and CSS for
not a long time.
Figure 2.1 Prototype in Project 01
2.2 Create prototype
Since Mr Shamsul tasked us to create an interactive and functionable website
page so I then create a website page that with navigation bar and that also
can apply my knowledge of web layout that learned from class for this Project
02.
.png)
Figure 2.2 Prototype for Project 02
2.3 Putting the naked HTML down based on the prototype content
I started by putting all my resume content into HTML.
Figure 2.3 Naked website with HTML only
Figure 2.4 Website with HTML only
2.4 Touching the naked HTML with CSS
Figure 2.5 Working Progress in CSS
At first, I tried to put loader at my website, but I found out that the loader
is not working so I gave up.
Figure 2.6 Working Progress in CSS
Figure 2.7 Website with css (loader but fail and header)
After finnish the code for the header and about me part, I then continue to
the HObby part. I have code out the card.
Figure 2.8 Working Progress in CSS (Hobbies part)
.png)
Figure 2.9 Working Progress 02 in CSS (Hobbies part)
Video 01 Website with CSS (Hobbies part)
While finnish the hobbies part, I then start to work on the Project part,
which I use sliders to code this part.
Video 02 Working Progress in CSS (Project)
Video 03 Website with Slider in Project part
Overall website function
Video 04 Overall website function
2.5 Final Submission
Website link: Click
HERE
2.5.1 Final Website Screengrab
Figure 2.10 Final Webpage Screengrab
2.5.2 Final HTML
<iframe
src="https://drive.google.com/file/d/1zSXbTzFyHGp45m9EuAaNDEFzHgmGzrEi/preview"
width="640" height="480" allow="autoplay"></iframe>
2.5.3 Final CSS
<iframe
src="https://drive.google.com/file/d/1zP3l071qv34iEk5zrdZidZirNYbFEgBh/preview"
width="640" height="480" allow="autoplay"></iframe>
3. FEEDBACK
No feedback recieved from Mr Shamshul.
4. REFLECTION
I felt relieved when the code finally worked. The inspect tool in Google Chrome was a real lifesaver. I relied on it heavily throughout this task. After finishing the webpage, I realized that it had a lot of white space, and I have no idea how to fix it.
