睡覺！
想睡覺！！
終於可以睡覺了！！！
本期網頁設計基礎班結束了
對我而言卻是新的開始
感謝幫助我的每個人兒
心得之餘，也分享資源
目錄
覺得自己廢話實在是有點多，來個目錄好了～
前言
故是是這樣開始的：
依稀記得去年11月中旬學長問我們有沒有興趣教 HTML、JavaScript、CSS、jQuery。學長看我猶豫了，就推了我一把進入了教學的世界。課堂結束的那一剎那，真的對學長懷有萬分的感謝！當初真的大可不必浪費時間在這個既猶疑不定甚至已經有點放棄的人身上。
雖然真正教學的時間只有十天、30個小時，但為了這30個小時真的是絞盡腦汁，從選擇工具到實際上陣的那兩週，準備時間至少超過300個小時。光是選擇開發工具就花費快一個月，這不是找到就好，還得試用一段時間，確定這個工具能夠確實能和課程的每一個環節做搭配。
現在也理解為什麼學校老師會… 老師雜事多如山，還要兼顧研究，若還能用心準備課程真的需要相當大的熱情，畢竟當教授多半不是因為很會教書。以前常抱怨上學很浪費時間，那至少… 至少我不要也一樣浪費全班約末30個人、900小時的時間吧。
課程結束後，最深的體悟就是只要是可以安心睡覺的工作真的不錯～
當然不只這樣啦，更重要的是，看到學生們的作品與回饋後，覺得那無數個不眠的日子值得了！
因為只有短短的時間、日子緊湊而且想教得東西好多，導致對學生的認識較少，但希望他們有感受到我的誠意：）
除了簡短的心得外，來寫寫這堂課所使用的工具，以下皆為簡短的介紹與分享（皆為免費資源唷），詳細使用方法視情況及大家的需求再看看是否補上啦！
開發工具：Mozilla Thimble
廢話不多說，如果想要有以下功能，絕對推薦 Mozilla Thimble 作為教學使用（Thimble 本來的用途也是作為教學用）！
功能
- 發佈後可取得網址（讓普羅大眾都能看到）
- Live Preview（邊做邊看）
- 輕鬆複製範例（切齊進度）
- 有無帳號皆可使用（申請時出問題也沒關係）
- 介面簡單好上手（不想浪費時間安裝東西，也不要大家害怕亂點到什麼）
- 給予學生檔案的概念（代表也可以上傳檔案，大加分）
- 在這邊做得出來，回自己的電腦一定也可以做出來！
特色
- 雲端操作，上課做得東西帶回家也是一模一樣，不會回家就沒辦法練習
- 建立檔案位置的觀念，連結網站內部的檔案
- 沒有捷徑，從基礎做起（不像 Codepen 或 JS Bin 其他的 Playground，從 <body> 開始或是有選項直接帶入 jQuery、Bootstrap 等等的 library）
- 申請帳號過程也不會有什麼問題，因為不用收認證信，甚至不登入也能使用
- 一樣有 Live Preview，做到哪就看到哪
- 有 Tutorial 頁面，可以先把要做的事情、評分重點寫下，同學根據自己的速度操作，先做完進度的同學也不會被綁住
圖解
主編輯畫面
發佈作品取得網址
網頁發佈後，右上角 Remix 按鈕可直接拷貝專案
有帳號就可以儲存專案
學生範例作品
上課的時候想說要做點實用的東西，於是拿了 Google Nexus 6P 的產品介紹給同學們模仿。利用 Bootstrap 做出了以下的作品（皆從頭開始做起）：
原 Google 網站截圖
以上都是完全在 Thimble 裡做出來的唷！
（如果有連結壞掉，可能是被 Thimble 刪除，但網址都有活至少一個月了，用來 demo 也是綽綽有餘）
出考卷與自動批改：Google 表單＋Flubaroo
Google 大神再次出動！這個世界真的不能沒有 Google 唉～同樣是人兒，有人能建立 Google，實在令人敬佩！除了常看到研究生用 Google 表單來發問卷外，連考卷都可以用表單出了！再加上一個超讚的外掛 Flubaroo，考卷自動批改，輕輕鬆鬆、簡直無懈可擊。
簡易使用說明（影片）
圖解
成績查詢：Google 試算表＋Tabletop.js
老師們算成績的好朋友不外乎就是試算表，所以給同學們簡易查詢其實不需要使用什麼資料庫等級的複雜物。既然成績大多數都登記在 Google 試算表裡了，可以直接結合豈不是更方便？介紹裡面寫了這一段話：
Tabletop.js takes a Google Spreadsheet and makes it easily accessible through JavaScript. With zero dependencies! If you’ve ever wanted to get JSON from a Google Spreadsheet without jumping through a thousand hoops, welcome home.
簡單來說，它會吐出一個 JSON 檔，我們再隨自己的喜好去篩選，Sheet ID 則是在發佈 (Publish) Google 試算表後會取得的。因為操作較為複雜，如果想要 step by step 的教學可能要再等更詳細的文章囉！
結語
一不小心又寫了一大堆東西，竟然還拍影片（實在懶得一張一張截圖，不如講一講比較快），可能或許大概未來某日突然很閒再把圖補上吧！到了結尾，好像應該要說些什麼偉人也曾說過的話來做呼應？不好意思，我的偉人傳記裡面也沒什麼偉人，只有一隻很會賺錢的熊 XD
Some people care too much. I think it’s called love.
― A.A. Milne, Winnie-the-Pooh
我好像真的 care too much，平常寫報告超過五百字就狂嫌棄，但這篇文章輕輕鬆鬆就遠遠超越了，好像真的太愛大家了。那就下次再見啦～
Comments
List of comments （10）
你好! 偶然之間逛到你的網站
想問問你是如何學會做網站的呢?
請問您是本科系畢業的嗎?
我並非本科系畢業，
但現在有很多免費的資源在教如何寫網站，
不過大多都是英文的～
如果真的很懼怕英文，
也可以試著搜尋簡體的資訊，
或許之後會整理一篇相關的文章，
在這邊就先點出一個之前有介紹給學生的網站：
codecademy
裡面除了網站也有很多其他的資源可以好好利用唷
加油！
您好 請問台大開的課程 跟資策會這種密集半年比起來如何呢???
光是課程的長度就可以知道資策會的會更為完整、周全
我個人覺得台大開的課程主要可以引起學員的興趣
價錢方面也比較親民，當作入門測試自己喜不喜歡
也可以讓學員在學習的路上不會從零開始
而資策會最終目的是希望結訓後大家能找到相關的工作
所以可能s大要根據自己的目標來做選擇
希望這樣有回答到你的問題唷：）
想上Candy老師的課！！
謝謝Candy大大的分享
影片好有氣勢!
一口一
误打误撞闯进你的blog
觉得很漂亮，也很努力，
按照你的一篇在mac上安装python3终于装好了。
谢谢你的分享，请继续加油。
博客真的太好看了
太养眼了，都不想走了。
干货满满！加油！
謝謝你 🙂
你好，最近在MOZILLA THIMBLE試著練習寫網頁，遇到一個問題，想請教你。
請問怎麼直接在javascript裡面直接打jquery，我有在html裡面連結javascript檔案也有連結jquery，但是就只能在html裡面使用jquery，像是在codepen可以直接在javascript裡面做jquery的外部連接，但我無法在這個裡面找到。
感謝你