這一集將深入探討互動設計產業目前的趨勢，也聊聊老闆創立工作室的契機和創業過程的大小故事。節目中還談到了公司在草創初期面臨的困難，以及大學時期的創業酷點子，也進一步聊到目前台灣互動設計的厲害團隊和有趣精彩的作品專案。最後，老闆還分享了他在藝術史中發現的秘辛！快來一起收聽第二集，探索互動設計的精彩世界吧！

至以下平台收聽： FirstStory / Spotify / KKBOX / Pocket Casts / Apple / Google / SoundOn

⬢ 老闆小檔案 ⬢

老闆哲宇是互動設計師、墨雨互動設計創辦人、數位藝術家、講師、全端工程師。先前在紐約大學進修整合數位媒體碩士，在 Creative Coding 領域有相當厲害的創作專業，知名 NFT 作品包含 Pochi 、 Hamily 家族等。

哲宇在教學推廣上也不遺餘力，引領超過 20,000 位學生進入互動網頁與生成藝術開發的大坑。在文化推廣上，他成立了 FAB DAO ，希望能提攜台灣數位藝術家，被世界看見，期望可以帶著更多人，在數位世界中創造驚喜的體驗與生命。

⬢ 精選片段 ⬢

老闆回憶大學時青澀的創業想法：做很快才不是重點！真正重要的是…

⬢ 本集重點 ⬢

02:08 互動設計產業的人才與求職趨勢

02:59 AR/VR/MR/XR小教室 👨‍🏫

05:18 老闆創立工作室的契機

07:16 公司草創初期的困難點

10:16 大學時期的創業酷點子和驚人發言

11:35 「墨雨」的由來 🌧️ 和願景

18:56 台灣の互動設計團隊 👥

25:28 互動設計的商業運用 💰

30:21 老闆在藝術史發現的秘辛… ㊙️

如果有任何的意見回饋或建議，歡迎來信讓我們知道，各位的參與是我們進步的動力。讓我們一起朝向更好的 Podcast 節目邁進吧！

⌔ 寫信給我們：creativecoding@monoame.com

這篇文章 CC！我跟你說！S1EP2｜深入互動設計世界：趨勢、多元應用與創業挑戰 最早出現於 Creative Coding TW - 互動程式創作台灣站。

在本集中，我們將探索 Creative Coding 的奧秘——里歐娜會和老闆一起討論什麼是 Creative Coding ，以及老闆是如何踏上這條路的，在這條路上，又遇到了什麼樣的困難和驚喜之事呢？我們還會分享一些有趣的案例，並且比較台灣與國外的程式創作資源的不同之處。

如果你曾經對學習程式的門檻感到困惑，相信本集也會對你有所啟發。最後，我們也會分享近期 Creative Coding 相關的活動資訊！

至以下平台收聽： FirstStory / Spotify / KKBOX / Pocket Casts / Apple / Google / SoundOn

⬢ 老闆小檔案 ⬢

老闆哲宇是互動設計師，也是數位藝術家、講師、全端工程師。先前在紐約大學進修整合數位媒體碩士，在 Creative Coding 領域有相當厲害的創作專業，知名 NFT 作品包含 Pochi 、 Hamily 家族等。

哲宇在教學推廣上也不遺餘力，引領超過 20,000 位學生進入互動網頁與生成藝術開發的大坑。在文化推廣上，他成立了 FAB DAO ，希望能提攜台灣數位藝術家，被世界看見，期望可以帶著更多人，在數位世界中創造驚喜的體驗與生命。

⬢ 精選片段 ⬢

老闆的大學回憶：在學聯會行銷部，用 Arduino 做了蝦趴聖誕樹，還在 Dcard 上爆紅？

⬢ 本集重點 ⬢

02:21 究竟什麼是Creative Coding？

03:31 老闆開始接觸Creativ e Coding的契機

05:17 Creative Coding的有趣案例

08:28 藏在非典型電機人內心的創作熱血🔥

09:39 出國進修的動機💭、國外程式創作與教育環境

15:59 我們都有茫然的時期…

18:16 國外的程式創作資源、互動設計風氣和台灣有什麼不同？

21:31 面對學習程式的門檻，我該怎麼辦——身為過來人，老闆用心良苦的建議

30:44 在台灣的進修資源有哪些

32:20 學習Creative Coding有什麼出路或運用？

36:36 老闆語重心長的建議

38:09 近期Creative Coding相關活動資訊

如果有任何的意見回饋或建議，歡迎來信讓我們知道，各位的參與是我們進步的動力。讓我們一起朝向更好的 Podcast 節目邁進吧！

⌔ 寫信給我們：creativecoding@monoame.com

這篇文章 CC！我跟你說！S1EP1｜理工宅的藝術創作之路：國內外程式創作、互動藝術進修資源，以及老闆的建議 最早出現於 Creative Coding TW - 互動程式創作台灣站。

