09/10/2023 - 24/10/2023 (Week 7 - Week 8)
Lee Wing Kie / 0364251
Interactive Design / Bachelor of Design (Hons) in Creative Media
Project 2
INSTRUCTIONS
This assignment is to convert a static prototype from Project 1 into a fully functional and interactive web page. Students are instructed to utilize their knowledge of web layout, applying it through HTML and CSS to create a website that faithfully represents the original prototype. The emphasis is on maintaining design elements such as layout, typography, color scheme, and imagery, striving for pixel-perfect precision. Additionally, the implementation should adhere to responsive design principles to ensure compatibility across various devices and screen sizes.
Project 1 Digital Resume Prototype Design
 |
| Fig 1.1 Final Outcome Prototype for my digital resume design |
References for tutorial video on YouTube:
Website for Icon SVG
Design Process:
HTML
 |
Fig 1.2 HTML file in Adobe Dreamweaver
 | | Fig 1.3 HTML file in Adobe Dreamweaver-2 |
|
 |
| Fig 1.4 HTML file in Adobe Dreamweaver-3 |
 |
| Fig 1.5 HTML file in Adobe Dreamweaver-4 |
 |
Fig 1.6 HTML file in Adobe Dreamweaver-5
|
 |
| Fig 1.7 HTML file in Adobe Dreamweaver-6 |
 |
| Fig 1.8 HTML file in Adobe Dreamweaver-7 |
 |
| Fig 1.9 HTML file in Adobe Dreamweaver-8 |
 |
| Fig 1.10 HTML file in Adobe Dreamweaver-9 |
CSS
 |
| Fig 1.11 CSS file in Adobe Dreamweaver |
 |
| Fig 1.12 CSS file in Adobe Dreamweaver-2 |
 |
| Fig 1.13 CSS file in Adobe Dreamweaver-3 |
 |
| Fig 1.14 CSS file in Adobe Dreamweaver-4 |
 |
| Fig 1.15 CSS file in Adobe Dreamweaver-5 |
 |
| Fig 1.16 CSS file in Adobe Dreamweaver-6 |
 |
Fig 1.17 CSS file in Adobe Dreamweaver-7
|
 |
Fig 1.18 CSS file in Adobe Dreamweaver-8
|
 |
Fig 1.19 CSS file in Adobe Dreamweaver-9
|
 |
Fig 1.21 CSS file in Adobe Dreamweaver-10
|
 |
Fig 1.22 CSS file in Adobe Dreamweaver-11
|
 |
Fig 1.23 CSS file in Adobe Dreamweaver-12
|
 |
Fig 1.24 CSS file in Adobe Dreamweaver-13
|
 |
Fig 1.25 CSS file in Adobe Dreamweaver-14
|
 |
Fig 1.26 CSS file in Adobe Dreamweaver-15
|
 |
Fig 1.27 CSS file in Adobe Dreamweaver-16
|
 |
Fig 1.28 CSS file in Adobe Dreamweaver-17
|
 |
Fig 1.29 CSS file in Adobe Dreamweaver-18
|
 |
Fig 1.30 CSS file in Adobe Dreamweaver-19
|
After receiving feedback from Mr. Shamsul, I noticed that some of my HTML and CSS code was a bit complicated, resulting in an overall messy appearance. Additionally, while the overall layout was acceptable, adjustments were needed for optimal display on mobile and other devices. Therefore, based on Mr. Shamsul's feedback, I revised my work to achieve a cleaner and more user-friendly layout.
Revised
HTML file:
 |
| Fig 2.1 HTML file in Adobe Dreamweaver - revised1 |
 |
| Fig 2.2 HTML file in Adobe Dreamweaver - revised2 |
 |
| Fig 3.1 Final Outcome of my Project2 |
REFLECTION
Although I thoroughly enjoyed working on this project, the time constraints posed a significant challenge. Despite the limited timeframe, I endeavored to make my project exceptional and flawless. The primary hurdle I encountered was my restricted knowledge of HTML and CSS, prompting me to invest considerable time in watching tutorial videos on YouTube. Surprisingly, I successfully achieved the desired effects, but ensuring the website's compatibility across various displays proved to be a notable challenge.
I am sincerely grateful for this task as it provided an opportunity to explore something I had always wanted to try. The experience significantly contributed to the enhancement of my skills and knowledge in HTML and CSS.
Comments
Post a Comment