Loading...

(本文作者是 ALPHA Camp 課程學期二助教:前端工程師Dez,擁有四年軟體開發經驗,曾在104擔任前端工程師。)

在尋找一份前端工程師工作時,不論是軟體相關科系畢業學生、曾從事軟體產業工作者、或零經驗正在轉職的人,履歷內容除了放上學經歷外,有時也會條列出自己所使用過或學過的技能列表像是:

• 熟悉 Javascript
• 熟悉 Javascript 框架 (Vue, React)
• 對 Node.js, Express 有經驗
• 對 Sass, PostCSS 有經驗

但每個人對「熟悉」、「有經驗」的定義不同,此時該如何證明自己在這些網頁開發技術上的能力?

其中一個方法就是打造屬於自己的作品集,將作品集放在履歷中或者提供任何形式的連結,透過整理過的作品集做火力展示,不僅能更明確地「將自己的規格描述清楚」,也可以提高獲得求才市場面談邀約的機會。

若能在面談過程中將作品集 demo 出來,並能有條理地闡述專案發想、程式架構、碰到的困難及如何解決、專案延伸規劃等,甚至有機會獲得面試官的青睞,增加取得期望待遇的機率。

說了這麼多,你可能會問,那身為一個前端工作求職者,到底該如何打造自己的作品集?

以下我將透過四個步驟,根據個人經驗並整理其他參考資訊,在「如何準備前端作品集」這件事上提供建議。

一、找出可準備的作品種類

準備作品集的第一步,就是先評估自己的狀況來找出可準備的作品類型,除了就讀相關科系時做的專題或期末作業、有軟體工作經驗的專案內容外,其他佔最大宗的可能就是工作以外的 side project。

side project 顧名思義就是指正職工作以外的「私人項目」,像是放在 Github、Bitbucket、CodePen 等平台上的中小型專案,或像技術部落格、開源貢獻、自學課程作品、黑客松參賽作品、技術分享投影片等,甚至有些人會經營實體或線上的教學課程,這些都可以放進作品集中。

以上幾種類型,因為這邊是討論「前端面試」為主,所以不論是個人或與其他人一起協作的作品,建議盡量放與「網頁開發」內容有相關的,較能將重點聚焦在前端技能的展現上。

如果是其他非網頁開發的作品,真的很想放,可以挑一兩個你認為相關性高的放,像設計類作品、其他類型程式作品等。

或許讀到這邊,有些人會覺得「這些我都沒有怎麼辦」,在下一步中將會根據我自己過去的經驗,分別說明幾種如何創造作品的方法。

二、7種累積作品的方法

Photo by Campaign Creators on Unsplash

要創造作品的話,首先要去發想「要做什麼」,這一步可能對某些人來說是個難題,畢竟有時候都是由網站企劃或像是接案時由對方給予明確的需求。所以這邊提供幾個常見的方向:

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。

三、將作品們整理成作品集

在上一步中整理了不少如何創造作品的方法,有了這些作品後,再來當然就是將作品們整理成作品集了:

1. 將作品放上雲端

將每一個作品放到雲端上,一般的靜態網頁可以利用 Github page、CodePen 這些平台;若是較複雜的專案,像是還有後端系統等,可能就需要另外做部署,部署到像是 Heroku、AWS 等平台。

2. 撰寫每個作品的文件與介紹

這裡直接以我最近實作的零套件日期選擇器為例,將整個專案內容利用放到 Github,並利用 Github page 作為線上 demo 的網頁

並撰寫其中的 README.md 將作品做文件化與介紹,內容可以包含以下幾點:

  • 簡述作品功能與動機
  • 作品截圖及 live demo 網址
  • 在本地端架設環境的使用方法
  • 專案檔案結構
  • 條列簡述所使用到的技術,甚至可以解釋選擇技術的原因

3. 將作品整理成作品集

這邊介紹幾個可以放前端網頁作品集的平台:

甚至是不選擇用現有的平台,直接自己手刻 landing page 式的履歷與作品集,雖然不如直接使用既有的平台方便,但也多了自己可以彈性調整的掌握度,我個人是比較頃向這種做法。

推薦幾個之前收集的範例:

四、持續優化作品集

作品集是一項需要持續整理優化的東西,要一次從零開始準備的確困難,平時就要養成整理習慣,並抽空回來重構程式碼等。

像我自己兩年前在找前端工作時特別刻的一個陽春的作品集靜態頁,有一些連結已經失效,或專案使用的套件需要升級等。

而且隨著工作經歷增長,也會發現以前一些作品內容實在太少,只是單純的線上課程的範例,也可以從作品集中拿掉或是有考慮將功能與設計做延伸,最近也正在持續在整理與維護中。

本身非設計背景的人,也可以學習使用 Bootstrap、Element UI、Materialize 等套件來幫忙增加整個網站的美感,可以參考 Mike 寫的從零學習 Materialize 打造個人頁面

有一些認真的面試官甚至會點開原始碼去看,所以也可以從以下幾點著手:

  • 統一整個專案的 coding style
  • 注意各參數與 methods 的命名是否明確
  • 將註解寫清楚
  • 網站效能

結語

在前端面試中,準備作品集雖然不是必要,但當你擁有作品集,自然能有信心的說出你會的技術,能夠很熟練地使用,甚至可以應用在這些作品上,比起只有「熟悉」、「有經驗」這樣相對模糊不清的描述會具體的多。

這篇文章利用幾個大方向提供前端面試中,準備作品集的好處、種類、方法、如何整理及優化,希望對正在尋找前端工作的人們也有所幫助。

延伸閱讀:

後端工程師面試必看,我該準備什麼作品集?

3分鐘小測驗,找到你的前端自學入口

成為企業渴求的程式人才!

在家學會 JavaScript 網路開發

全新「全端 Web App 開發」課程,給你看得見的學習成效!
超過 90% 轉職成功,400 位來自亞洲各國的 ALPHA Camp 校友,畢業後達成轉職、創業、出國工作的夢想!

探索「全端 Web App 開發」課程

給期待創新改變的你

前端x後端x全端 完整工程師技能樹

90% 學生轉職成功,職涯競爭力更上層樓
最專業的「全端 Web App 開發」課程,上班族邊工作也能同時培養第二專長!

加入 ALPHA Camp 學程式開發

學期一|程式設計入門

零基礎也學得會的程式入門課!

開始學帶得走的技能,為自己未來的成長鋪路

學期二|JavaScript 完整前端基礎

系統化學習 JavaScript

實作打好前端基礎,成為扎實的網頁開發者

「學期一 程式設計入門」9 月班 報名倒數
馬上報名