設計的初衷，應是傳達意念，使人共鳴。在現今的網頁開發流程中，有許多既成的模板可以運用，只要善用資源就能達到不錯的效果；而在框架底下，也能夠變化出很多花樣 ⋯⋯ 但回首來時路，才發現我們無意間遺忘了設計的初衷。
透過這堂課，找回你的網頁設計初心！
這堂課將帶領你，從零開始打造一個「打動人心」的互動特效網頁；賦予你堅實的網頁開發技術、靈活組合各式技巧的應變能力，幫助你實踐心中的想法。
>>>> 點我看完整開發過程縮時！
課程分為四大系列單元，以2300 分鐘帶你走遍網頁特效的世界
第一階段：將 HTML/CSS 融會貫通，輕鬆入門，順暢進階
第二階段：從零開始入門JavaScript 程式與動畫基礎到進階互動
第三階段：學習數學與物件導向 ，探索 Canvas 互動運算藝術
第四階段：Vue.js 掌控資料與顯示的前端框架-整合應用
除此之外，還有四個成功解鎖的加碼單元
VueX / Vue-router 誰說只有前端做不出完整網站
GSAP 活用時間軸動畫
D3.js 視覺化資料的利器入門
Three.js 製作 3D 特效網頁入門
如果可以將美好想像附著於自己的網頁；
如果可以透過採集環境的聲音聽見我們對環境的記憶；
如果可以藉由複雜的數學曲線畫出優雅的線條；
如果可以將所見所聞的物理現象，萃取重現於螢幕之上⋯⋯
如果這些如果可以成真，就可以創造網頁的生命力，走出單純 UI 框架的套疊！
搭配學習地圖，快速理解四階段課程內容
第一階段：將 HTML/CSS 融會貫通，輕鬆入門順暢進階sass/pug
在課程的開頭，除了講解如何製作網頁，更是要傳授如何用已知的技術，說不一樣的故事。第一階段濃縮了「動畫互動網頁程式入門」的課程精華，整理成新版的教學內容加上全新可愛的範例，帶領大家將網頁開發的基本功 HTML/CSS 融會貫通應用到作品上。學過的人可以快速複習；完全初學的人能夠快速上手！並在後期引入sass / pug教學，帶你了解現代網頁開發的超方便工具。
第二階段：從零開始入門JavaScript 程式與動畫基礎到進階互動
沒有基礎怎麼辦呢？ 別擔心，這門課程有完整的JS入門教學，帶著沒寫過程式的你逐步了解原理，而後帶入 jquery、GSAP 等函式庫製作互動動畫與特效，讓我們在網頁上找回一些 Flash 時代被遺棄的精神，做出有現代感、動的複雜卻不凌亂的網頁。
透過日常的案例與遊戲演繹，學習 JS 的陣列資料操作，從基礎的變數、函數、迴圈概念，到結合使用Jquery等函式庫製作特效，讓你了解網頁逐漸發展的歷史，更在一個個漂亮與精心設計的應用範例上手入門程式開發，從0開始打下深厚的程式基礎為Canvas結合大量程式數學做準備。
第三階段：UI 原理實作與 Canvas 運算藝術
網頁中可能性最大的領域－Canvas，雖然顧名思義是畫布，實際上卻是需要靠自己運算，撰寫顯示的邏輯。這可不是單純調調 CSS 顏色、框線可以達到的！
有了上一階段的 JS 與動畫基礎，我們會製作各種物理模擬與計算藝術，從小時候的記憶－打磚塊、貪吃蛇，一直到粒子效果、未來 UI 特效、重力與行星模擬⋯⋯逐步將學到的東西整合起來。
不過別擔心，透過動態的教材設計與實例講解，你將可以理解到，原來以前的學的那些外星符號可以運用在繪製特效上，透過幾行精練的數學式子就能創造出繁麗的效果！
第四階段：集成 Vue.js，製作前端體驗佳的單頁式網站 SPA
最後會用到 Vue.js，掌控資料與顯示轉換的前端框架，舉凡購物車資料、影片集、遊戲中的人物或物品資料、文章裡面的 tag 管理或是設計中的色彩、樣式，都可以透過資料跟邏輯串接。
剩下的更新或重新計算，就跟著邏輯一起交給 Vue.js 即可，省得我們還要一個一個土法煉鋼！最終將來個大整合：製作一個大型的網頁遊戲或應用，僅僅在前端就能完成一個精美的作品！
課堂實作 Project，檢視學習成果
上完這堂課後，你將可以掌握現代網頁的基礎技術，並具備靈活應用的能力；看見網頁更多的可能性，親手製作具有特效、設計感的網頁。
網頁對我來說，是一個發揮影響力的世界；透過整合自身學習與實作經驗，再難的東西我都可以講的平易近人，並帶領學生從實作入手。我希望能夠把自己整合出來的「動態網頁」最終樣貌與技術分享給大家，讓我們一起探索動態網頁的樂趣與可能性吧！
《課程實作 Project》
Project 1：使用網頁製作屬於自己的動態簡歷
Project 2：快速入門並使用 CSS 在網頁上刻一座美麗的城市
Project 3：做一個摩斯密碼翻譯器
Project 4： 物件導向，製作記憶方塊遊戲
Project 5：使用 Canvas 繪製製作橫衝直撞的貪吃蛇
Project 6：做科幻風格的網頁碼表
Project 7：結合物件導向與數學製作遊戲 Agar.io
Project 8：結合音效與動畫製作互動音樂弦 連結
Project 9：結合重力與物理做小朋友下樓梯
「範例」 使用Vue.js製作動態咖啡成分編輯
「範例」 從Vue.js 製作動態撲克牌遊戲了解Method與動態Class
Project 10：結合設計與繪圖製作太空侵入者
Project 11：結合網頁元件與動畫製作動態唱盤
Project 12：結合陣列與地圖製作小精靈
Project 13：使用 Vue.js 製作製作動態電影介面
Project 14：Canvas / Vue.js 與 遊戲結合 製作有趣線上整合遊戲
同學作品集
作品集連結：http://2017.awiclass.monoame.com/proj/2
課程單元一覽
單元 1 課程介紹與導讀 - 動態網頁的過去與未來
單元 2 課程介紹與導讀- 課程路線與學習方式
單元 3 課程介紹與導讀- 使用Markdown與記錄學習筆記
單元 4 HTML/CSS快速入門 - Codepen 平台介紹與基礎設定
單元 5試看 HTML/CSS快速入門 - html中結構與元素
單元 6 HTML/CSS快速入門 - css調整外觀與class/id概念
單元 7 HTML/CSS快速入門 - css的內外距
單元 8 HTML/CSS快速入門 - css的定位與排列
單元 9 HTML/CSS快速入門 - css定位與排列實作
單元 10 HTML/CSS快速入門 - flexbox排版入門
單元 11 HTML/CSS快速入門 <project 1> 撰寫一份自己的網頁履歷
<project 1> 撰寫一份自己的網頁履歷
單元 12 HTML/CSS快速入門 - pug / sass 縮寫入門
單元 13 HTML/CSS快速入門 - sass 管理變數與模組
單元 14 HTML/CSS快速入門 - sass 迴圈與內容
單元 15 HTML/CSS快速入門 - css動畫基礎與滑鼠互動
單元 16 HTML/CSS快速入門 - css製作影格動畫
單元 17 HTML/CSS快速入門 - <Project 2> 在網頁寫一座美麗城市 Part1 - 前置準備
單元 18 HTML/CSS快速入門 - <Project 2> 在網頁寫一座美麗城市 Part2 - 架構與上色
單元 19 HTML/CSS快速入門 - <Project 2> 在網頁寫一座美麗城市 Part3 - 動畫與切換
<Project 2> 在網頁寫一座美麗城市
單元 20試看 JavaScript程式基礎 - JavaScript 介紹
單元 21試看 JavaScript程式基礎 - 變數與判斷
單元 22 JavaScript程式基礎 - 物件與陣列
單元 23 JavaScript程式基礎 - 陣列操作與迴圈
單元 24 JavaScript程式基礎 - 字串的處理
單元 25 JavaScript程式基礎 - 函數 模組化應用
單元 26 JavaScript程式基礎 - 時間函數-從靜態到動態
單元 27 JavaScript程式基礎 - Jquery 操作元素
單元 28 JavaScript程式基礎 - Jquery 事件觸發
單元 29 JavaScript程式基礎 - Jquery 動畫原理與應用
單元 30 JavaScript程式基礎 - <Project 3> 做一個摩斯密碼翻譯器
<Project 3> 做一個摩斯密碼翻譯器
單元 31 JavaScript程式基礎 - 陣列的批次操作(map/filter/foreach...)
單元 32 JavaScript程式基礎 - AJAX 與資料處理
單元 33 JavaScript程式基礎 - 使用者輸入與表單
單元 34試看 JavaScript程式基礎 - 物件導向入門 概念篇
單元 35 JavaScript程式基礎 - 物件導向入門 繼承篇
單元 36 JavaScript程式基礎 - 物件導向入門 實作篇
單元 37 JavaScript程式基礎 - <Project 4> 記憶方塊 Part. 1 介面與概念篇
單元 38 JavaScript程式基礎 - <Project 4> 記憶方塊 Part. 2 Blocks物件
單元 39 JavaScript程式基礎 - <Project 4> 記憶方塊 Part. 3 Game遊戲物件
<Project 4> Memory Blocks 記憶方塊
單元 40 動態網頁Workflow概覽 - 動態網頁的形式與應用
單元 41 動態網頁Workflow概覽 - 設計思考發想與繪製草稿
單元 42 動態網頁Workflow概覽 - 網頁結構與內容UX規劃
單元 43 動態網頁Workflow概覽 - UI視覺設計與元件
單元 44 動態網頁Workflow概覽 - 網頁的切版與設計交接
單元 45試看 Canvas與特效動畫- 繪圖基礎語法 與動畫原理
單元 46 Canvas與特效動畫- 畫布的座標系操作
單元 47 Canvas與特效動畫- 物理基礎(速度 / 加速度)
單元 48 Canvas與特效動畫- Vector 向量的概念
單元 49 Canvas與特效動畫- <project 5> 製作橫衝直撞的貪吃蛇
<project 5> 製作橫衝直撞的貪吃蛇
單元 50 Canvas與特效動畫- ES6類別定義與模板製作
單元 51 Canvas與特效動畫- 物件導向結構 粒子篇
單元 52 Canvas與特效動畫- 極坐標的基礎概念
單元 53 Canvas與特效動畫- 三角函數入門 - 繪製多邊形
單元 54 Canvas與特效動畫- 三角函數的波形與軌跡
單元 55 Canvas與特效動畫- 進階繪圖與遞迴
單元 56 Canvas與特效動畫- <project 6> 做科幻風格的網頁碼表
<project 6> 做科幻風格的網頁碼表
單元 57 Canvas與特效動畫- 速度曲線與動畫控制
單元 58 Canvas與特效動畫- <project 7> 結合物件跟繪圖製作遊戲Agar.io （上）
單元 59 Canvas與特效動畫- <project 7> 結合物件跟繪圖製作遊戲Agar.io（下）
單元 60 Canvas與特效動畫- <project 8>結合網頁元件與動畫製作動態唱盤
單元 61 Canvas與特效動畫- <project 9> 結合重力與物理做小朋友下樓梯 (上)
單元 62 Canvas與特效動畫- <project 9> 結合重力與物理做小朋友下樓梯 (下)
單元 63 Canvas與特效動畫- <project 10> 結合物理與音效製作互動音樂弦
單元 64 Canvas與特效動畫- <project 11>結合設計與繪圖製作太空侵入者
單元 65 Canvas與特效動畫- <project 12>結合陣列與地圖製作小精靈
單元 66試看 Vue.js前端資料框架- 簡介與資料代換入門
單元 67 Vue.js前端資料框架- 條件顯示與資料展開
單元 68 Vue.js前端資料框架- 動態屬性與視覺樣式
單元 69 Vue.js前端資料框架- 事件觸發與使用者互動
單元 70 Vue.js前端資料框架- 計算屬性與監看變化
單元 71 Vue.js前端資料框架- <project 13> 使用Vue.js製作製作動態選書城
單元 72 Canvas / Vue.js 與 遊戲結合- 製作有趣線上整合遊戲 (上)
單元 73 Canvas / Vue.js 與 遊戲結合- 製作有趣線上整合遊戲 (中)
單元 74 Canvas / Vue.js 與 遊戲結合- 製作有趣線上整合遊戲 (下)
單元 75 [加碼達標系列 800%]：VueX / Vue-router 誰說只有前端做不出完整網站
單元 76 [加碼達標系列 1600%]：GSAP 活用時間軸動畫
單元 77 [加碼達標系列 2000%]：D3.js 視覺化資料的利器（入門）
單元 78 [加碼達標系列 2500%]：Three.js 製作 3D 特效網頁（入門）
單元 79 [課程總結] -動態網頁的發展與可能性
關於講師：墨雨設計創辦人 吳哲宇
從動畫與平面設計起家，持續做到整體品牌形象 CI 設計到 UI/UX APP 介面設計，目前專攻網頁動畫與互動，研究如何以網頁的技巧實踐 Motion Graphics 的精神，以設計的角度主宰網頁，讓網頁不只是能用、資訊呈現，更要有趣、好玩。
重點經歷
- 第九屆宏碁數位創作獎 高中專業組首獎＋評審團超級大獎
- 故事旅社 啟程，故事總匯風視覺設計
- 台北智慧城市黑客松評審團超級大獎
- 聯合報國際美容展 2015/2016 前後台網頁暨系統開發
- 雜學校展覽 網⾴開發
- 台北聲⾳地景計畫官網 設計 / 開發
其他作品
網站範例參考
課程相關問題 Q&A
Q1：沒有程式或設計基礎適合上這門課嗎？
這堂課是為了讓設計相關或是沒有任何程式基礎的人，能上手真正「業界」網頁程式設計的課程！其實在業界，大型網站往往都不是用軟體，而是用程式碼一行一行刻出來的；既沒有圖形化介面，上手也很困難。
簡介中提到的 Codepen 平台是線上的編輯環境，可以即時預覽打出來的程式，不會覺得學起來很抽象，也可以省去上傳檔案才能預覽的麻煩！而且平台練習使用都是免費的，開啟網頁瀏覽器輸入網址就可以使用。
希望能幫助大家降低對於程式設計的恐懼，懂得如何熟練跟用它操作網頁視覺互動，能做的東西絕對比單純用 Dreamweaver 排版來的多而且專業，在業界也可以提升跟相關程式人員的溝通基礎唷！
Q2：課程使用的軟體要怎麼安裝跟使用呢？有分平台嗎？
簡介中提到的 Codepen 平台是線上的編輯環境，可以即時預覽打出來的程式，開啟網頁瀏覽器輸入網址就可以使用，無論是 Mac 或是 Windows 都可以使用喔！
Q3：有哪些常用的參考資料，或是學習資源呢？
視覺的部分可以參考 Pinterest / Dribble，以及這次的教學平台 Codepen；至於視覺介面只要搜尋關鍵字 UI / UX Web Design 就可以找到很多不錯的案例。
程式的部分可以參考 W3school，在基礎的 html/css 都有方便的索引參考，想做什麼就查什麼，雖然偏向功能解析，只要掌握網頁基本概念了之後都能夠很快速的引用。
Q4：上完這門課之後，有辦法獨立接案嗎？
獨立接案需要經驗累積，但如果把課程中提到的內容練熟，自己多多嘗試應用，就可以更熟悉網頁領域，增加與工程師合作的溝通效率。往後只要透過自行進修，就可以嘗試接案。
Q5：這一堂課與「動畫互動網頁程式入門」堂課差別在哪裡呢？
這堂課程將重點與火力集中在 JavaScript 與 Canvas 繪圖上，靈活製作更進階的動態網站，不管是遊戲特效 設計網頁都能應用。沒有基礎也別擔心，這堂課程也會結合「動畫互動網頁程式入門」的精華，推出全新範例讓沒有基礎的人快速上手。