今年的夏天，我來到了紐約開始我的研究所生涯，唸的是IDM (Integrated Digital Media)，剛開學的時候很急著在學校裡面找到工作（因為想要拿SSN就能辦信用卡跟做很多事了)，對自己的感覺就像拿到了一個證明，知道自己真的在這裡開始扎根了，這應該算是我第一個受聘的正職，進行得比想像中順利很多，所以趁著在學期結束的一切記憶都還熱騰騰的時候，為各位帶來在紐約當助教的八卦跟到底都在玩些什麼東西。

為什麼要當助教呢？

學期初的時候原本投了學校IT部門UX Designer的工作，沒想到雖然面試很順利，但是卻遲遲沒有消息，完全就是一個被發無聲卡的節奏，同時間又看到系上開始在找研究助理，我就想說，不如兩個都投投看吧！反正原本自己就在做教學相關的工作，如果還能夠順便幫教授做做project應該蠻好玩的。

在還沒見到我的教授之前，看網路上的照片快被嚇死，我的教授看起來超兇，感覺剛被放出來（欸，但實際上見到人之後覺得意外地很和善，長得也完全不像照片上那樣。所以跟教授面試的時候，就開了課程的範例跟敘述一下自己在程式方面的經驗，打開codepen炫了炫。

當下有提到如果IT上了的話，我就要毅然決然地拋棄系上來去曼哈頓上班，享受一下在繁華大城市的感覺，因為我們校區在布魯克林，實在是相對比較悠閒跟沒那麼誇張的繁華。

想了一天之後，覺得如果是繼續做設計稿的話好像跟在台灣做的事情沒什麼差別，又很不甘願工作就只是在電腦前做做別人指定的設計稿，所以就直接聯繫教授說我想要這份工作了XD 現在想想好險是做這個決定，開啟了我後面這一串莫名認真（？的助教進化之旅。

在這12週裡做的事情遠超乎自己的預料，雖然大部分是因為不甘心就只坐在那邊給人問問題，所以會自己給自己找事情做。這學期我把系上的助教體制從一開始的毫無規範，到建立了整套運作規則， 預約制、記錄表格、週報、成效分析與怎麼評估跟分配時間，也大幅的增強了自己建立人際關係的能力，跟知道要如何停損每個人花費的時間，陪養了很多的耐心，在看到一臉呆滯沒在思考的學生的時候不會暴怒XD

預約制規劃與規則制定

原本助教應該是不用約的，就是挑一張自己覺得愜意的桌子，捧著電腦把office hour 待好待滿，我一開始不知道其實蠻多研究生助理不會把時數做滿，教授還是會給滿20小時的薪水，所以就傻傻的每週排了20小時的助教時間再來崩潰，因為20小時實在太長，只靠乾等人來的話實在是無聊又無法預測到底要怎麼幫那些學生。

那時想起了在預約課程討論的時候，有用過一個好像不錯的軟體叫做calendly，於是我第一週閒暇之餘開始研究把助教時間改為預約制並要求至少要提早一天左右預約，就能看到日曆裡面自動隨著預約會冒出應該要出現在學校的時間。

還好一開始有想到預約制，隨著期中期末大家越來越崩潰，老是捧著電腦一個接著一個來，預約制讓我可以名正言順地留足夠的時間給每個人，當然，也會有提早結束的時候，就當做自己偷偷休息的時候，但尤其是外國人，問問題都沒在客氣的，常常雙手一攤就說，我不會做，把事情全部丟給我，如果東西簡單我還會好聲好氣的說你要多嘗試一下，更多是那種複製一堆別人的code來給我看，說我不會改的，整個怒火就會上來叫他回去自己努力一下再過來找助教。

地點跟流浪

原本以為我會有一間自己的辦公室，但夢想第一週就破滅了哈哈，我被告知找一個自己喜歡舒適的角落，學生找得到我就好，因此剛開始我待在系館外面，因為沒有固定座位每週都要換位置，兩週之後實在是很抓狂，覺得不能再這樣像是遊牧民族的當助教下去了。後來，我找到了原來系上的研究生有研究室可以用，一用角落的位置之後一試成主顧，又有超高級的外接螢幕可以用，整個超級方便，所以後半學期就定居在這個座位上了。

助教日誌的誕生

做助教做到後來已經養成了只要有人來問問題，就會直接紀錄下用了多少時間跟問了什麼問題，這樣的習慣也讓我在後續一樣的學生來問問題時，可以直接找到上次的紀錄，快速的掌握他得學習狀況跟弱點在哪，同時也能當作真的有在認真工作的證明給教授看XD 後來有幾個學生連續助教時間回去後都沒有動，隔週預約繼續來找我從上次進度開始也沒有試著搞懂。

週報

在第一個禮拜結束的時候，總覺得結束的很沒有踏實感，意外想到了以前跟朋友聊天時，他說他每個禮拜都要寄一封整理的Email給老闆，報告這週自己做了什麼，或有什麼想法。仔細想像這樣的方式經營真的挺不錯的！

