# 【Day7】製作自己的技能網頁！

## 簡易流程

graph LR;
版面架構與元素--->字體/大小--->顏色--->細修;

## 初步想法
1. 先想好個人履歷表通常必備哪些元素，按照自己的需求增減。
2. 利用adobe color cc找到喜歡的顏色組合，包含主色、輔色及功能性用色。

## 繪製草稿圖
參考[Pinterest](https://www.pinterest.com/)與[Behance](https://www.behance.net/)後畫出自己想呈現的版面
## 寫大致上的架構


## 成品
[codepen網址](https://codepen.io/btclnhrw-the-animator/pen/LYXdrjX)



## 感想
起初會不知道該如何下手，由於先前的名片製作是跟著老師打程式，因此不會出現甚麼大問題，然而，現在要自行從無到有把個人網頁寫出來，對我來說是一個艱難的挑戰。

把過程拆分成數個小步驟後比較容易執行，過程中多次碰上瓶頸，除了複習之前的筆記外，也得另外上網查許多資料才能盡可能滿足自己想要呈現的樣子，這也讓我學會自行尋找資源與具備發現、解決問題的能力。

雖然結果和原本擬定的草稿圖有些微落差，不過看起來也有七八成相似了，期待未來在學到更多知識後可以回來修改剩下的細節。

:::warning
內容主要整理自「動畫互動網頁程式入門 (HTML/CSS/JS)」課程，網址：https://hahow.in/courses/56189df9df7b3d0b005c6639/discussions?item=5a1e1745a2c4b000589dd21d
:::