(原文發表於 logdown,重新檢視並改寫過後移植來這)

我想成為一個前端工程師,現在有在學一些基本的 HTML 跟 CSS,可是我不知道要到什麼程度才能找到工作,該怎麼辦?

這種類似的問題有一大堆人問過我,我想說乾脆就寫成一篇文章,以後有人問同樣問題的時候我就丟這篇給他看,就不用一直重複回答相同的問題了。

有一種東西你一定看過,就是在徵才說明上面會寫的工作敘述跟需求,前者大概是你進去公司以後會負責一些什麼事情,後者則是這間公司所需要的人才應該要有哪些技能。

這個就是很好的切入點,你只要多研究幾份,很快就可以歸納出各個公司幾乎都必備的技能是哪些,你再拿這一個個的關鍵字去查就好了。

來,我示範給你看!

第一個先來找 ptt 的 Soft_Job 版,我用「徵才」跟「前端」兩個關鍵字下去搜尋,挑了最新的前三篇:

第一間

https://www.ptt.cc/bbs/Soft_Job/M.1487743978.A.09A.html

工作技能需求:

  1. 熟悉 HTML5、CSS3、jQuery、Javascript
  2. 熟悉 Bootstrap 或其它 CSS Framework

加分項目:

  1. 運用 Ajax 串接第三方 API
  2. Git 使用經驗
  3. Wordpress 建置經驗
  4. Sass / SCSS / Less
  5. Grunt / Gulp
  6. AngularJS / Node.js

第二間

https://www.ptt.cc/bbs/Soft_Job/M.1487297666.A.720.html

工作技能需求:

  1. 熟悉Javascript/jQuery網站程式開發
  2. 熟悉HTML 5、CSS 3語法
  3. 具團隊合作能力,分工合作完成交付之程式開發及維護
  4. 良好溝通能力,團隊配合度高

加分項目:

  1. 有React.js,Node.js開發經驗
  2. 有Web遊戲開發經驗
  3. 熟悉cocos2d、Three.js、Phaser、createJS、melonJS、egretJS等任意一款引擎者優先;
  4. 具備物件導向、MVC的軟體開發概念
  5. 版本控管觀念(SVN or Git)

第三間

https://www.ptt.cc/bbs/Soft_Job/M.1482919984.A.927.html

工作技能需求:

  1. 需與後端開發人員共同開發 (後端使用PHP)
  2. 至少精通一種Anguar.js、React.js、Vue.js或其他前端框架
  3. 熟悉響應式設計,並有前端優化經驗
  4. 熟悉Git操作
  5. 有良好溝通能力與異於常人的抗壓能力 ^.<

加分項目:

  1. 具備 SEO 知識
  2. 接觸過Artificial Neural Network, Natural Language Processing, Big Data, FinTech, BOT 機器人

看了這三篇,你有沒有一些感覺了?就算你今天根本不懂那些英文單字是什麼,你大概也可以歸納出幾個一直見到的關鍵字,就代表這些關鍵字是每一個前端工程師的職缺都需要的。

如果你還沒感覺,我們從 mit.jobs 再找兩個職缺給大家看看。

第四間

https://mit.jobs/jobs/2071

工作技能需求:

  1. HTLM/CSS/JAVA Script/ajax前後台資料串接

加分項目:

  1. 對前端框架Vue Js.有概念/有設計UI,UX概念

(題外話,你應該看到工作技能需求的部分會覺得有點怪怪的
「JAVA Script」,嗯…是我的話看到這個就把這間公司淘汰掉了)

第五間

https://mit.jobs/jobs/2019

工作技能需求:

  1. 基本使用 Git 能力
  2. 熟悉 HTML5 、CSS3、ES6+ 語法
  3. 使用過 React.js
  4. Flux/Redux or 任何與React搭配的state management
  5. SASS or postCSS
  6. 不依賴css framework切版的能力
  7. Responsive Web Design 網站製作經驗
  8. jQuery 使用經驗

加分項目:

  1. Webpack使用/設定經驗
  2. 熟悉前端測試
  3. 對後端有一定了解,Ruby on Rails尤佳
  4. 瞭解scrum流程
  5. 具備 RESTful API 介接經驗

如果這樣還不夠,我們再去新創徵人平台 yourator 找兩間