在國外的工作比較自由，我又深切的感受到其實我的教授自己很忙，完全沒有空理我，把輔導學生的工作都丟給我做，所以我就開啟草稿紀錄一下這週我做了些什麼事情，有哪些學生，然後開了一個表格把每個學生問的問題跟我幫忙解決的事情記錄下來，整個學期累積下來真的超級可觀的。

減少資訊不足的情況卡住

一開始填寫預約的時候只有填名字跟問題，直到做了兩週之後，我才發現原來我要負責的不是只有我們教授的班，而是系上這學期所有的班都是我要負責的，而且研究所跟大學部也都是來找我問問題（這堂課給大學部跟研究所的兩個版本）。

難怪每個學生來作業跟課綱都超級不同，發現這件事情的時候，痛苦了好一陣子，覺得自己被推坑做了超雷的工作，但後來整理好心情好之後就想要怎麼樣管理這麼多班級的學生，所以後來我就把預約表單一次問完。

有時候助教時間結束後，會需要寄一些參考資源給學生，原本還會很認真的一封一封弄，但是後來數量實在太多懶惰了，就做了一套罐頭信模板，可以直接把名字跟連結填一填複製信件寄出。

第一次領薪水

在美國第一次領薪水的時候真的很感動，目前大概薪水可以勉強打平房租＋生活費，硬是死撐著用著覺雖然大部分都會超過一些些，但是能有能力第一個學期就用專業支撐生活的感覺很棒，雖然跟學費相比真的是杯水車薪，不過就心態而言是告訴了自己，你有在國外好好過自己生活的能力了呢！

成效分析

最後兩週的時候，因為資料實在太多，一眼看不出到底有多少學生來跟問了多久問題，就又開始自己給自己找事情做，先是把所有學生這學期來的次數列出來，然後統計他們到底都是哪個教授的，有些東西實在是做出來才知道誇張，這學期教授丟了一個網頁小哥來給我，說是他們教授實在幫不了他，所以整個學期他不斷的預約來找我。
做完整理之後，發現這學期總共有四十幾個學生來找我，也發現了很多很常利用助教時間的學生，原來斷斷續續的這樣office hour下來，也真的教過很多次了呢。

在教學中誕生的眾多範例跟創作

在教學過程中，其實我自己也很常突然冒出意料之外的寫法或創意，就會趕快記錄下來或趁空擋實作出來，在這裡課堂上教的寫程式雖然東西沒有特別難，但是教授都用一種很設計系的方式在帶系上的課，很鼓勵學生冒出很多怪想法，互相討論可以做什麼很ㄎㄧㄤ的東西，和看很多案例，雖然會讓我當助教這邊的loading蠻重的，但能很清楚感覺到跟台灣一般在教程式一板一眼的感覺很不一樣！

一些小小心得

能在一個陌生的國度逐漸走穩腳步的感覺很珍貴， 所以自己才會花那麼多的心思在希望把第一份工作做好上，也因為很多來的學生其實是跟自己同一屆的同學，所以有時候助教時間做一做就變得比較熟，能夠有人聊聊天或一起吃個飯，也不會自己一個人悶在家裡做事情，雖然常常以學校為家到半夜兩三點弄完回去，但是過得真的蠻開心的～

對於這份工作心裡還是有些小小的不滿，原本工作描述是說有要幫老師做Project，結果所有時間都被助教佔掉了，教授好像也對我太過放心，所以就也沒什麼管我，每次跟我討論的時候還被說做得太拼了完全沒什麼好挑惕XD

下個學期可能會一起規劃系上的統一課綱的資源庫，也很想把整套學起來自己教哈哈哈，這個學期歷經數百個助教時間摧殘，總覺得已經能夠把整套東西倒著講過一遍了，很希望有一天能把這整套課程帶回台灣，也許能夠為程式教育注入一些活水呢。

撰文：吳哲宇

三門老闆的線上課程，快與上萬名同學一起加入寫code的行列吧！

動畫互動網頁程式入門(HTML/CSS/JS)以簡單例子帶你入門網站的基礎架構及開發，用素材刻出簡單有趣又美觀的網頁和動畫，享受做出獨一無二的網頁所帶來的成就感，在職場上與設計師和工程師合作無間。

打好基本的互動網頁基礎之後，可以進階動畫互動網頁特效入門(JS/CANVAS)，紮實掌握JavaScript 程式與動畫基礎以及進階互動，整合應用掌控資料與顯示的Vue.js前端框架，完成具有設計感的互動網站。長達3085分鐘，超過60個精緻範例與400張的投影片以上，以及四個加碼單元vue-cli、GSAP、D3、Three.js的投影片，成為hahow上最長的課程。

