邁向前端工程師 / 設計師之路

不知道該如何規劃嗎?

你可以依據過去的背景以及將來的目標來選擇,整個網頁開發前端我們給予了基本的三大方向,

UI 設計師

第一關:工欲善其事必先利其器

建議脫離以平面設計為主的繪圖軟體,轉使用 UI 開發為主的工具,可以導正許多設計上的觀念及增加設計的可行性

第二關:觀念革新

UI 設計與平面設計大不同,從紙搬移到畫面上不僅從 CMYK 到了 RGB,更新增了許多互動及動態排版。

第三關:體驗可行性,學習 HTML、CSS

第四關:練習練習再練習

  • 挑戰自我:參與每日 UI 練習的挑戰(可上網搜尋 Daily UI)

第五關:製作作品集

  • 建立個人檔案:使用 Behance 服務,上傳自己優秀的作品吧!

網頁設計師

第一關:HTML + CSS 網頁排版

萬丈高樓平地起,前端設計的基礎課程。

第二關:jQuery 設計網頁互動效果

網站互動性的基礎課程,也是邁向 JavaScript 的前哨站。

第三關:複習 HTML、CSS、jQuery

練習練習再練習,強化 HTML、CSS、jQuery 的基礎觀念。

  • 觀念補充:完成 codecademy 的題目
  • *網站架設:將網頁上傳到 Github Pages,讓你的網站能夠透過網址讓其他人看到
  • 繼續練習:下載 速記表自己找五個 jQuery Plugin 套用在網頁上

第四關:響應式網站開發

行動網站使用率已超過 7 成,這已經是前端開發中的必備技能。

第五關:Bootstrap

Bootstrap 是 CSS 的框架,熟悉此技能可以加快開發速度,並且增加 CSS 的可用性

前端工程師

第一關:HTML + CSS 網頁排版

萬丈高樓平地起,前端設計的基礎課程。

第二關:jQuery 設計網頁互動效果

網站互動性的基礎課程,也是邁向 JavaScript 的前哨站。

第三關:複習 HTML、CSS、jQuery

練習練習再練習,強化 HTML、CSS、jQuery 的基礎觀念。

  • 觀念補充:完成 codecademy 的題目
  • *網站架設:將網頁上傳到 Github Pages,讓你的網站能夠透過網址讓其他人看到
  • 繼續練習:下載 速記表自己找五個 jQuery Plugin 套用在網頁上

第四關:響應式網站開發

行動網站使用率已超過 7 成,這已經是前端開發中的必備技能。

第五關:Bootstrap

Bootstrap 是 CSS 的框架,熟悉此技能可以加快開發速度,並且增加 CSS 的可用性

第六關:JavaScript 基礎

JavaScript 是現在程式開發最普遍的語言,無論前後端皆可使用此語言達成

第七關:AJAX/JSON

請從下面挑一個 JSON API 設計一個作品,作品靈感可瀏覽下方六角學院學生作品,部分學生有整合 Google Map API,也可搭配官方文件再看程式碼來加深觀念

可用資源:

六角學院學生作品:

高雄大學學生作品:

第八關:Git / Github

Git 是一個版本控制語言,多人團隊維護程式碼時,便會使用它來進行程式碼管控。如果你看得懂下面的話,也會實際操作那就暫時 ok 了

「除了單線進行管控外,也會開 branch 將開發中的功能獨立出來,設計完後再 merge 回去」

第九關:掌握一個主流框架(Vue.js / React / Angular)

學習 ES6 及掌握主流框架,並製作一個完整作品;六角學院推薦學習能夠快速上手 Vue.js。

嘗試挑戰作品,可以選擇我們舉辦的 THE F2E 活動或者 Vue.js 課程中所提供的免費 API。

作品參考:

第十關:設計面試用的作品集

準備個人介紹頁面,好好介紹你自己:

製作作品呈現你的軟實力(搭配時事或從前方的作品累積)


都準備好以後,接下來可以嘗試開始找工作囉~

求職第一關:撰寫履歷

寫履歷前,請先觀看這篇文章,尤其是英文術語大小寫,與中英空白部分務必留意。 請在 Github 上面建立一個 markdown 履歷,或在 cakeresume 上轉寫也 ok。寫完後再讓六角學院的講師為你調整格式

求職第二關:尋找職缺

可到下述列表尋找,判斷職缺內容可看這篇文章, 確認好要找的職缺後可再跟老師進行諮詢:

求職第三關:前端常見面試考題(不包含設計師)

求職第四關:模擬面試

在請和六角學院的老師預約模擬面試時間,讓學生了解預期會遇到哪些問題, 可看此範例影片範例影片二範例影片三

求職第五關:順利取得 offer

恭喜你走到最後一關,若同時拿到複數 offer 難以抉擇時,此文章提供參考。 有時間也可以順道幫忙六角學院的學弟妹們唷!

LINE