Code and Design Personal Website


Development & Design



Project Time

Dec. 2019 - Mar. 2020

I made my first portfolio website in 2017. This is the third time to iteriate it. In this process, I pushed myself looking back on the lessons, applying new skills, selecting my present project. It helps me reflect what I've learned in the past and plan what I want to do in the future.
What I did
Last time I play code is the time in school. After I steped into design carrer, most time I focused on the design process and final product effect. One day I realized that I want to make my design alive. That's how I start this project. I watched tutorial about HTML, CSS and a little simple Java Script. It's really easy to build the site, but not easy to make it looks same as your design. I spend around 100 hours to finish the site.
What I learn
  • I find the good design standard in my mind through reflcting my previous project. It is : focused on solving problem with simple and elegant solutions.

  • Learnt the language from developer side help me to refine my design. For instance, in order to adapt to different broswer size, I set column and most element unit to percentage in my code. Before I design everything in a fixed pixel size, now I realize relative size is important.

  • Use CSS design webpage is much faster than figma and sketch. One html and css, can implement all my case study by replacing text and image. Same time ensure all of them are highly consistency and in the same style.

  • Faster design adjustments with code. If I want to change spacing or text size, easy way is open chrome, click inspect, find the code, change the value, then refresh, done! View real time design feels really good.

  • Really fun to code! It's not easy at the beginning, but after you familiar with the language and rules, things can get easier.