第六間

https://www.yourator.co/companies/meepShop/jobs/513

工作技能需求:

  1. 專精 JavaScript、HTML、CSS。
  2. 熟悉 Mac os 或 Linux 系統尤佳。
  3. 解決跨瀏覽器兼容性問題,客戶端性能方面的考量。
  4. 能呈現出 design 和 UX 的敏感性。
  5. 重視程式品質,不讓 bug 隨意出現。

加分項目:

(題外話,找 junior 工程師要找「專精」,好像有哪裡怪怪的…)

第七間

https://www.yourator.co/companies/Kyper/jobs/1596

工作技能需求:

  1. Computer Science相關科系畢業
  2. 想專職走前端開發者
  3. 具備一定前端技術背景者(Javascript/HTML5/CSS),且有自己寫過網站的經驗。
  4. 投遞履歷時請一併附上網站作品集及英文CV

加分項目:

題外話,其實看了這麼多徵才文以後,還有一點很不錯的就是你會發現徵才文也有寫得好的跟寫得爛的,寫得好的會盡量把他們所需要的技能、進來以後會負責的工作內容以及加分項目都寫得清清楚楚,讓你知道你該往哪個方向去努力。

寫得爛的就只會寫一些範疇很大的技能需求,讓你根本不知道他要的是什麼,或者是連技術名詞都拼錯。怕傷感情,就不放我覺得寫得很爛的了,而是讓大家看看一篇我心目中的徵才文範本。

第八間,徵才文範本

https://www.facebook.com/photo.php?fbid=10206519640549181&set=a.2104140142503.90823.1815507975&type=3&theater

工作技能需求:

  1. 具備鍵盤盲打之技能。
  2. 工作環境使用並熟悉 Linux 或 macOS 作業系統。
  3. 熟悉 command line (命令列) 操作。
  4. 對新技術有熱情及渴望,有信心可獨立完成專案。
  5. 良好的邏輯及溝通能力,當責不卸責。
  6. 瞭解 HTML / CSS,懂得快速實現 Mockup / RWD / SPA。
  7. 瞭解 JavaScript / ES6 特性及語法,懂得善用 JavaScript 框架或函式庫 (如 Angular.js / React.js / Vue.JS 等)
  8. 熟悉 Git / GitHub,包括但不限於分支操作、衝突解決及 Pull Requests。

加分項目:

  1. 英文打字至少每分鐘 30 字,中文打字至少每分鐘 40 字。
  2. 熟悉前端開發流程,懂得程式檢查、精簡化、模組化。
  3. 懂得編寫清晰易懂且容易維護的程式碼。
  4. 熟悉各瀏覽器的特性與限制,懂得跨瀏覽器的解決方案。
  5. 熟悉前端自動部署、測試及除錯。
  6. 熟悉高效前端元件操作與控制,如高效 DOM 元件處理。
  7. 熟悉前端資訊安全設計。
  8. 擁有組織大型專案結構的技巧及經驗。

但這篇值得推薦的除了把工作技能需求寫的很清楚以外,工作環境、面試流程、薪資範圍都寫得一清二楚,這資訊揭露的程度根本海放其他公司。

開始歸納囉

你可以先試試看把上面那八間的工作技能需求跟加分項目歸納一下,看你會歸納出什麼樣的結果。

這邊有一點要注意的是工作技能需求有時候會跟行業有關,例如上面有個遊戲業的就可能會要求遊戲開發相關經歷,像是這種跟產業有直接相關的都可以先刪掉,我們只要找出「大部份公司都要求」的項目就好。

下面的列表是這八間的內容全部都合在一起的結果,仔細看,你一定能看出什麼!

