（本文作者是 ALPHA Camp 課程學期二助教：前端工程師Dez，擁有四年軟體開發經驗，曾在104擔任前端工程師。）
在尋找一份前端工程師工作時，不論是軟體相關科系畢業學生、曾從事軟體產業工作者、或零經驗正在轉職的人，履歷內容除了放上學經歷外，有時也會條列出自己所使用過或學過的技能列表像是：
• 熟悉 Javascript
• 熟悉 Javascript 框架 (Vue, React)
• 對 Node.js, Express 有經驗
• 對 Sass, PostCSS 有經驗
緊密學習社群，幫你系統學習 JavaScript 前端完整基礎
但每個人對「熟悉」、「有經驗」的定義不同，此時該如何證明自己在這些網頁開發技術上的能力？
其中一個方法就是打造屬於自己的作品集，將作品集放在履歷中或者提供任何形式的連結，透過整理過的作品集做火力展示，不僅能更明確地「將自己的規格描述清楚」，也可以提高獲得求才市場面談邀約的機會。
若能在面談過程中將作品集 demo 出來，並能有條理地闡述專案發想、程式架構、碰到的困難及如何解決、專案延伸規劃等，甚至有機會獲得面試官的青睞，增加取得期望待遇的機率。
說了這麼多，你可能會問，那身為一個前端工作求職者，到底該如何打造自己的作品集？
以下我將透過四個步驟，根據個人經驗並整理其他參考資訊，在「如何準備前端作品集」這件事上提供建議。
一、找出可準備的作品種類
準備作品集的第一步，就是先評估自己的狀況來找出可準備的作品類型，除了就讀相關科系時做的專題或期末作業、有軟體工作經驗的專案內容外，其他佔最大宗的可能就是工作以外的 side project。
side project 顧名思義就是指正職工作以外的「私人項目」，像是放在 Github、Bitbucket、CodePen 等平台上的中小型專案，或像技術部落格、開源貢獻、自學課程作品、黑客松參賽作品、技術分享投影片等，甚至有些人會經營實體或線上的教學課程，這些都可以放進作品集中。
以上幾種類型，因為這邊是討論「前端面試」為主，所以不論是個人或與其他人一起協作的作品，建議盡量放與「網頁開發」內容有相關的，較能將重點聚焦在前端技能的展現上。
如果是其他非網頁開發的作品，真的很想放，可以挑一兩個你認為相關性高的放，像設計類作品、其他類型程式作品等。
或許讀到這邊，有些人會覺得「這些我都沒有怎麼辦」，在下一步中將會根據我自己過去的經驗，分別說明幾種如何創造作品的方法。
二、7種累積作品的方法
要創造作品的話，首先要去發想「要做什麼」，這一步可能對某些人來說是個難題，畢竟有時候都是由網站企劃或像是接案時由對方給予明確的需求。所以這邊提供幾個常見的方向：
1. 直接參考常見的練習作品
像是 to-do list、留言板、部落格、一頁式 landing page 等，加上自己設計的樣式風格，將這個作品變成獨一無二，除了做出基本功能外，也能發想一些相關的延伸功能。
舉例像是做一個 to-do list 的練習，原本可能只是利用 DOM 操作做到新增、完成、修改、刪除待辦這些基本功能。
進階再去做一些樣式設計、在 Unsplash 上找美圖當背景、CSS 動畫互動；再深入延伸功能像是，加上提醒功能、子項目、做成「子彈筆記」版本、串接 google 日曆或做成瀏覽器套件變成自己專屬的小工具；甚至加入一些後端功能，像是將待辦項目用資料庫存起來，並學習自己開 CRUD 的 API 等。
延伸閱讀：想成為專業開發者 如何用作品集打動雇主
2. 試著從一些自己常用的網站開始模仿
像是 FaceBook、Youtube 或各種購物網站等，從切版練習模仿，這樣做的好處是連功能與設計都可以直接參考，功能面可以挑一些自己有興趣的核心功能做。
例如像去模仿做一個 FaceBook 的話，切完個人頁的版面後，再加上動態牆、留言、按讚等功能。
3. 直接買書或尋找自學課程
對許多非相關科系或轉職者而言，有時常因為網路資訊太零散而沒有方向，也能直接買書參考其中範例，或直接參加自學課程，不論是實體或是線上課程。
以我自己兩年前轉職要當前端工程師時為例，買了書後但一直都沒有去看，索性就直接買了幾門線上課程，參加課程的好處是，直接給自己一種「既然錢都花了，就要下定決心把課程讀完」的動力，甚至也有現成的作業可以參考，對仍沒有太多經驗或比較沒學習方向的人是一個不錯的選擇。
在自學的課程中的作業，有一些可能當初因為時程壓力，只做到「達成標準」的程度，也都能將原本只是達標的內容再多下一些功夫，進化成一個專屬於你的作品，道理同上方的 to-do list 範例。
4. 思考自己想解決的問題
這是我最推薦的方法。
思考自己的生活中有沒有一些「一直重複在做」或是「很麻煩」的問題，且這些問題以你學過程式的感覺，會有種「這用程式解比較快」的想法，而且搜尋了一下有沒有其他人做過這樣的專案，發現都沒有完全符合你需求的工具。
那麼這很可能就可以拿來當作一個 side project，像是寫個小工具或寫成指令檔等。
以下舉幾個最近看到的例子：
這兩個例子都是為了解決直接用手動操作會比較沒效率的問題，他們不僅做出了一個作品，也利用紀錄開發筆記的方式，寫了一篇技術文章，而文章也順其自然變成另一項作品，是一舉兩得的最佳範例。
5. 技術部落格
我認為寫技術部落格也可以算是 side project 的一種，展現你平時對於技術的熱忱，與學習過程中的邏輯思考方式與如何解決問題，更可以看見你的樂於分享，利用閒暇時間經營的努力。
關於寫部落格的好處這邊就不贅述，網路上有相當多鼓勵工程師去經營部落格的文章。
像是 我為什麼鼓勵工程師寫 blog。關於寫作方法，可參考【教學】寫作六步驟 讓工程師撰寫流暢的技術部落格
6. 黑客松參賽作品
算是一種強制幫自己產生動力，去腦力激盪產出一個作品的方法。
雖然我好像不算參加過黑客松，但比較接近的例子就像去年為了學習 Three.js 而去報名 IT 鐵人賽，連續寫完 30 天後，不僅從零到入門，也做出了一個網頁版的 3D 射擊遊戲。
甚至有些黑客松是以小組形式一起參加的，大家可以對要做的作品一起做腦力激盪，也能解決一個人不知道要做什麼作品的問題。
7. 在學專題與工作專案
這部分寫在最後，因為只有就讀相關科系、工作經歷的族群才具備這些作品。
但有些在工作專案上的成果比較偏向「後台管理系統」，需要特定權限或登入才能操作，也可以提供截圖，並簡單描述用途、技術使用、主要負責部分、開發心得等內容。
另外工作專案的內容不管是提供連結、截圖、技術使用等，要注意有時也因為內容需要保密而無法提供，這方面就真得另尋其他種類的作品，平時就多找機會經營其他的 side project。
[optin-monster-inline slug=”q9c8jelrbkhccctuc740″]
三、將作品們整理成作品集
在上一步中整理了不少如何創造作品的方法，有了這些作品後，再來當然就是將作品們整理成作品集了：
1. 將作品放上雲端
將每一個作品放到雲端上，一般的靜態網頁可以利用 Github page、CodePen 這些平台；若是較複雜的專案，像是還有後端系統等，可能就需要另外做部署，部署到像是 Heroku、AWS 等平台。
2. 撰寫每個作品的文件與介紹
這裡直接以我最近實作的零套件日期選擇器為例，將整個專案內容利用放到 Github，並利用 Github page 作為線上 demo 的網頁
並撰寫其中的 README.md 將作品做文件化與介紹，內容可以包含以下幾點：
- 簡述作品功能與動機
- 作品截圖及 live demo 網址
- 在本地端架設環境的使用方法
- 專案檔案結構
- 條列簡述所使用到的技術，甚至可以解釋選擇技術的原因
3. 將作品整理成作品集
這邊介紹幾個可以放前端網頁作品集的平台：
- CodePen 個人頁：範例 – frank890417
- CakeResume 作品集：範例 – gabichiu
甚至是不選擇用現有的平台，直接自己手刻 landing page 式的履歷與作品集，雖然不如直接使用既有的平台方便，但也多了自己可以彈性調整的掌握度，我個人是比較頃向這種做法。
推薦幾個之前收集的範例：
四、持續優化作品集
作品集是一項需要持續整理優化的東西，要一次從零開始準備的確困難，平時就要養成整理習慣，並抽空回來重構程式碼等。
像我自己兩年前在找前端工作時特別刻的一個陽春的作品集靜態頁，有一些連結已經失效，或專案使用的套件需要升級等。
而且隨著工作經歷增長，也會發現以前一些作品內容實在太少，只是單純的線上課程的範例，也可以從作品集中拿掉或是有考慮將功能與設計做延伸，最近也正在持續在整理與維護中。
本身非設計背景的人，也可以學習使用 Bootstrap、Element UI、Materialize 等套件來幫忙增加整個網站的美感，可以參考 Mike 寫的從零學習 Materialize 打造個人頁面。
有一些認真的面試官甚至會點開原始碼去看，所以也可以從以下幾點著手：
- 統一整個專案的 coding style
- 注意各參數與 methods 的命名是否明確
- 將註解寫清楚
- 網站效能
結語
在前端面試中，準備作品集雖然不是必要，但當你擁有作品集，自然能有信心的說出你會的技術，能夠很熟練地使用，甚至可以應用在這些作品上，比起只有「熟悉」、「有經驗」這樣相對模糊不清的描述會具體的多。
這篇文章利用幾個大方向提供前端面試中，準備作品集的好處、種類、方法、如何整理及優化，希望對正在尋找前端工作的人們也有所幫助。
