hexschool
邁向前端工程師 / 設計師之路
不知道該如何規劃嗎？
你可以依據過去的背景以及將來的目標來選擇，整個網頁開發前端我們給予了基本的三大方向，
UI 設計師
第一關：工欲善其事必先利其器
建議脫離以平面設計為主的繪圖軟體，轉使用 UI 開發為主的工具，可以導正許多設計上的觀念及增加設計的可行性
- 工具推薦：Adobe XD、Sketch
- 學習資源：https://helpx.adobe.com/tw/support/xd.html
作品參考：
單頁響應式網站
最終作業
第二關：觀念革新
UI 設計與平面設計大不同，從紙搬移到畫面上不僅從 CMYK 到了 RGB，更新增了許多互動及動態排版。
- 工具推薦：Bootstrap、Material Design
- 學習資源：https://material.io/design/
- 線上課程：UI 設計入門 - 畫出有程式邏輯的設計稿
第三關：體驗可行性，學習 HTML、CSS
- 書籍推薦：HTML&CSS：網站設計建置優化之道
- 線上課程：使用 HTML、CSS開發一個網站
第四關：練習練習再練習
- 挑戰自我：參與每日 UI 練習的挑戰（可上網搜尋 Daily UI）
第五關：製作作品集
- 建立個人檔案：使用 Behance 服務，上傳自己優秀的作品吧！
網頁設計師
第一關：HTML + CSS 網頁排版
萬丈高樓平地起，前端設計的基礎課程。
- 書籍推薦：HTML&CSS：網站設計建置優化之道
- 線上課程：使用 HTML、CSS開發一個網站
第二關：jQuery 設計網頁互動效果
網站互動性的基礎課程，也是邁向 JavaScript 的前哨站。
- 書籍推薦：深入淺出 jQuery
- 線上課程：使用 jQuery 打造互動性網頁效果
第三關：複習 HTML、CSS、jQuery
練習練習再練習，強化 HTML、CSS、jQuery 的基礎觀念。
- 觀念補充：完成 codecademy 的題目
- *網站架設：將網頁上傳到 Github Pages，讓你的網站能夠透過網址讓其他人看到
- 繼續練習：下載 速記表自己找五個 jQuery Plugin 套用在網頁上
第四關：響應式網站開發
行動網站使用率已超過 7 成，這已經是前端開發中的必備技能。
- 線上課程：一變應萬變的響應式網頁設計
- 書籍推薦：Responsive Web Design 響應式網頁設計學習手冊
- 作業練習：將 RWD 課程設計稿製作成 RWD 版型
第五關：Bootstrap
Bootstrap 是 CSS 的框架，熟悉此技能可以加快開發速度，並且增加 CSS 的可用性
- 線上課程：Bootstrap 5 網頁切版整合術
- 中文文件：Bootstrap 繁體中文手冊
作品參考：
前端工程師
第一關：HTML + CSS 網頁排版
萬丈高樓平地起，前端設計的基礎課程。
- 書籍推薦：HTML&CSS：網站設計建置優化之道
- 線上課程：使用 HTML、CSS開發一個網站
第二關：jQuery 設計網頁互動效果
網站互動性的基礎課程，也是邁向 JavaScript 的前哨站。
- 書籍推薦：深入淺出 jQuery
- 線上課程：使用 jQuery 打造互動性網頁效果
第三關：複習 HTML、CSS、jQuery
練習練習再練習，強化 HTML、CSS、jQuery 的基礎觀念。
- 觀念補充：完成 codecademy 的題目
- *網站架設：將網頁上傳到 Github Pages，讓你的網站能夠透過網址讓其他人看到
- 繼續練習：下載 速記表自己找五個 jQuery Plugin 套用在網頁上
第四關：響應式網站開發
行動網站使用率已超過 7 成，這已經是前端開發中的必備技能。
- 線上課程：一變應萬變的響應式網頁設計
- 書籍推薦：Responsive Web Design 響應式網頁設計學習手冊
- 作業練習：將 RWD 課程設計稿製作成 RWD 版型
關卡支線：SASS/SCSS 加速 CSS 開發與管理
不論手刻派、框架派都應該要了解的 SASS/SCSS 開發，學習打造易維護、好管理的 CSS 架構。
第五關：Bootstrap
Bootstrap 是 CSS 的框架，熟悉此技能可以加快開發速度，並且增加 CSS 的可用性
- 線上課程：Bootstrap 5 網頁切版整合術
- 中文文件：Bootstrap 繁體中文手冊
作品參考：
第六關：JavaScript 基礎
JavaScript 是現在程式開發最普遍的語言，無論前後端皆可使用此語言達成
第七關：AJAX/JSON
請從下面挑一個 JSON API 設計一個作品，作品靈感可瀏覽下方六角學院學生作品，部分學生有整合 Google Map API，也可搭配官方文件再看程式碼來加深觀念
可用資源：
- 國外 DATA API：https://github.com/toddmotto/public-apis
- 高雄 OPEN DATA：https://data.kcg.gov.tw/dataset?res_format=JSON
- 環保署 Open Data：https://data.epa.gov.tw/( 無支援 cors，需自己將 json 儲存下來 )
- 政府 Open Data：https://data.gov.tw/
- 交通 API：https://ptx.transportdata.tw/PTX/
六角學院學生作品：
第八關：Git / Github
Git 是一個版本控制語言，多人團隊維護程式碼時，便會使用它來進行程式碼管控。如果你看得懂下面的話，也會實際操作那就暫時 ok 了
「除了單線進行管控外，也會開 branch 將開發中的功能獨立出來，設計完後再 merge 回去」
- 線上課程：掌握 Git、Github 程式時光機
- 教學資源：Git & GitHub 教學手冊
- 補充教學：保哥 30 天 Git 教學
前置關卡：JS 核心觀念
深入了解 JS 底層觀念，可提升面試常見問題回覆率，也有助於學習框架時也可以更快上手。
- 線上課程：JavaScript 核心 - 邁向達人之路
- 補充資源：JavaScript 考題全面破解
- 觀念測驗：JavaScript 熱門面試題
第九關：掌握一個主流框架（Vue.js / React / Angular）
學習 ES6 及掌握主流框架，並製作一個完整作品；六角學院推薦學習能夠快速上手 Vue.js。
- 線上課程：Vue 3 實戰影音課程
- 官方中文文件：Vue 中文文件
嘗試挑戰作品，可以選擇我們舉辦的 THE F2E 活動或者 Vue.js 課程中所提供的免費 API。
Vue 作品牆（點擊圖片看更多）
第十關：設計面試用的作品集
準備個人介紹頁面，好好介紹你自己：
製作作品呈現你的軟實力（搭配時事或從前方的作品累積）
都準備好以後，接下來可以嘗試開始找工作囉～
求職第一關：撰寫履歷
寫履歷前，請先觀看這篇文章，尤其是英文術語大小寫，與中英空白部分務必留意。 請在 Github 上面建立一個 markdown 履歷，或在 cakeresume 上轉寫也 ok。寫完後再讓六角學院的講師為你調整格式
求職第二關：尋找職缺
可到下述列表尋找，判斷職缺內容可看這篇文章， 確認好要找的職缺後可再跟老師進行諮詢：
求職第三關：前端常見面試考題（不包含設計師）
求職第四關：模擬面試
在請和六角學院的老師預約模擬面試時間，讓學生了解預期會遇到哪些問題， 可看此範例影片 、範例影片二 、範例影片三。
求職第五關：順利取得 offer
恭喜你走到最後一關，若同時拿到複數 offer 難以抉擇時，此文章提供參考。 有時間也可以順道幫忙六角學院的學弟妹們唷！