工作技能需求

  1. 熟悉 HTML5、CSS3、jQuery、Javascript
  2. 熟悉 Bootstrap 或其它 CSS Framework
  3. 熟悉Javascript/jQuery網站程式開發
  4. 熟悉HTML 5、CSS 3語法
  5. 具團隊合作能力,分工合作完成交付之程式開發及維護
  6. 良好溝通能力,團隊配合度高
  7. 需與後端開發人員共同開發 (後端使用PHP)
  8. 至少精通一種Anguar.js、React.js、Vue.js或其他前端框架
  9. 熟悉響應式設計,並有前端優化經驗
  10. 熟悉Git操作
  11. 有良好溝通能力與異於常人的抗壓能力 ^.<
  12. HTLM/CSS/JAVA Script/ajax前後台資料串接
  13. 基本使用 Git 能力
  14. 熟悉 HTML5 、CSS3、ES6+ 語法
  15. 使用過 React.js
  16. Flux/Redux or 任何與React搭配的state management
  17. SASS or postCSS
  18. 不依賴css framework切版的能力
  19. Responsive Web Design 網站製作經驗
  20. jQuery 使用經驗
  21. 專精 JavaScript、HTML、CSS。
  22. 熟悉 Mac os 或 Linux 系統尤佳。
  23. 解決跨瀏覽器兼容性問題,客戶端性能方面的考量。
  24. 能呈現出 design 和 UX 的敏感性。
  25. 重視程式品質,不讓 bug 隨意出現。
  26. Computer Science相關科系畢業
  27. 想專職走前端開發者
  28. 具備一定前端技術背景者(Javascript/HTML5/CSS),且有自己寫過網站的經驗。
  29. 投遞履歷時請一併附上網站作品集及英文CV
  30. 具備鍵盤盲打之技能。
  31. 工作環境使用並熟悉 Linux 或 macOS 作業系統。
  32. 熟悉 command line (命令列) 操作。
  33. 對新技術有熱情及渴望,有信心可獨立完成專案。
  34. 良好的邏輯及溝通能力,當責不卸責。
  35. 瞭解 HTML / CSS,懂得快速實現 Mockup / RWD / SPA。
  36. 瞭解 JavaScript / ES6 特性及語法,懂得善用 JavaScript 框架或函式庫 (如 Angular.js / React.js / Vue.JS 等)
  37. 熟悉 Git / GitHub,包括但不限於分支操作、衝突解決及 Pull Requests。

加分項目

  1. 運用 Ajax 串接第三方 API
  2. Git 使用經驗
  3. Wordpress 建置經驗
  4. Sass / SCSS / Less
  5. Grunt / Gulp
  6. AngularJS / Node.js
  7. 有React.js,Node.js開發經驗
  8. 有Web遊戲開發經驗
  9. 熟悉cocos2d、Three.js、Phaser、createJS、melonJS、egretJS等任意一款引擎者優先;
  10. 具備物件導向、MVC的軟體開發概念
  11. 版本控管觀念(SVN or Git)
  12. 具備 SEO 知識
  13. 接觸過Artificial Neural Network, Natural Language Processing, Big Data, FinTech, BOT 機器人
  14. 對前端框架Vue Js.有概念/有設計UI,UX概念
  15. Webpack使用/設定經驗
  16. 熟悉前端測試
  17. 對後端有一定了解,Ruby on Rails尤佳
  18. 瞭解scrum流程
  19. 具備 RESTful API 介接經驗
  20. 英文打字至少每分鐘 30 字,中文打字至少每分鐘 40 字。
  21. 熟悉前端開發流程,懂得程式檢查、精簡化、模組化。
  22. 懂得編寫清晰易懂且容易維護的程式碼。
  23. 熟悉各瀏覽器的特性與限制,懂得跨瀏覽器的解決方案。
  24. 熟悉前端自動部署、測試及除錯。
  25. 熟悉高效前端元件操作與控制,如高效 DOM 元件處理。
  26. 熟悉前端資訊安全設計。
  27. 擁有組織大型專案結構的技巧及經驗。

當你把那些幾乎只有出現過一次的關鍵字剔除掉以後,大概會長這樣(我把相似的關鍵字排在一起並稍微分類):

工作技能需求

HTML, CSS, JavaScript, jQuery

  1. 熟悉 HTML5、CSS3、jQuery、Javascript
  2. 熟悉HTML 5、CSS 3語法
  3. 熟悉 HTML5 、CSS3、ES6+ 語法
  4. HTLM/CSS/JAVA Script/ajax前後台資料串接
  5. 熟悉Javascript/jQuery網站程式開發
  6. 專精 JavaScript、HTML、CSS。
  7. 具備一定前端技術背景者(Javascript/HTML5/CSS),且有自己寫過網站的經驗。
  8. 瞭解 HTML / CSS,懂得快速實現 Mockup / RWD / SPA。
  9. jQuery 使用經驗