互動藝術程式創作入門(Creative Coding)線上課程中你可以認識程式與互動藝術產業應用，開啟對工程跟設計的想像，學會使用 p5.js 開發互動介面，整合繪圖、音訊、視訊、文字、3D、互動與機器創作完整的作品，並將創作輸出應用在個人品牌或網站、主視覺或海報，甚至互動裝置、遊戲與教材製作等場景，讓你對進修的資源與路線更有方向。

你也會有興趣閱讀其他文章：

從不只是一門線上課程，而是一場推動進化的豪賭
釀造一門結合網頁、設計、數學與特效的線上程式課程

這篇文章 在紐約大學讀研當助教的進化日誌 最早出現於 Creative Coding TW - 互動程式創作台灣站。

本文撰寫時間為2016/10/2，由墨雨設計創辦人，同時也是互動藝術家的吳哲宇親筆記錄下關於「動畫互動網頁程式入門」這堂線上課程的來龍去脈，從最開始的起心動念、一路的辛苦籌備路程，還有被越來越多的學生上了幾堂課後的作業所驚豔，更加堅定地相信設計跨領域程式、以及各領域的雜學所能帶給世界的創新能量，並且願意帶著後起之秀一同前進，持續推動互動領域（無論是網頁、科技、設計乃至於藝術產業）的發展。

在課程上線滿一個月的這天，啜著咖啡看到人數已逐漸來到了1667人，整理著每天到三四點睡留下來的瓶瓶罐罐跟咖啡杯，試圖留下些什麼紀錄，回神才發現準備課程這段漫長的道路已接近了尾聲，便打起了草稿想把這一切曲折離奇、燃燒生命的光芒記下

「寫網頁好難喔….每次看線上程式教學，都在講解功能沒講怎麼完成一個好看的網頁，總覺得自己做出來，離別人美美的網站就是有一段沮喪的距離」

我想，這句話是當初開始想開課的初衷，也是自己三年前開始踏入網頁領域自學的痛，總覺得無法掌控的各種超自然力量在影響網頁的排版，各種摸不清底細的屬性，總要擺兩包科學麵獻祭祈禱網頁乖乖的不要跑掉，光是用工程師思維把網站寫出來都很吃力了，更別提要如何處理視覺、文字，讓網頁不會看起來陽春的像小學電腦課做的。

那時候第一次網頁還是脫離不了所見及所得軟體，要改東西直接拖拉，用adobe animate不顧結構做出一個還算可以用的網站，心想，做網站不過就如此嘛，我幹嘛那麼辛苦去寫html跟css，尤其當那時html只知道可以放元素，css只知道改改文字顏色改改框線的時候。

經過了波折的三年，接了數十個專案的歷練跟學習下來:

1. 從單純的html/css，開始踏入js、踏入各種svg/canvas動畫效果
2. 一開始接觸bootstrap之後狂用，但受限於風格跟不易改動後又捨棄，那時功力還沒有辦法秒速做到bootstrap水準。
3. 逐漸用很基本的css/Jquery 也能夠做出很漂亮精準的互動，開始不喜歡用別人的套件，用自己理解到的原理或概念重建parallax網站或互動
4. 開始研究物件結構跟演算法製作動態跟互動的網頁，愛上優雅的物件結構跟定義，把重力、3D、生物、遊戲等等概念濃縮到網頁上。
5. 因為要做售票系統跟會員開始入門後端php跟資料庫，到中期為了給客戶編輯自幹了一套還算不錯用的CMS，在這個時期建立了完整前後端的概念，體驗到了溝通問題也體驗到接案的窘境。
6. 摸過laravel/ruby on rails幾個月，覺得有趣但模板一半切完板之後交給後端處理，改動的可能性就消失了，回到原本輕型框架的網頁結構。
7. 寫了一年後發現資料在後端處理跟產生網頁真的太麻煩，觸碰到了前端框架angular.js/ Vue.js，愛上了用資料轉換網頁的樂趣，從快速變成極快速，尤其Vue.js的調性真的很簡潔大方。
8. 開始集大成，把手邊能用的技術逐漸都熟練，開始把實踐的功能寫成一個個模組，比如自動分析列表產生音波文字，用後期分析的方式，以canvas為基礎動態產生靈活的動畫，操作聲音、數學，覺得網頁真的可能性無限。
9. 更加熟悉資料流/前端的互動，專案在規畫的時候會更全盤地思考如何在既有的架構跟畫面下創造更多可能性，讓網頁活起來，或是有個觸動心靈的點，甚至看到有趣可以實驗的案例就直接用網站實現出來(像是示波器)。

這些年來很多有趣的案例：

生活中很多有趣的案例都可以當作網頁的素材，所以對我而言，網頁是一種呈現媒介，很有力量跟可能性的呈現媒介，第一個：他快，可以迅速的把東西/產品上架/測試實驗性的想法，第二個：他會動，比起靜態的呈現，互動感會帶給我們很大的感受升級，第三個：他跨平台，只要有瀏覽器就有網站。

