完整課綱
五倍紅寶石最強師資計畫
打穩基本功的 10 堂課
課堂名稱
課堂簡介
學習重點
第 1 堂｜關於這門線上課程
介紹整套課程的大綱以及該如何這套課程，另外也會跟大家分享看起來不太講話（或甚至不太好溝通）的工程師，平常的生活大概是什麼樣子。
- 你會學到什麼？
- 工程師平常在做些什麼？
第 2 堂｜開發工具
工欲善其事，必先利其器，在這堂課將跟大家介紹要開發網站會用到的工具軟體。在這門課，我將主要使用 Visual Studio Code 這套文字編輯器，它不只免費而且功能強大，並且有相當多的外掛軟體可以讓開發更快速。除了 VSCode 之外，還會介紹電影裡面看起來很像駭客的終端機指令。
- 開發工具面面觀
- Visual Studio Code
- 好用的外掛程式介紹
- 常用終端機指令介紹
第 3 堂｜開發環境
在我們開始開發網站之前，你知道整個網站是怎麼運作的嗎？當你打開瀏覽器、輸入網址並按下 Enter 鍵的一瞬間，其實背後發生了許多事情，一旦你了解這背後運作的機制，你在開發網站的時候會更知道自己在做些什麼事。
- HTTP 是怎麼運作的？
- 本機安裝
- 安裝 Ruby
- 雲端開發環境
- c9.io
第 4 堂｜HTML
HTML 可以說是整個網站的「骨架」，負責整個頁面的結構。雖然說 HTML 好像隨便寫一寫都會動，但寫得好的結構不只對後續串接程式很有幫助，而且「語意化」的 HTML 標籤更可以讓搜尋引擎可以更精準、正確的讀懂你的頁面，進而讓頁面更容易被搜尋到。
- 基礎知識
- HTML 標籤
- 語意標籤
- 練習題
第 5 堂｜CSS
有了 HTML 建構好了「骨架」之後，接下來的「外表」也不能太難看，而 CSS 就像是網頁的化妝品一樣，能讓原本看起來很陽春頁面看起來氣色變好；如果在 Bootstrap 這樣的化妝組合包的加持下，即使沒有設計師幫你化妝，你也能照著說明書讓你的頁面一下子就變得非常專業。
- 基礎知識
- 開發者工具
- 如何正確的選到你要的元件
- Box Model
- 定位
- Flexbox 排版
- SCSS/SASS 讓你寫 CSS 更輕鬆
- Bootstrap
- 練習題
第 6 堂｜JavaScript
有了 HTML 的「骨架」跟 CSS 的「外表」之後，JavaScript 就像是網頁的「表情」，頁面有了適當的互動後，可讓瀏覽者感受到活力及便利性。這個單元除了介紹最基本的 JavaScript 之外，也會介紹 jQuery 這套歷久彌堅的函式庫。
- 基礎知識
- 變數型別
- 流程控制、邏輯判斷與迴圈
- 函式
- 物件
- ES6 介紹
- jQuery
- 基礎語法
- 選擇器與 DOM 操作
- AJAX
- 方便的 jQuery 外掛
- 練習題
第 7 堂｜Git
常說人生不能重來，但在電腦的世界裡，Git 就像檔案的時光機，可以保留檔案在各個時間的狀態，萬一檔案不見或是改壞了，隨時可以救回來，因此不管是哪種程式語言，Git 幾乎已經變成工程師最不可或缺的工具軟體之一。
另外，我也會透過各種工作上可能會遇到的狀況題，來跟大家介紹如何使用 Git 跟其它同事一起順利的工作（或是，當發生問題的時候該怎麼解決）。
- 基礎知識
- 環境安裝與設定
- Git 的三種模式(工作目錄、暫存區及儲存庫)
- 基本操作
- 使用分支
- 常見使用情境
- 解決衝突
- 遠端共同協作 - 使用 GitHub
- Push 上傳到 GitHub
- Pull 下載更新
- 使用 Pull Request（PR）與其它開發者進行互動
- 開發流程
- Git Flow 介紹
- GitHub Flow 介紹
- 練習題
第 8 堂｜Ruby
Ruby 是一款發展已經超過 25 年的程式語言，在下個單元要介紹的 Ruby on Rails 就是用它做出來的。Ruby 簡單、易懂的語法，會讓寫的時候不太覺得自己是在寫程式碼，甚至是第一次接觸程式的人，即使不會寫，光看字面說不定都能猜得出來程式碼是在做些什麼事。
- 變數、常數、流程控制、迴圈
- 數字、字串、陣列、範圍、雜湊、符號
- 方法定義
- 程式碼區塊(Block)
- 物件導向程式設計
- 類別與模組
- 使用套件（Gem）讓開發更有效率
- 使用別人寫好的套件
- 換你寫套件給別人用
- 寫測試讓你更有信心
- 練習題
第 9 堂｜Ruby on Rails
有了前面的 HTML 的「骨架」、CSS 的「外表」以及 JavaScript 的「表情」之後，Ruby on Rails 就可以說是整個網站的靈魂了。Ruby on Rails 是一款專門設計用來開發網站的工具組（或稱框架），讓我們可以在很短的時間就能做出有點樣子的成品。
而我們接下來的三個大單元，分別是對一些國內、外知名的網站進行「致敬」，主要也都是使用 Ruby on Rails 來復刻出這些網站的功能，進而了解背後運作的原理。
- 環境安裝及簡介
- 生態圈簡介
- 設計哲學
- 基礎知識
- 安裝 Rails 並建立專案
- 第一個應用程式（使用 Scaffold）
- MVC 模型與網站的關係
- CRUD 分解動作 - 簡易票選系統實作
- Layout，Render 與 View Helper
- Model 基本操作
- Migration
- 關連性
- 驗證及回呼
- 寄發信件
- 背景工作及工作排程
- Rails 程式碼整理術（入門）
- 金流串接
- 使用 Paypal
- 使用智付通
- 網站部署（使用 Heroku）
- 進階知識
- Rails 程式碼整理術（進階）
- 網站部署（使用 Capistrano）
- 練習題
第 10 堂｜資料庫
資料庫可能是整個網站架構裡最不起眼但佔有非常重要地位的角色，不管是會員資料還是商品資料、交易資料，都是存在資料庫裡。雖然使用 Ruby on Rails 這樣的開發框架可以減少開發者跟資料庫直接接觸的機會，但了解資料庫的基礎知識仍是非常重要的議題。
- 基礎知識
- 資料表設計及正規化
- SQL 語法
- Rails 裡的物件跟 SQL 語法的關係
- 練習題
向 Medium 致敬
課堂名稱
課堂簡介
學習重點
第 1 堂｜頁面設計
Medium 是一個設計美觀、功能優秀的 Blog 平台，在這個單元，我們將從它現有的頁面進行解構，分別從無到有的做出首頁及內頁等靜態頁面。
- 原版頁面解構
- 首頁
- 主選單
- 文章列表
- 內頁
- 發佈頁面
- 閱讀頁面
第 2 堂｜功能 - 會員系統
會員系統已幾乎是所有網站必備的功能，在這個單元將介紹如何建立會員系統，並根據不同的會員角色（免費版、付費會員以及系統管理員等）設定不同的權限。
- 收費計劃（免費版、付費會員）
- 未讀通知
- 個人資料編輯
第 3 堂｜功能 - 文章
一個 Blog 平台好不好用，很大一部份是決定在它的文章編輯器好不好用，這裡將介紹大家如何套用可以編輯文字同時也可上傳圖片的文章編輯器。
同時，文章如果有個更有意義的網址（而不是單純只用流水編號），對搜尋引擎最佳化（SEO）也是有幫助的。而為了讓更多人能看到這篇文章，文章也將加入留言、按讚及分享到社群網站的功能。
- 圖文編輯器
- 文章網址設計
- 留言及回覆
- 拍手（按讚功能）
- 加書籤及個人文章收藏
- 分享到社群網站（Facebook 及 Twitter）
第 4 堂｜功能 - 首頁
完成了會員系統及文章編輯、留言、分享功能後，接下來就是首頁的文章列表以及分類文章，更可依據受歡迎程度（例如按讚數最多）挑選文章呈現在頁面上。
- 文章列表
- 分類文章
- 精選文章
第 5 堂｜我們學到了什麼！
向 Citiesocial 致敬
課堂名稱
課堂簡介
學習重點
第 1 堂｜頁面設計
citiesocial 找好東西 是一個設計精美的電子商務平台，在這個單元，我們同樣也將從它現有的頁面進行解構，分別從無到有的做出首頁、產品頁及其它內頁。
- 原版頁面解構
- 首頁
- 主選單
- 產品列表
- 電子報訂閱
- 聯絡資訊
- 內頁
- 分類頁面
- 單項產品頁面
第 2 堂｜功能 - 會員系統
在第一單元我們曾經學習過如何建構會員系統，在這個章節將會再介紹如何讓你的網站也可以使用 Facebook 或是 Google 的帳號來註冊、登入網站。
- 一般登入 / 註冊
- 使用 Facebook 及 Google 帳號登入
第 3 堂｜功能 - 商品功能(後台)
雖然商品上架看起來只是簡單的新增、修改、刪除功能，但要顧慮到的面向非常多，例如商品分類、商品照片上傳、庫存數量以及是否有促銷活動造成的價格變化等。
- 商品上架
- 商品分類
第 4 堂｜功能 - 消費者功能 part 1
商品上架後，接下來就是準備進行購買了。這個單元會介紹如何把商品放到購物車、建立訂單並完成結帳。完成訂單後也可在自己的會員帳號裡查詢訂單目前的狀態。
- 商品列表
- 購物車
- 結帳功能
- 串接金流（使用 Paypal 或智付通）
- 訂單查詢
- 進度查詢
- 商品退貨
第 5 堂｜功能 - 消費者功能 part 2
除了商品購買及金流外，加入商品搜尋及瀏覽紀錄功能也有助於使用者體驗，將來亦可用做瀏覽紀錄分析，主動推薦給消費者可能會喜歡的商品。
- 最近瀏覽商品
- 商品搜尋功能
- 訂閱電子報
- 線上即時客服（使用第三方服務）
第 6 堂｜我們學到了什麼！
向 Trello 致敬
課堂名稱
課堂簡介
學習重點
第 1 堂｜頁面設計
現代人資訊量暴增，如果沒有像 Trello 這樣的工具來幫忙整理待辦事項，堆積成山的任務會整個打結在一起。在這個單元，我們將從它現有的頁面進行解構，分別從無到有的做出首頁以及彈跳出來的小視窗頁面。
- 原版頁面解構
- 首頁
- 主選單
- 主頁面
- 內頁
第 2 堂｜功能 - 會員系統
如同前兩個單元，本單元也有串接會員系統，除了前面單元有的功能外，還會再另外加上通知系統及權限設定。
- 一般登入 / 註冊
- 團隊功能
- 通知訊息
- 權限設定
第 3 堂｜功能 - 前端互動
跟前面的所有章節比較起來，這是個難度提高不少而且在前面的單元沒有太多著墨的內容 - 使用 JavaScript 來進行互動。這裡我們將使用基本的 JavaScript 以及 jQuery 來完成 Trello 卡片拖放、排序、檔案上傳等功能，並可支援使用 markdown 語法來編寫內容。
這個單元如果能順利完成，相信之後任何 JavaScript 的互動應該都難不倒你了。
- lightbox 呈現效果
- 新增、編輯待辦事項
- 上傳檔案
- 支援 markdown 效果
- 拖拉效果
- 排序
第 4 堂｜我們學到了什麼！
職業必備｜除了 Coding 以外的事
課堂名稱
對談陣容
第 1 堂｜使用者在想什麼？
主持｜高見龍（五倍紅寶石）
主講｜李德俊（紅豆）（台灣互動設計協會）
第 3 堂｜撰寫一份好的開發者履歷
主持｜高見龍（五倍紅寶石）
主講｜林鴻斌博士 （104 人力銀行 資深技術管理師）
解鎖！CSS 重構 feat. Amos
課堂名稱
課堂簡介
學習重點
第 1 堂｜大師來踢館
CSS (Medium 重構) feat Amos
HTML/CSS 人人會寫，但巧妙各有不同。這個單元我們將請到在業界知名的 HTML/CSS 大師 Amos（李建杭），來指點一下我們前面致敬的 Medium 單元，看看我們到底犯了哪些錯誤。
解鎖！Vue.js feat. Kuro
課堂名稱
課堂簡介
學習重點
第 1 堂｜大師來踢館
Vue.js (Trello 重構)
各位有遇到老闆看了某些新聞報導後，突然跟你說「喂，聽說 Vue.js 很威，你要不要把我們的網站也用它來改寫啊？」的狀況嗎。我們在 Trello 單元使用的是一般的 JavaScript 以及 jQuery 來實作拖拉效果，但如果用 Vue.js 來寫的話會不會更好寫呢？我們將邀請在 Vue.js 方面很有研究的大師 Kuro（許國政）來給我們指點一下。
解鎖！React.js feat. Taian
課堂名稱
課堂簡介
學習重點
第 1 堂｜大師來踢館
React.js (Citiesocial 重構)
React.js 跟 Vue.js 算是目前並列前端兩大框架，而我們在第 2 單元的「向 Citiesocial 致敬」雖然有用到一些 JavaScript 功能（例如購物車），但有些互動功能若能使用 React.js 來改寫，原本的程式碼可以比現在更簡單，甚至效能更好。在這個單元我們將邀請 Elixir 技術社群的主持人 Taian（蘇泰安）來指導我們該怎麼在原本的網站裡使用 React.js 來改寫。
解鎖！React Native
課堂名稱
課堂簡介
學習重點
第 1 堂｜Citiesocial app
使用 React Native 打造手動裝置應用程式。
React Native 是由 Facebook 所開發的 App 開發框架，可以讓你使用 React.js 的概念來開發手機應用程式，目前亦有許多知名應用程式是使用它開發的。在這個單元，我將以第二單元的 Citisocial 網站為例，開發可以從手機登入會員、瀏覽商品、下單及查詢訂單之應用程式。