Git

  1. 基本使用 Git 能力
  2. 熟悉Git操作
  3. 熟悉 Git / GitHub,包括但不限於分支操作、衝突解決及 Pull Requests。

CSS 相關

  1. 熟悉 Bootstrap 或其它 CSS Framework
  2. SASS or postCSS

RWD

  1. Responsive Web Design 網站製作經驗
  2. 熟悉響應式設計,並有前端優化經驗

JavaScript Framework

  1. 至少精通一種Anguar.js、React.js、Vue.js或其他前端框架
  2. 使用過 React.js
  3. 瞭解 JavaScript / ES6 特性及語法,懂得善用 JavaScript 框架或函式庫 (如 Angular.js / React.js / Vue.JS 等)

熟悉作業系統

  1. 熟悉 Mac os 或 Linux 系統尤佳。
  2. 工作環境使用並熟悉 Linux 或 macOS 作業系統。

溝通能力

  1. 具團隊合作能力,分工合作完成交付之程式開發及維護
  2. 良好溝通能力,團隊配合度高
  3. 有良好溝通能力與異於常人的抗壓能力 ^.<
  4. 良好的邏輯及溝通能力,當責不卸責。

加分項目

串接 API

  1. 運用 Ajax 串接第三方 API
  2. 具備 RESTful API 介接經驗

Git

  1. Git 使用經驗
  2. 版本控管觀念(SVN or Git)

JavaScript Framework

  1. AngularJS / Node.js
  2. 有React.js,Node.js開發經驗

測試

  1. 熟悉前端測試
  2. 熟悉前端自動部署、測試及除錯。

首先你會發現加分項目跟基本需求有兩項是重複的:Git 跟 JavaScript Framework,像是這種你就可以把它列入比較後期再來點的技能,先把大家都認為「必備」的技能點一點比較實在。

不過儘管這兩項被一些公司認為是 Nice to have,還是有很多公司認為是 Must have,所以一樣可以放入必點技能裡面(只是優先順序可以排後面一點)。

最終統整

你把上面重新再整理一下,按照出現的次數來排序,並且把加分項目刪掉,就會長這樣:

  1. 熟悉 HTML5、CSS3、jQuery、Javascript
  2. 基本使用 Git 能力
  3. 良好溝通能力,團隊配合度高
  4. 懂得善用 JavaScript 框架或函式庫 (如 Angular.js / React.js / Vue.JS 等)
  5. 熟悉響應式設計
  6. 熟悉 Mac os 或 Linux 系統

好了,你現在可以把上面的清單變成你努力的目標了
上面那八間的工作職缺告訴你說:只要你有上面這些技能,基本上就符合專業需求囉。

關鍵字是有了,但怎樣叫做「熟悉」?

沒錯,這個問題問得很好。大家只說要「熟悉 HTML5、CSS3、jQuery、Javascript」,但是怎樣算熟悉?

我做事的理念之一是:先求有,再求好,先來試試看不要到熟悉的程度,我們有「基本」的程度就好,那要怎樣才能有基本的程度?就考驗你 Google 的能力了!

「html 入門」、「css 入門教學」、「javascript 基礎」…
這種類似的關鍵字你就可以找到一大堆資料了,你把那些東西看一看學一學,你就有基礎了。

接下來就是從基礎到熟悉了,怎樣算熟悉?如果面試官問你的問題你都答得出來,這夠熟悉了吧!沒錯,就是這麼簡單,又是考驗你 Google 能力的時刻,「html 面試題」、「前端 面試」、「frontend interview」…

總結

今天講的方法可以歸納成四個步驟:

  1. 從一堆徵才文裡面找出必備技能跟加分技能,全部放在兩個列表裡面
  2. 從上述列表裡面找出重複次數特別高的,其他都刪掉
  3. 稍微分類一下,就有一份完美的必備技能清單了
  4. 開始學各項基礎
  5. 網路上找面試題,把自己的該項技能練到「熟悉」

所以,不要再說什麼不知道要學什麼了,你只要 Google 一下徵才文,很快就能統整出這個職缺的必備技能;也不要再說不知道怎樣的程度才能踏入這個行業了,你 Google 一下面試題,看自己答不答的出來就知道了。

最後,祝大家都能找到自己想要的工作!