其他的範例可以到 hahow課程頁面 或我的codepen觀看。

「恩..說是要分享，但是要從哪裡開始呢?」

5月時，與hahow的魏敏討論市場上網頁技術的需求之後，決定開設一門讓大家可以輕鬆入門網頁，卻又不像是一般codeacademy / 一些免費的教學，只能大概了解概念，卻沒有辦法有系統地完成一個網頁跟調整視覺。

討論完之後，終於訂出了這次課程精準的目標，說是精準其實也有點惶恐，是一個大方向，很少人嘗試過的教學方式：

「我想要用設計的角度去教程式(恩?」

因此將課程的目標定為「用illstrator的概念了解並實作網頁」，並且每一個範例是貨真價實的，帶著把一個網頁從頭刻到尾，會碰到甚麼問題/要調整哪些css/視覺的考量如何轉換成程式的架構…等，比起怎麼做，更重視 「想要達成甚麼效果」跟「為什麼要這樣做」，才不會讓東西過於枯燥。

原本的大綱規劃有十三堂課，分別講解html基礎概念到css到帶入一些js的基礎概念，想說畢竟是”入門”課程嘛，就是每一個會用到的東西大概帶到就ok了:

///原本的課程規劃
1 - html/css/js 網站結構介紹- 一棵三種語言構成的大樹
2 - 規劃架構- 寫網頁前的規劃與準備
3 - 元素定位- 基礎元素定位 上下左右對齊與大小
4 - 基礎html/css - 網頁名片
5 - 開始開發- 架構原則- 使用 class 與 id 操作元素
6 - 開始開發- Codepen操作實務- 介紹sass與jade 快速開發入門
7 - 元素定位- padding、margin、align 元素之間彼此的關係
8 - 元素定位- div布局策略、overflow 有最好的棋盤才能下最好的棋
9 - 視覺介面- css 初階視覺調整
10 - 視覺介面- 顏色、大小、一切你在Illstrator會看到的美好事物
11 - 視覺介面- 字體 小小改變就能帶來超高CP值的調整
12 - 視覺介面- Illstrator 圖像匯入與png實用
13 - 靜態專案實作-實作模仿刻一個HAHOW的課程頁面
14 - 使用者互動- css 動畫-滑鼠的點擊、進入、滑動互動
15 - 使用者互動-基礎 css animation使用 用%影格概念操作動畫
16 - JS 基礎入門 - 使用Jquery改變元件外觀
17 - JS 基礎入門 - 使用Jquery 在各種事件中觸發網頁動態改變
18 - SVG - 向量不失真的網頁圖像格式
19 - SVG 動畫 - 讓你的LOGO或圖像動起來
20 - 動態專案實作- 做一個獨特動態的個人頁面
21 - 破除障礙- 問題解決與找資源的技巧
22 - 後續發展- 兩大路線 (前端網頁佈局/ 專攻動畫與圖形處理)

「錯了，錯了，全部都錯了」

隨著湧入的人越來越多，我一開始錄的時候發現，完全不是這麼回事啊!!!

如果稀哩呼嚕一堂講了兩個小時，誰聽得懂你在做甚麼，尤其當教學的東西到一個量之後沒有任何練習範例或看得到的產出，看的人就會開始覺得無趣抽象，抓不到你想傳述的概念，更別提去練習或了解了，這種教學方式，就像是拿著一本說明書一樣對著學生在念嘛，自己看著都覺得無趣了，更別提怎麼讓別人愉悅地把東西學進去。

想了好久好久，決定來進行一次大改造，想像自己如果是平面設計師，完全沒有程式基礎的時候，會怎麼樣去了解一個東西，為什麼要這樣做那樣做呢，到底什麼樣的範例事會讓大家覺得有趣的? 什麼才能讓大家再做中學，學中獲得成就感呢?

也因此課程暴增到了九十幾堂，每一堂原本預計5~10分鐘，但也時常超過20分鐘甚至到一個小時，就為了把最完整的思考流程、設計等等脈絡帶出來，才算是好的教學，想像自己是一個完全的新手，對於網站開始要有了解，有了全面的認知之後，再開始進入開發階段，一個個把小小的工具跟技能練好實作，再一個階段一個階段地把看似不可能的專案實踐出來，在小成就感中喜悅，逐漸成長。

///新的課程列表
 1 - 最新公告區(2016/9/28)-點擊"講義"查看最新課程消息
 2 - 楔子-課程進行模式說明 
 3 - 楔子-網頁前後端如何運作 
 4 - 基礎前期規劃-網站專案開發流程 
 5 - 基礎前期規劃-網站主題名稱logo 
 6 - 基礎前期規劃-網站瀏覽結構樹規劃 
 7 - 基礎前期規劃-網站排版規劃與分類 
 8 - 基礎前期規劃-網站視覺配色概念與資源 
 9 - 本機環境架設 - sublime 操作與瀏覽器預覽網頁 
 10 - 本機環境架設 - 伺服器瀏覽與原理講解 
 11 - Codepen環境架設 - 平台介紹/註冊與基礎設定 
 12 - Codepen環境架設 - 實際使用sublime中快速鍵 
 13 - 基礎HTML/CSS - html中元素&排列的概念 
 14 - 基礎HTML/CSS - html中結構&層級的概念 
 15 - 基礎HTML/CSS - <project 0> 簡易版本自我介紹 
 16 - 基礎HTML/CSS - css 直接調整外觀與顏色框線 
 17 - 基礎HTML/CSS - css 分開撰寫 - class&id概念 
 18 - 基礎HTML/CSS - css 顯示方式 display block/inline 
 19 - 基礎HTML/CSS - css 元素位置 - 相對 / 絕對定位 
 20 - 基礎HTML/CSS - css 內間隔/外間隔(padding/margin) 
 21 - 基礎HTML/CSS - css 字體變化與span-在文章段落中製作變化 
 22 - 基礎HTML/CSS - <project 1> html / css 大整合-製作獨特名片網頁 
 23 - ​基礎HTML/CSS - <homework 1> 功課說明-製作自己的技能網頁 
 24 - 系統性管理開發 - html縮寫模組-Emmet 介紹 
 25 - 系統性管理開發 - html樣板語言-jade (課程主要使用) 
 26 - 系統性管理開發 - css 樣板語言-sass (課程主要使用) 
 27 - 系統性管理開發 - sass - 變數概念管理色彩&內容 
 28 - 系統性管理開發 - sass - 動態產生模組mixin概念 
 29 - 系統性管理開發 - sass - 常用mixin與累積資源 
 30 - 系統性管理開發 - html參考資料轉換jade 
 31 - 系統性管理開發 - <project 2> 實作網頁品牌視覺指導套色 
 32 - 素材前期準備 - 如何在以拉中製作icon/圖像 
 33 - 素材前期準備 - 如何輸出圖片jpeg/png/svg 
 34 - 素材前期準備 - 將圖片上傳到imgur影像網站 
 35 - 素材前期準備 - 管理網頁色彩(guideline/sass/js) 
 36 - 前端基礎動畫互動-html attr 與自定義屬性名稱 
 37 - 前端基礎動畫互動 - css 綜合定位運用 absolute / relative 
 38 - 前端基礎動畫互動 - css 加入基礎滑鼠互動 :hover / :active 
 39 - 前端基礎動畫互動 - css 動畫基礎 transition-duration/delay 
 40 - 前端基礎動畫互動 - css 製作影格動畫 animation/keyframes 
 41 - 前端基礎動畫互動 - css 動畫速度曲線 fillmode/speed curve 
 42 - 前端基礎動畫互動 - SVG - 繪製向量網頁圖片 / logo 
 43 - 前端基礎動畫互動 - SVG - 讓你的LOGO或圖像動起來 
 44 - 前端基礎動畫互動 - <project 3> 動態互動天氣盒子 
 45 - 前端進階程式js-引言 
 46 - 前端進階程式js - jquery 動態改變css外觀/ html內容 
 47 - 前端進階程式js - jquery 初階滑鼠事件 - click/hover 
 48 - 前端進階程式js - jquery 變數概念- 儲存修改與判斷 
 49 - 前端進階程式js - json 物件陣列概念 & for 遍歷 
 50 - 前端進階程式js - jquery / json 動態產生購物車清單 
 51 - 前端進階程式js - Jquery ajax - 非同步載入與應用介紹 
 52 - 前端進階程式js - Jquery ajax - 實作導入資料代辦清單 
 53 - 前端進階程式js - <project 4> 實作購物車-動態新增購買物品與結算 
 54 - RWD原理與應用-內容流與概念說明 
 55 - RWD原理與應用-指定比例尺寸% 與max-width/min-width 
 56 - RWD原理與應用-重新排版的原理-特定條件css-media query 
 57 - RWD原理與應用-實作手機版面-模仿fb帳號頁面桌面/手機板變化 
 58 - RWD原理與應用-懶人工具- bootstrap 原理與結構講解 
 59 - RWD原理與應用-bootstrap 格線系統(container/row/column)原理 
 60 - RWD原理與應用-bootstrap 欄(xs/sm/md/lg) RWD應用 
 61 - RWD原理與應用-bootstrap 應用技巧 padding型規劃/多層div 
 62 - <project 5> 實際應用範例 bootstrap-常見企業品牌網頁 
 63 - 網頁視覺設計-流程-版面規劃軟體 AI/SKETCH/紙筆 
 64 - 網頁視覺設計-流程-與頁面結構/跳轉方式規劃 
 65 - 網頁視覺設計-元素-樣式 顏色規劃 
 66 - 網頁視覺設計-元素-元素動畫 反應規劃 
 67 - 網頁視覺設計-元素-從元素建構而上的設計 
 68 - 網頁視覺設計-元素-從頁面整體切分而下的設計 
 69 - 網頁視覺設計-元素-從設計轉換程式網頁的常用技巧 
 70 - <project 6> 實際網站應用案例-Material Design風UI/UX 
 71 - 前端框架Vue.js-為什麼要用資料導向做網頁(回顧js) 
 72 - 前端框架Vue.js-將變數代入模板中 
 73 - 前端框架Vue.js-v-for 列舉元素應用 
 74 - 前端框架Vue.js-v-model 使用者輸入雙向綁定 
 75 - 前端框架Vue.js- v-if / v-show 條件渲染與資料的後處理-實作博客來 
 76 - 前端框架Vue.js- v-on / method 建立js事件 
 77 - 前端框架Vue.js-與AJAX的對接 動態載入資訊 
 78 - 前端框架Vue.js-綜合案例-使用hahow課程資料 
 79 - <project 7> 客製化待辦清單Todo List 
 80 - 購買伺服器部署/網域-伺服器原理與規格說明 
 81 - 購買伺服器部署/網域-購買linux主機與網址DNS設置 
 82 - 購買伺服器部署/網域-購買不能ssh連線的主機設置 
 83 - 購買伺服器部署/網域-安裝apache/mysql 
 84 - 購買伺服器部署/網域-使用filezilla軟體連線與上傳 
 85 - 購買伺服器部署/網域-使用sublime sftp進行同步 
 86 - <project 7> 購買伺服器部署/網域-網站上線實作 
 87 - 實作案例分析-HAHOW-練習使用Bootstrap+Vue.js建構課程頁面 
 88 - 實作案例分析-Autodesk-影片式背景一頁式網頁+導覽列 
 89 - 實作案例分析-Medium-部落格-多資料首頁 
 90 - 破除障礙- 問題解決與找資源的技巧 
 91 - 後續發展- 兩大路線 (前端網頁佈局/ 專攻動畫與圖形處理)

我知道列表看起來有點長有點可怕，但是每個單元都是5–10分鐘(後期常超過20…)，一個功能一個功能帶入並詳細地分析、演示這會用在真正寫網頁的哪些地方，帶著實作一次，也因為方法、結構都是一整套下來，照著思路練習過幾次，自然就能逐漸熟悉網頁撰寫的流程。

如果以前有人這樣帶著我這樣有趣的入門網頁，應該就可以少雷的一兩年的人了吧(笑，有些自己探索了很久去蕪存菁的重點，也是在時間歷練之下理出的心法，所以我不後悔做這樣的決定，更是與有榮焉希望有朝一日如果看到設計師們漸漸地不再懼怕程式，不管是溝通、還是台灣網頁界的現況都能夠得到極大的成長。

「每個人都是在雷人中成長，磨利了現在的自己，那為什麼要讓大家再自己坎坷的走一遍?」

曾經有一個建築廠商找我，希望能夠製作一個工地管理系統，方便能夠把工人的位置/狀態回報/或是建材等等的資訊，以一個APP或是網頁的方式呈現，在建材需要的數量/報價上也能夠及時掌握數量跟回報，他們長期以來的人事都是email傳excel檔案管理，亂糟糟的毫無章法，更常漏東漏西或時間成本全砸在上面。

這是非常好的改變，但是一個晚上他打電話來，說他不想做了，因為不管怎麼做都沒有辦法防止有心人士看到系統，然後直接請工程師團隊模仿一個出來，他說：

「這樣不就自己花了錢來讓競爭對手變厲害嗎？ 我幹嘛這樣做」

然後就憤憤不平地掛電話了，當下我是十分錯愕的，談好已經幾乎要開始執行的案子突然就沒了。

但是更令我沮喪的是，他們寧可用各種複雜的excel報表，有時差地傳遞資料/手動計算，而不願意試圖改良前進，即使對手也許會看到跟進這樣的制度，台灣的傳統廠商到底發生了什麼問題，為什麼當我們踩穩了一個能夠賺錢跟成長的位置之後就放棄了進化呢？

同樣的道理套用在我的課程上，有很多人跟我說：那是你的專業耶！你捨得這樣掏心掏肺地把課程設計得像蛋糕一樣容易吸收，把大量的經驗分享出去!?你不怕別人這樣學完之後就變成你的競爭對手嗎？

我們不願意進步，恐懼別人進步，因為潛意識知道自己沒在前進。

有有趣的對手交流較勁比自己獨鬥有趣，更何況，誰說我一輩子要靠這個吃飯，難道會寫網頁賺錢之後就要死命地抱著自己僅有的一點點技能嗎？我從來都沒有放棄前進，放棄學習，也因此在課程中學到的儘管多，也僅僅是過去的我的巔峰，一轉眼又再成為遠方的背影。

雖然這陣子錄課程錄到回台北過家門而不入XD(喂，大量的不讀不回別人訊息XD 好多好多時間都砸在這個上面，還是真的很開心的，當然不是要催大家看，影片一直都會在，只希望你記得你曾經想學習，就不會忘記初衷。

「一場豪賭 一場自我進化」

台灣現況

在傳統的職場環境（台灣）中，設計師被稱作是美工，不過我想這雙方都有一點問題，一個是設計師被動地認為自己是接收工作並且直接執行美感轉換，像是一個人體Photoshop一般的存在，所以在面對不合理的修改要求、抱怨的時候會怨天尤人，心情也差了，但還是認命地改，不企圖反駁什麼，畢竟台灣社會從小到大的教育並不鼓勵我們表達想法，多得是你就照我說的做就對了的心態。

設計做到後期之後反而覺得真正重要的是「溝通」，比起美感，不管怎麼樣的風格都有它美的極限；在不同風格間，並非誰比較好，而是誰比較適合這個載體資訊。網頁的本質是溝通媒介，所以當溝通的訊息沒有成功的傳遞，不管UI再絢麗再細緻都會很遺憾地無法發揮價值。

講到溝通的隔閡，從開始接網頁相關的案子也滿三年了，持續地成長茁壯後，看到業界發生的大部分情況都是「設計師出稿、工程師刻板」，而且在中間會有很多時候無法溝通，設計師難以了解以程式方式網頁能夠做到的，工程師覺得設計師機車一直在調整小細節或出各種難搞的spec，當固守著自己領域的時候，就會出現像是丟皮球般的埋怨跟被動放棄溝通。

「設計師們，相信我，會了技術的你們根本是外掛，自產素材VI、想動態、實作細節，更可以去探索跟完成原本純視覺設計達不到的事情」

如果有著平面設計的基礎，在設計網站版面的時候，自然能比純工程師有更高的彈性，可以改變跟嘗試的事情就更多了，除了飛來飛去、動來動去的花俏UI之外，一般中規中局的版面規劃也能以平面設計的角度關注細節，自然在介面的規劃上就拉開了一段距離，更別提很多設計師身兼插畫家，可以自己產出網頁用的素材，不用辛苦上google搜尋一堆不同風格的素材之後，苦惱怎麼拼在一起了，這樣的優勢真的是犯規級別。

所以如果設計師學習了網頁程式，有人以設計師的角度去分析，從「想要讓網站視覺變得好的時候要怎麼做」去層層剖析達到目的需要的方法跟教學，就能夠以很短的速度入門、昇華，融合原有的設計既能達到一個新的境界，這樣的境界是新時代的「雜學」，讓工具成為自己的左右手，而非最終的目的。

最後關於價錢的部分，有人跟我說

「2000元你傻啦，這樣的課程去外面xx電腦之類的根本是幾萬塊在收的」

其實我並不怎麼怕，因為你不看課程永遠損失的是自己，學到的東西永遠跟自己的努力成正比的付出。

我在教學中學到的事物，經過講過一遍之後能力三級跳，基礎功更為扎實，其實也算是收穫很多，重點是現在的時代不一樣，群募的線上課程節省了講師用無限重複的時間去授課的缺點，所以這樣開2000元收一千多個學生，跟8000元收二十個學生，而且要不斷地重複一樣的事情，這樣的效果是跟可以帶來的影響力是乘倍數增加的，也是以前時代做不到的，而我也不用那麼大的時間成本重複地授課，可以鑽研自己喜愛的事物。

像是學生裡面就有很多讓我驚嘆的，才剛學會網頁就做出真的很不錯的作品：

他們都是動態網站而不是純平面的作品，靠程式刻出來的！ 右上 左上 右下 左下

目前，已經1600人修課 ，超過1/3的人開始第一堂課，將近100人開始完成第一個Project。

如果我們把工具當學科看，只會看到無趣，就像劇本設計一樣，核心思想才是王道，希望所有買跟修這門課的同學，我都能夠幫助到你們，就像在幫助兩年前的自己一樣，不只傳授工具、更傳授了跨領域結合、我所信仰的雜學。

「我們無法一直在這片天空上飛翔，只能奮力保持著盡量不墜落」

一起進化吧，我把到目前為止的能量都放在這邊了， 如果有朝一日能夠讓即使1%的人開始踏出自己的領域，我也滿足了。 現在的各種平台盛行，很難觸及到所有人分享，但願每個進來的人，都能收穫滿滿的離開，展開新的人生道路。 

快瞧瞧哲宇老闆精心製作的線上課程動畫互動網頁程式入門(HTML/CSS/JS)

p.s.如果這門課真的有幫助到你，讓你體會到網頁學習的樂趣， 再請不吝給予評價與分享了:)

看看下一篇：釀造一門結合網頁、設計、數學與特效的線上程式課程

撰文：吳哲宇

這篇文章 從不只是一門線上課程，而是一場推動進化的豪賭 最早出現於 Creative Coding TW - 互動程式創作台灣站。