Interactive Design / Project 2 / Working Web Page

18.6.2024 - 29.6.2024  / Week 9 - Week 10  

ID name YANG HANWEN

ID number 0364085

Program name bachelor of design (honors) in creative media

Project 2 - Working Web Page

TABLE OF CONTENTS

Instruction


Lectures

Week 9 | Box Model



Working Web Page


The goal of this assignment is to convert the static prototype from Project 1 into a fully functional and interactive web page.

Requirements：
  • Use the knowledge of web page layout to create a working website that closely matches your original prototype.
  • Review static prototype from Project 1 and analyze its layout, typography, color scheme, and imagery.
  • Use HTML and CSS to translate the design elements into code, ensuring a faithful representation of the original prototype.
  • Aim for pixel-perfect precision while maintaining responsive design principles to ensure compatibility across different devices and screen sizes.
  • Upload the files in Netlify, update this e-portfolio using all the processes documented in this blog, and submit the link as a submission.
Process:

First of all, my CV in Project 1 is like this↓.


That is to say, my CV in the Figma project at that time looked like this↓.


↓ Below is the code and screenshots of this project I did in Adobe Dreamweaver.


screenshot

                                           code

screenshot

                                           code

After checking in the browser's developer mode and feeling that the problem is not serious...


Directly put my project folder into Netlify to generate a web page.


PC

mobile terminal

Feedback

I did not ask for feedback from Mr. Shamsul Hamimi Ab. Rahman, but my classmate used my work and asked for feedback from him.

The text part of "Contact Information" should be typed by me instead of pasting pictures.


 

Of course, I think 
← this part is also included.

In the skills section, each icon should be pasted separately instead of putting all the icons on the entire background board.
“The score will be there and you will pass, but it won't be high.” ———— Mr. Shamsul Hamimi Ab. Rahman's comments on this project as reported by my classmate

Reflection

Although my limited experience in HTML and CSS made me feel daunted about starting this project, the basic coding skills I had acquired from previous projects and exercises gave me confidence. Faced with the challenge of creating such a complete webpage, I realized that the hardest part was actually getting started. By breaking the entire webpage into small parts and tackling them one by one, the task became less daunting. At first, I had to frequently consult coding tutorials to solve each small problem, but over time, I began to rely on my own knowledge to find solutions. Although there were some complex parts of the prototype that could not be fully translated into code, other than that, my first webpage was very close to the prototype and I was quite satisfied with it overall. This experience taught me a valuable lesson: don't be intimidated by tasks that seem huge at first glance, and even complex challenges can be gradually overcome through gradual learning and experience.

Comments

Post a Comment

Popular posts from this blog