![](\"https://paper-attachments.dropbox.com/s_DE1C709557FAD010197FC20AB99AEF8BF401DA3A74A5885FFE6DF79BE8087466_1618928336277_+2021-04-20+10.18.51.png\")
哲宇老師的綜合連結入口
哲宇老師的免費學習與交流資源
探索藝術與工程的邊界 創造極致的互動體驗
哲宇擔任紐約大學 Creative Coding Graduate Assistant - 在系上任職研究助理與助教快兩年，喜歡新奇古怪的事物，想脫離網頁的限制，更自由的結合各種媒體與技術創作互動設計。從動畫與平面設計起家，持續做到整體品牌形象 CI 設計到 UI/UX APP 介面設計，目前專攻網頁動畫與互動，研究如何以網頁的技巧實踐 MotionGraphics 的精神，以設計的角度主宰網頁，讓網頁不只是能用、資訊呈現，更要有趣、好玩。
墨雨設計成立於 2015 年，跨足各領域平面 / CI / 網站設計，以多元的視野與專業，為您創造不同凡響的作品。
互動設計在很多廣告、品牌推廣跟更廣泛的設計產業，都有商業與藝術上的應用，雖然在台灣可能還沒發展興盛，但近年來台灣的設計風氣逐漸蓬勃，也開始有越來越多的展覽、活動或公司嘗試用不同的互動，讓廣告不再只是廣告，而是跟觀眾互動的遊戲或設計來呈現品牌或提升參與度，結合軟體跟硬體，在功能之外，尋找人對世界最原始的感動跟好奇心。
![](\"https://images.api.hahow.in/images/607eec1d031524111655a4c0\")
原來程式可以做到那麼多想像不到的事情
哲宇善於用有趣的範例，從程式、數學、或設計，整合式的帶你走入絢麗的 Coding 世界，無論是網頁設計，還是用程式藝術，都能從解決真實的問題或創作來看見學習的目的。
設計的初衷，應是傳達意念，使人共鳴。在現今的網頁開發流程中，有許多既成的模板可以運用，只要善用資源就能達到不錯的效果；而在框架底下，也能夠變化出很多花樣 ⋯⋯ 但回首來時路，才發現我們無意間遺忘了設計的初衷。
這堂課將帶領你，從零開始打造一個「打動人心」的互動特效網頁；賦予你堅實的網頁開發技術、靈活組合各式技巧的應變能力，幫助你實踐心中的想法。
![](\"////i.giphy.com/1hMdDYjLfu78k8G95L.gif\")
>>>> 點我看完整開發過程縮時！
課程分為四大系列單元，以2300 分鐘帶你走遍網頁特效的世界
\n第一階段：將 HTML/CSS 融會貫通，輕鬆入門，順暢進階\n
\n第二階段：從零開始入門JavaScript 程式與動畫基礎到進階互動\n
\n第三階段：學習數學與物件導向 ，探索 Canvas 互動運算藝術\n
\n第四階段：Vue.js 掌控資料與顯示的前端框架-整合應用\n
除此之外，還有四個成功解鎖的加碼單元
\nVueX / Vue-router 誰說只有前端做不出完整網站\n
\nGSAP 活用時間軸動畫\n
\nD3.js 視覺化資料的利器入門\n
\nThree.js 製作 3D 特效網頁入門\n
如果可以將美好想像附著於自己的網頁；
如果可以透過採集環境的聲音聽見我們對環境的記憶；
如果可以藉由複雜的數學曲線畫出優雅的線條；
如果可以將所見所聞的物理現象，萃取重現於螢幕之上⋯⋯
如果這些如果可以成真，就可以創造網頁的生命力，走出單純 UI 框架的套疊！
在課程的開頭，除了講解如何製作網頁，更是要傳授如何用已知的技術，說不一樣的故事。第一階段濃縮了「動畫互動網頁程式入門」的課程精華，整理成新版的教學內容加上全新可愛的範例，帶領大家將網頁開發的基本功 HTML/CSS 融會貫通應用到作品上。學過的人可以快速複習；完全初學的人能夠快速上手！並在後期引入sass / pug教學，帶你了解現代網頁開發的超方便工具。
![](\"////i.giphy.com/uTBNzy0tPaiiyWxCpp.gif\")
沒有基礎怎麼辦呢？ 別擔心，這門課程有完整的JS入門教學，帶著沒寫過程式的你逐步了解原理，而後帶入 jquery、GSAP 等函式庫製作互動動畫與特效，讓我們在網頁上找回一些 Flash 時代被遺棄的精神，做出有現代感、動的複雜卻不凌亂的網頁。
透過日常的案例與遊戲演繹，學習 JS 的陣列資料操作，從基礎的變數、函數、迴圈概念，到結合使用Jquery等函式庫製作特效，讓你了解網頁逐漸發展的歷史，更在一個個漂亮與精心設計的應用範例上手入門程式開發，從0開始打下深厚的程式基礎為Canvas結合大量程式數學做準備。
![](\"////i.giphy.com/4Zd1Xi5tdUR7QElvm5.gif\")
網頁中可能性最大的領域－Canvas，雖然顧名思義是畫布，實際上卻是需要靠自己運算，撰寫顯示的邏輯。這可不是單純調調 CSS 顏色、框線可以達到的！
有了上一階段的 JS 與動畫基礎，我們會製作各種物理模擬與計算藝術，從小時候的記憶－打磚塊、貪吃蛇，一直到粒子效果、未來 UI 特效、重力與行星模擬⋯⋯逐步將學到的東西整合起來。
![](\"https://i.giphy.com/10yVSg6tw7byh2.gif\")
不過別擔心，透過動態的教材設計與實例講解，你將可以理解到，原來以前的學的那些外星符號可以運用在繪製特效上，透過幾行精練的數學式子就能創造出繁麗的效果！
![](\"https://i.giphy.com/3o7bu4CaX8Ethm776E.gif\")
最後會用到 Vue.js，掌控資料與顯示轉換的前端框架，舉凡購物車資料、影片集、遊戲中的人物或物品資料、文章裡面的 tag 管理或是設計中的色彩、樣式，都可以透過資料跟邏輯串接。
![](\"https://i.giphy.com/fjy55XQW1EgJECoLGg.gif\")
剩下的更新或重新計算，就跟著邏輯一起交給 Vue.js 即可，省得我們還要一個一個土法煉鋼！最終將來個大整合：製作一個大型的網頁遊戲或應用，僅僅在前端就能完成一個精美的作品！
![](\"https://i.giphy.com/Oj5bpd7Dg2Y4eXCUTQ.gif\")
上完這堂課後，你將可以掌握現代網頁的基礎技術，並具備靈活應用的能力；看見網頁更多的可能性，親手製作具有特效、設計感的網頁。
網頁對我來說，是一個發揮影響力的世界；透過整合自身學習與實作經驗，再難的東西我都可以講的平易近人，並帶領學生從實作入手。我希望能夠把自己整合出來的「動態網頁」最終樣貌與技術分享給大家，讓我們一起探索動態網頁的樂趣與可能性吧！
《課程實作 Project》
Project 1：使用網頁製作屬於自己的動態簡歷
Project 2：快速入門並使用 CSS 在網頁上刻一座美麗的城市
![](\"https://i.giphy.com/1hMdDYjLfu78k8G95L.gif\")
Project 3：做一個摩斯密碼翻譯器
Project 4： 物件導向，製作記憶方塊遊戲
Project 5：使用 Canvas 繪製製作橫衝直撞的貪吃蛇
Project 6：做科幻風格的網頁碼表
Project 7：結合物件導向與數學製作遊戲 Agar.io
![](\"////i.giphy.com/8JQOVdcCD3D356EGQS.gif\")
Project 8：結合音效與動畫製作互動音樂弦 連結
Project 9：結合重力與物理做小朋友下樓梯
![](\"////i.giphy.com/fihtJFS3kD0JC7NBK1.gif\")
![](\"////i.giphy.com/2Yeh5FQE0JyR50EcTW.gif\")
![](\"////i.giphy.com/cdS4i44UUGTQQfvn1c.gif\")
\n「範例」 使用Vue.js製作動態咖啡成分編輯\n
「範例」 從Vue.js 製作動態撲克牌遊戲了解Method與動態Class
\nProject 10：結合設計與繪圖製作太空侵入者\n
Project 11：結合網頁元件與動畫製作動態唱盤
![](\"////i.giphy.com/vbG6yJNjbYvbc7d70e.gif\")
Project 12：結合陣列與地圖製作小精靈
Project 13：使用 Vue.js 製作製作動態電影介面
Project 14：Canvas / Vue.js 與 遊戲結合 製作有趣線上整合遊戲
![](\"////i.giphy.com/3eRmll3Bt3XxXFBUmO.gif\")
作品集連結：http://2017.awiclass.monoame.com/proj/2
\n單元 1 課程介紹與導讀 - 動態網頁的過去與未來\n
\n單元 2 課程介紹與導讀- 課程路線與學習方式\n
\n單元 3 課程介紹與導讀- 使用Markdown與記錄學習筆記\n
\n單元 4 HTML/CSS快速入門 - Codepen 平台介紹與基礎設定\n
\n單元 5試看 HTML/CSS快速入門 - html中結構與元素\n
\n單元 6 HTML/CSS快速入門 - css調整外觀與class/id概念\n
\n單元 7 HTML/CSS快速入門 - css的內外距\n
\n單元 8 HTML/CSS快速入門 - css的定位與排列\n
\n單元 9 HTML/CSS快速入門 - css定位與排列實作\n
\n單元 10 HTML/CSS快速入門 - flexbox排版入門\n
\n單元 11 HTML/CSS快速入門 <project 1> 撰寫一份自己的網頁履歷\n
\n<project 1> 撰寫一份自己的網頁履歷\n
\n單元 12 HTML/CSS快速入門 - pug / sass 縮寫入門\n
\n單元 13 HTML/CSS快速入門 - sass 管理變數與模組\n
\n單元 14 HTML/CSS快速入門 - sass 迴圈與內容\n
\n單元 15 HTML/CSS快速入門 - css動畫基礎與滑鼠互動\n
\n單元 16 HTML/CSS快速入門 - css製作影格動畫\n
\n單元 17 HTML/CSS快速入門 - <Project 2> 在網頁寫一座美麗城市 Part1 - 前置準備\n
\n單元 18 HTML/CSS快速入門 - <Project 2> 在網頁寫一座美麗城市 Part2 - 架構與上色\n
\n單元 19 HTML/CSS快速入門 - <Project 2> 在網頁寫一座美麗城市 Part3 - 動畫與切換\n
\n<Project 2> 在網頁寫一座美麗城市\n
\n單元 20試看 JavaScript程式基礎 - JavaScript 介紹\n
\n單元 21試看 JavaScript程式基礎 - 變數與判斷\n
\n單元 22 JavaScript程式基礎 - 物件與陣列\n
\n單元 23 JavaScript程式基礎 - 陣列操作與迴圈\n
\n單元 24 JavaScript程式基礎 - 字串的處理\n
\n單元 25 JavaScript程式基礎 - 函數 模組化應用\n
\n單元 26 JavaScript程式基礎 - 時間函數-從靜態到動態\n
\n單元 27 JavaScript程式基礎 - Jquery 操作元素\n
\n單元 28 JavaScript程式基礎 - Jquery 事件觸發\n
\n單元 29 JavaScript程式基礎 - Jquery 動畫原理與應用\n
\n單元 30 JavaScript程式基礎 - <Project 3> 做一個摩斯密碼翻譯器\n
\n<Project 3> 做一個摩斯密碼翻譯器\n
\n單元 31 JavaScript程式基礎 - 陣列的批次操作(map/filter/foreach...)\n
\n單元 32 JavaScript程式基礎 - AJAX 與資料處理\n
\n單元 33 JavaScript程式基礎 - 使用者輸入與表單\n
\n單元 34試看 JavaScript程式基礎 - 物件導向入門 概念篇\n
\n單元 35 JavaScript程式基礎 - 物件導向入門 繼承篇\n
\n單元 36 JavaScript程式基礎 - 物件導向入門 實作篇\n
\n單元 37 JavaScript程式基礎 - <Project 4> 記憶方塊 Part. 1 介面與概念篇\n
\n單元 38 JavaScript程式基礎 - <Project 4> 記憶方塊 Part. 2 Blocks物件\n
\n單元 39 JavaScript程式基礎 - <Project 4> 記憶方塊 Part. 3 Game遊戲物件\n
\n<Project 4> Memory Blocks 記憶方塊\n
\n單元 40 動態網頁Workflow概覽 - 動態網頁的形式與應用\n
\n單元 41 動態網頁Workflow概覽 - 設計思考發想與繪製草稿\n
\n單元 42 動態網頁Workflow概覽 - 網頁結構與內容UX規劃\n
\n單元 43 動態網頁Workflow概覽 - UI視覺設計與元件\n
\n單元 44 動態網頁Workflow概覽 - 網頁的切版與設計交接\n
\n單元 45試看 Canvas與特效動畫- 繪圖基礎語法 與動畫原理\n
\n單元 46 Canvas與特效動畫- 畫布的座標系操作\n
\n單元 47 Canvas與特效動畫- 物理基礎(速度 / 加速度)\n
\n單元 48 Canvas與特效動畫- Vector 向量的概念\n
\n單元 49 Canvas與特效動畫- <project 5> 製作橫衝直撞的貪吃蛇\n
\n<project 5> 製作橫衝直撞的貪吃蛇\n
\n單元 50 Canvas與特效動畫- ES6類別定義與模板製作\n
\n單元 51 Canvas與特效動畫- 物件導向結構 粒子篇\n
\n單元 52 Canvas與特效動畫- 極坐標的基礎概念\n
\n單元 53 Canvas與特效動畫- 三角函數入門 - 繪製多邊形\n
\n單元 54 Canvas與特效動畫- 三角函數的波形與軌跡\n
\n單元 55 Canvas與特效動畫- 進階繪圖與遞迴\n
\n單元 56 Canvas與特效動畫- <project 6> 做科幻風格的網頁碼表\n
\n<project 6> 做科幻風格的網頁碼表\n
\n單元 57 Canvas與特效動畫- 速度曲線與動畫控制\n
\n單元 58 Canvas與特效動畫- <project 7> 結合物件跟繪圖製作遊戲Agar.io （上）\n
\n單元 59 Canvas與特效動畫- <project 7> 結合物件跟繪圖製作遊戲Agar.io（下）\n
\n單元 60 Canvas與特效動畫- <project 8>結合網頁元件與動畫製作動態唱盤\n
\n單元 61 Canvas與特效動畫- <project 9> 結合重力與物理做小朋友下樓梯 (上)\n
\n單元 62 Canvas與特效動畫- <project 9> 結合重力與物理做小朋友下樓梯 (下)\n
\n單元 63 Canvas與特效動畫- <project 10> 結合物理與音效製作互動音樂弦\n
\n單元 64 Canvas與特效動畫- <project 11>結合設計與繪圖製作太空侵入者\n
\n單元 65 Canvas與特效動畫- <project 12>結合陣列與地圖製作小精靈\n
\n單元 66試看 Vue.js前端資料框架- 簡介與資料代換入門\n
\n單元 67 Vue.js前端資料框架- 條件顯示與資料展開\n
\n單元 68 Vue.js前端資料框架- 動態屬性與視覺樣式\n
\n單元 69 Vue.js前端資料框架- 事件觸發與使用者互動\n
\n單元 70 Vue.js前端資料框架- 計算屬性與監看變化\n
\n單元 71 Vue.js前端資料框架- <project 13> 使用Vue.js製作製作動態選書城\n
\n單元 72 Canvas / Vue.js 與 遊戲結合- 製作有趣線上整合遊戲 (上)\n
\n單元 73 Canvas / Vue.js 與 遊戲結合- 製作有趣線上整合遊戲 (中)\n
\n單元 74 Canvas / Vue.js 與 遊戲結合- 製作有趣線上整合遊戲 (下)\n
\n單元 75 [加碼達標系列 800%]：VueX / Vue-router 誰說只有前端做不出完整網站\n
\n單元 76 [加碼達標系列 1600%]：GSAP 活用時間軸動畫\n
\n單元 77 [加碼達標系列 2000%]：D3.js 視覺化資料的利器（入門）\n
\n單元 78 [加碼達標系列 2500%]：Three.js 製作 3D 特效網頁（入門）\n
\n單元 79 [課程總結] -動態網頁的發展與可能性\n
\n\n
從動畫與平面設計起家，持續做到整體品牌形象 CI 設計到 UI/UX APP 介面設計，目前專攻網頁動畫與互動，研究如何以網頁的技巧實踐 Motion Graphics 的精神，以設計的角度主宰網頁，讓網頁不只是能用、資訊呈現，更要有趣、好玩。
重點經歷
其他作品
網站範例參考
\nQ1：沒有程式或設計基礎適合上這門課嗎？\n
這堂課是為了讓設計相關或是沒有任何程式基礎的人，能上手真正「業界」網頁程式設計的課程！其實在業界，大型網站往往都不是用軟體，而是用程式碼一行一行刻出來的；既沒有圖形化介面，上手也很困難。
簡介中提到的 Codepen 平台是線上的編輯環境，可以即時預覽打出來的程式，不會覺得學起來很抽象，也可以省去上傳檔案才能預覽的麻煩！而且平台練習使用都是免費的，開啟網頁瀏覽器輸入網址就可以使用。
希望能幫助大家降低對於程式設計的恐懼，懂得如何熟練跟用它操作網頁視覺互動，能做的東西絕對比單純用 Dreamweaver 排版來的多而且專業，在業界也可以提升跟相關程式人員的溝通基礎唷！
\nQ2：課程使用的軟體要怎麼安裝跟使用呢？有分平台嗎？\n
簡介中提到的 Codepen 平台是線上的編輯環境，可以即時預覽打出來的程式，開啟網頁瀏覽器輸入網址就可以使用，無論是 Mac 或是 Windows 都可以使用喔！
\nQ3：有哪些常用的參考資料，或是學習資源呢？\n
視覺的部分可以參考 Pinterest / Dribble，以及這次的教學平台 Codepen；至於視覺介面只要搜尋關鍵字 UI / UX Web Design 就可以找到很多不錯的案例。
程式的部分可以參考 W3school，在基礎的 html/css 都有方便的索引參考，想做什麼就查什麼，雖然偏向功能解析，只要掌握網頁基本概念了之後都能夠很快速的引用。
\nQ4：上完這門課之後，有辦法獨立接案嗎？\n
獨立接案需要經驗累積，但如果把課程中提到的內容練熟，自己多多嘗試應用，就可以更熟悉網頁領域，增加與工程師合作的溝通效率。往後只要透過自行進修，就可以嘗試接案。
\nQ5：這一堂課與「動畫互動網頁程式入門」堂課差別在哪裡呢？\n
這堂課程將重點與火力集中在 JavaScript 與 Canvas 繪圖上，靈活製作更進階的動態網站，不管是遊戲特效 設計網頁都能應用。沒有基礎也別擔心，這堂課程也會結合「動畫互動網頁程式入門」的精華，推出全新範例讓沒有基礎的人快速上手。
"}],"metaDescription":"網頁特效入門課程，教你製作網頁特效、動畫，與遊戲製作原理。從零開始快速入門互動網頁、JS 與繪圖實戰範例，並學習 Vue.js 整合前端網頁，自己也能輕鬆製作網頁特效與動畫。","coverImage":{"_id":"5b85f1a8297df5001efb0150","url":"https://images.hahow.in/images/5b85f1a8297df5001efb0150"},"squareCoverImage":{"_id":"5fedb3392a0eb04a8b2729ae","url":"https://images.hahow.in/images/5fedb3392a0eb04a8b2729ae","height":801,"width":801},"video":{"_id":"59205ea90a6dcf0700ff3956","videoStatus":"available","videoId":"7RZPf4Ww","videoLengthInSeconds":177,"subtitles":[],"videos":[{"type":"video/mp4","quality":"sd","width":320,"height":180,"size":5731723,"link":"https://cdn.jwplayer.com/videos/7RZPf4Ww-ngs0juV7.mp4?exp=1789449400&sig=a63dcf170f36ba62056b9de85b489510","label":"180p"},{"type":"video/mp4","quality":"sd","width":480,"height":270,"size":8149302,"link":"https://cdn.jwplayer.com/videos/7RZPf4Ww-5jtAYQQX.mp4?exp=1789449400&sig=9864a518b056ee8e90465516b8e9e037","label":"270p"},{"type":"video/mp4","quality":"hd","width":1280,"height":720,"size":22119944,"link":"https://cdn.jwplayer.com/videos/7RZPf4Ww-4DPndCcZ.mp4?exp=1789449400&sig=24c2778e9e85dce4e58f5b91305d9014","label":"720p"},{"type":"video/mp4","quality":"hd","width":1920,"height":1080,"size":42537218,"link":"https://cdn.jwplayer.com/videos/7RZPf4Ww-Jwz4uGYf.mp4?exp=1789449400&sig=242e12e87f198427f27a70661ebe196c","label":"1080p"},{"type":"video/mp4","quality":"sd","width":640,"height":360,"size":9454687,"link":"https://cdn.jwplayer.com/videos/7RZPf4Ww-v2Nmo538.mp4?exp=1789449400&sig=aae403a7467389ce8514d5a13e9fd7c8","label":"360p"},{"type":"video/mp4","quality":"sd","width":960,"height":540,"size":15091995,"link":"https://cdn.jwplayer.com/videos/7RZPf4Ww-1Di1YdeL.mp4?exp=1789449400&sig=45376ffd907fa02ed4e67f1e4e1b9ccc","label":"540p"}],"previewImageUrls":{"source":"JW_PLAYER","images":{"DIMENSION_W300":"https://cdn.jwplayer.com/v2/media/7RZPf4Ww/poster.jpg?width=320","DIMENSION_W600":"https://cdn.jwplayer.com/v2/media/7RZPf4Ww/poster.jpg?width=640","DIMENSION_W1000":"https://cdn.jwplayer.com/v2/media/7RZPf4Ww/poster.jpg?width=1280"}},"backupVideos":[{"type":"video/mp4","quality":"hd","label":"hd","width":1280,"height":720,"size":27172135,"link":"https://d1jwm5cjiym5kj.cloudfront.net/transcoded/b7679625-f29e-4d0b-8928-7fb39ea54a6f/mp4/b7679625-f29e-4d0b-8928-7fb39ea54a6f_1280x720.mp4?Expires=1789375024&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kMWp3bTVjaml5bTVrai5jbG91ZGZyb250Lm5ldC90cmFuc2NvZGVkL2I3Njc5NjI1LWYyOWUtNGQwYi04OTI4LTdmYjM5ZWE1NGE2Zi8qIiwiQ29uZGl0aW9uIjp7IkRhdGVHcmVhdGVyVGhhbkVxdWFscyI6eyJBV1M6RXBvY2hUaW1lIjoxNzg5MzY0MjI0fSwiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE3ODkzNzUwMjR9fX1dfQ__&Signature=v7~5DvTmyPyQffnWLaX3UoAvGCHA-Nrvbk9e9xTAtwjz-epDgS29eZSPGFZr~W3hjGs7ea3ApqpjVrnj~BsGCY9JFKpTEMwxH2E13SAzXNdBd9dwniVardkWLQGYxTuW9b5-MSewLlYjMAD9itI9q8TTcTjK3GxF92lx9HlrdQHOcvoLi5zAZbCBAw6QWtf-cB6bWZAo17sH~v7wqAEUFY-aWMYh5DCqNpIDXJ3CfrrZljZCj4V3TvmT24gS2WY2QxL2FiVcFxWP32NZHaizdKhCykVIFxovE1RW3lA-TVgHQkjsjcm1POClTLRAoRwxeKI9PZJV6EO2Kygh0PqYnw__&Key-Pair-Id=APKAIZFQRQCEYGED75TA"},{"type":"video/mp4","quality":"hd","label":"hd","width":1920,"height":1080,"size":63373034,"link":"https://d1jwm5cjiym5kj.cloudfront.net/transcoded/b7679625-f29e-4d0b-8928-7fb39ea54a6f/mp4/b7679625-f29e-4d0b-8928-7fb39ea54a6f_1920x1080.mp4?Expires=1789375024&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kMWp3bTVjaml5bTVrai5jbG91ZGZyb250Lm5ldC90cmFuc2NvZGVkL2I3Njc5NjI1LWYyOWUtNGQwYi04OTI4LTdmYjM5ZWE1NGE2Zi8qIiwiQ29uZGl0aW9uIjp7IkRhdGVHcmVhdGVyVGhhbkVxdWFscyI6eyJBV1M6RXBvY2hUaW1lIjoxNzg5MzY0MjI0fSwiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE3ODkzNzUwMjR9fX1dfQ__&Signature=v7~5DvTmyPyQffnWLaX3UoAvGCHA-Nrvbk9e9xTAtwjz-epDgS29eZSPGFZr~W3hjGs7ea3ApqpjVrnj~BsGCY9JFKpTEMwxH2E13SAzXNdBd9dwniVardkWLQGYxTuW9b5-MSewLlYjMAD9itI9q8TTcTjK3GxF92lx9HlrdQHOcvoLi5zAZbCBAw6QWtf-cB6bWZAo17sH~v7wqAEUFY-aWMYh5DCqNpIDXJ3CfrrZljZCj4V3TvmT24gS2WY2QxL2FiVcFxWP32NZHaizdKhCykVIFxovE1RW3lA-TVgHQkjsjcm1POClTLRAoRwxeKI9PZJV6EO2Kygh0PqYnw__&Key-Pair-Id=APKAIZFQRQCEYGED75TA"},{"type":"video/mp4","quality":"sd","label":"sd","width":426,"height":240,"size":8006986,"link":"https://d1jwm5cjiym5kj.cloudfront.net/transcoded/b7679625-f29e-4d0b-8928-7fb39ea54a6f/mp4/b7679625-f29e-4d0b-8928-7fb39ea54a6f_426x240.mp4?Expires=1789375024&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kMWp3bTVjaml5bTVrai5jbG91ZGZyb250Lm5ldC90cmFuc2NvZGVkL2I3Njc5NjI1LWYyOWUtNGQwYi04OTI4LTdmYjM5ZWE1NGE2Zi8qIiwiQ29uZGl0aW9uIjp7IkRhdGVHcmVhdGVyVGhhbkVxdWFscyI6eyJBV1M6RXBvY2hUaW1lIjoxNzg5MzY0MjI0fSwiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE3ODkzNzUwMjR9fX1dfQ__&Signature=v7~5DvTmyPyQffnWLaX3UoAvGCHA-Nrvbk9e9xTAtwjz-epDgS29eZSPGFZr~W3hjGs7ea3ApqpjVrnj~BsGCY9JFKpTEMwxH2E13SAzXNdBd9dwniVardkWLQGYxTuW9b5-MSewLlYjMAD9itI9q8TTcTjK3GxF92lx9HlrdQHOcvoLi5zAZbCBAw6QWtf-cB6bWZAo17sH~v7wqAEUFY-aWMYh5DCqNpIDXJ3CfrrZljZCj4V3TvmT24gS2WY2QxL2FiVcFxWP32NZHaizdKhCykVIFxovE1RW3lA-TVgHQkjsjcm1POClTLRAoRwxeKI9PZJV6EO2Kygh0PqYnw__&Key-Pair-Id=APKAIZFQRQCEYGED75TA"},{"type":"video/mp4","quality":"sd","label":"sd","width":640,"height":360,"size":11241766,"link":"https://d1jwm5cjiym5kj.cloudfront.net/transcoded/b7679625-f29e-4d0b-8928-7fb39ea54a6f/mp4/b7679625-f29e-4d0b-8928-7fb39ea54a6f_640x360.mp4?Expires=1789375024&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kMWp3bTVjaml5bTVrai5jbG91ZGZyb250Lm5ldC90cmFuc2NvZGVkL2I3Njc5NjI1LWYyOWUtNGQwYi04OTI4LTdmYjM5ZWE1NGE2Zi8qIiwiQ29uZGl0aW9uIjp7IkRhdGVHcmVhdGVyVGhhbkVxdWFscyI6eyJBV1M6RXBvY2hUaW1lIjoxNzg5MzY0MjI0fSwiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE3ODkzNzUwMjR9fX1dfQ__&Signature=v7~5DvTmyPyQffnWLaX3UoAvGCHA-Nrvbk9e9xTAtwjz-epDgS29eZSPGFZr~W3hjGs7ea3ApqpjVrnj~BsGCY9JFKpTEMwxH2E13SAzXNdBd9dwniVardkWLQGYxTuW9b5-MSewLlYjMAD9itI9q8TTcTjK3GxF92lx9HlrdQHOcvoLi5zAZbCBAw6QWtf-cB6bWZAo17sH~v7wqAEUFY-aWMYh5DCqNpIDXJ3CfrrZljZCj4V3TvmT24gS2WY2QxL2FiVcFxWP32NZHaizdKhCykVIFxovE1RW3lA-TVgHQkjsjcm1POClTLRAoRwxeKI9PZJV6EO2Kygh0PqYnw__&Key-Pair-Id=APKAIZFQRQCEYGED75TA"},{"type":"video/mp4","quality":"sd","label":"sd","width":854,"height":480,"size":14429652,"link":"https://d1jwm5cjiym5kj.cloudfront.net/transcoded/b7679625-f29e-4d0b-8928-7fb39ea54a6f/mp4/b7679625-f29e-4d0b-8928-7fb39ea54a6f_854x480.mp4?Expires=1789375024&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kMWp3bTVjaml5bTVrai5jbG91ZGZyb250Lm5ldC90cmFuc2NvZGVkL2I3Njc5NjI1LWYyOWUtNGQwYi04OTI4LTdmYjM5ZWE1NGE2Zi8qIiwiQ29uZGl0aW9uIjp7IkRhdGVHcmVhdGVyVGhhbkVxdWFscyI6eyJBV1M6RXBvY2hUaW1lIjoxNzg5MzY0MjI0fSwiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE3ODkzNzUwMjR9fX1dfQ__&Signature=v7~5DvTmyPyQffnWLaX3UoAvGCHA-Nrvbk9e9xTAtwjz-epDgS29eZSPGFZr~W3hjGs7ea3ApqpjVrnj~BsGCY9JFKpTEMwxH2E13SAzXNdBd9dwniVardkWLQGYxTuW9b5-MSewLlYjMAD9itI9q8TTcTjK3GxF92lx9HlrdQHOcvoLi5zAZbCBAw6QWtf-cB6bWZAo17sH~v7wqAEUFY-aWMYh5DCqNpIDXJ3CfrrZljZCj4V3TvmT24gS2WY2QxL2FiVcFxWP32NZHaizdKhCykVIFxovE1RW3lA-TVgHQkjsjcm1POClTLRAoRwxeKI9PZJV6EO2Kygh0PqYnw__&Key-Pair-Id=APKAIZFQRQCEYGED75TA"}]},"totalVideoLengthInSeconds":185106,"requiredTools":"一台電腦、強韌不會斷線的網路、網頁瀏覽器（Chrome 為佳）。","recommendedBackground":"不需先備知識；若有設計、網頁程式基礎者為佳，能透過案例快速掌握整合的能力。","willLearn":"- 將 HTML/CSS 融會貫通，輕鬆入門，順暢進階\n- 從零紮實入門 JavaScript 程式與動畫基礎到進階互動\n- 入門 Vue.js 掌控資料與顯示的前端框架 - 整合應用\n- 整合應用網頁技術與數學原理，完成有設計感的互動性網站。","targetGroup":"1. 學生：不論是無網頁基礎，或是正在學習網頁技術，能快速掌握整合應用能力。\n2. 設計師：想要動手做出想像中的網頁，並想嘗試在網頁上更彈性的表現與繪圖。\n3. 其他：網頁可以作為一種快速，且能跨平台的簡報，例如：demo 或是黑客松成果展現。","modules":["5c91835ced65c200740ef386","5c91af36728ddf00208ba01f","5c91aff4728ddf00208ba058","5c91b0c6728ddf00208ba08b","5c91b0f1728ddf00208ba096","5c91b20e728ddf00208ba0e2","5c91b26b728ddf00208ba102","5c91b2e2728ddf00208ba123"],"chargePlan":{"_id":"6a9905caa7ad502ed8268e05","type":"CP_2023_50_50_90_10","course":"586fae97a8aae907000ce721","paymentPlanTypes":["PP_ORGANIC","PP_REFERRAL"],"contracts":[{"_id":"655ad460d24480de53648e94","title":"拆分_91_55（2023 版本）","type":"PRIMARY","status":"ACTIVE","chargePlanType":"CP_2023_50_50_90_10","paymentPlanTypes":["PP_ORGANIC","PP_REFERRAL"],"hidden":false,"createdAt":"2022-02-07T00:00:00.000Z","url":"https://storage.googleapis.com/hh-contract-prod/contract_20220207000000000.pdf"}],"status":"ACTIVE","createdAt":"2026-09-03T05:29:46.123Z"},"group":{"_id":"5c0a05491f7e290020b4c294","title":"程式","uniquename":"programming","subGroup":{"_id":"5c0a07f61f7e290020b4c2dc","title":"網頁前端","uniquename":"web-frontend"}},"productTags":[{"_id":"63a0020eca16a60071552554","tagType":"BASIC","name":"Javascript","description":"JavaScript，支援物件導向編程，指令式程式設計，以及函數語言程式設計，基於原型、函式先行的語言，是一門多範式的語言","createdAt":"2018-12-07T05:56:29.000Z","updatedAt":"2018-12-07T05:56:29.000Z"},{"_id":"66691a7f3d9dff5028ee4729","name":"前後端程式精選課","tagType":"BASIC","createdAt":"2024-06-12T03:48:15.655Z","updatedAt":"2024-06-12T03:48:15.655Z"}],"totalCourseLengthInSeconds":185106,"includedKnowledgeCollections":[{"_id":"6570425129693534bf723ae1","title":"從 0 到進階打造互動式網頁｜程式 + 特效","coverImage":{"_id":"6570417e06e393331433efde","url":"https://images.hahow.in/images/6570417e06e393331433efde","height":625,"width":1000},"previewDescription":"課程合購優惠 85 折"},{"_id":"6570434bb95770d02464baf2","title":"用程式打造從網頁到實體的互動創作｜網頁 + 特效 + 藝術創作","coverImage":{"_id":"6570428429693534bf724896","url":"https://images.hahow.in/images/6570428429693534bf724896","height":625,"width":1000},"previewDescription":"課程合購優惠 83 折"},{"_id":"6a58444dbc2f8810c132f930","title":"從網頁特效入門，到新媒體藝術的互動","coverImage":{"_id":"6a5843d6a07ac7551d750ad2","url":"https://images.hahow.in/images/6a5843d6a07ac7551d750ad2","height":625,"width":1000},"previewDescription":"想讓創作不只停在螢幕裡？下一步在這裡！"}],"globalAverageRating":4.81,"hasSubscribedSaleNotification":false,"purchasePlan":{"id":"5e7ad7ba9c4b140023a897e2","type":"COURSE_PUBLISHED","category":"COURSE","price":2500,"priceInMoneyPoint":2500,"isLimitedTimeOffer":false},"currencyCode":"TWD","basePricingInfo":{"price":2500,"preOrderedPrice":1600,"currencyCode":"TWD"}}![\"九宮格設計作品集，涵蓋交大創業日](\"https://images.api.hahow.in/images/59132e1c2fa2a607008bca02\")
![\"「動畫互動網頁特效入門」課程](\"https://images.api.hahow.in/images/5a4f4720fa1e3f001e8d7ea8\")
![\"「css的內外距」教學畫面，左側示範](\"https://images.api.hahow.in/images/5b1822c3567cc1001e403728\")
![\"吳哲宇是墨雨設計](\"https://images.api.hahow.in/images/5b194bd3567cc1001e406979\")
![\"珊瑚紅背景上呈現「We](\"https://images.api.hahow.in/images/5b382708b804e6001efe7a71\")
![\"黑色背景上的抽象分枝樹狀圖形，白色主幹向上分成多個細枝，枝條分布紅色、橙色與黃色圓點，呈現繁茂的生成藝術視覺。\"](\"https://images.api.hahow.in/images/5b3828b3b804e6001efe7b27\")
![\"摩斯密碼翻譯器示範：輸入框填入「ABC」，下方顯示對應的摩斯密碼「.-](\"https://images.api.hahow.in/images/5a217001a6d4a5001ec3148a?width=600\")
![\"Project](\"https://images.api.hahow.in/images/5b382981b804e6001efe7b34\")
![\"深色方格背景上，一條白色像素線條從左上方蜿蜒向下延伸，右側有一個紅色方形標記，呈現幾何遊戲場景般的裝飾構圖。\"](\"https://images.api.hahow.in/images/5b2fcbcb2c4c44004391736a\")
![\"由九個彩色方格組成的幾何抽象拼貼，運用紅、黃、藍、白色，以及圓形、三角形、放射線與點狀圖案。\"](\"https://images.api.hahow.in/images/5aac7a151e4ee6001e961c03?width=600\")
![\"黑色背景上的圓形雷達式介面，中央有多層同心圓、刻度環、弧形白色標記與斜向指針，中央標示數字「1526023190487」，左上角顯示座標「(26,45)」。\"](\"https://images.api.hahow.in/images/5af5442eb44939001e466d50\")
![\"黑色背景上的白色線條與圓點構成抽象幾何裝飾，上方排列垂直線段，下方呈放射狀延伸，畫面不含文字資訊。\"](\"https://images.api.hahow.in/images/5b2fcb352c4c44004391735c\")
![\"Vue.js](\"https://images.api.hahow.in/images/5b3829c5b804e6001efe7b37\")
![\"黑色背景的像素風太空射擊遊戲畫面，上方排列多排外星人，中間可見黃色子彈與白色射擊特效，下方有玩家太空船；左上角顯示](\"https://images.api.hahow.in/images/5b382a16b804e6001efe7b3d\")
![\"黑色背景的復古迷宮遊戲畫面，藍色發光通道中散布粉紅色豆狀點，黃色圓形角色與青色、粉紅色、橘色幽靈位於中央；左上角顯示](\"https://images.api.hahow.in/images/5b382a37b804e6001efe7b3f\")
![\"Hahow「動畫互動網頁程式／特效入門」作品精選頁，顯示共170項作品，包含「在網頁寫一座摩麗城市」、「Memory](\"https://images.api.hahow.in/images/5e7849cc9c4b140023a76881\")
![\"「場景探索」以](\"https://images.api.hahow.in/images/591335d02fa2a607008bca68\")
![\"DESIGNAV](\"https://images.api.hahow.in/images/591336722fa2a607008bca79\")
![\"UI/UX](\"https://images.api.hahow.in/images/572f3cb20bf7f70900ccfaf7\")
![\"「旅程，畢業故事總匯瘋」主視覺提案，以木紋背景、翻開的插畫書與畢業生、蔬菜、乳酪和番茄圖像呈現，搭配標語「用分享，敬我們22年的生命故事」及色彩配置。\"](\"https://images.api.hahow.in/images/572f3cd30bf7f70900ccfaf9\")
![\"RÉMY](\"https://images.api.hahow.in/images/572f3d080bf7f70900ccfafb\")
![\"臺北捷運站內行人穿梭的黑白影像，搭配巨大「METRO」字樣，呈現](\"https://images.api.hahow.in/images/58c81a3ada45810700e520f3\")
![\"深色網格背景中，彩色圓點與放射線向中央匯聚，橘色、藍色和綠色圓形交疊，中央以白色手寫字呈現「Complex](\"https://images.api.hahow.in/images/574e51b3206cd60900c51f84\")
![\"深色圓形中央呈現金色抽象音樂標誌，下方寫有「DYVERSE](\"https://images.api.hahow.in/images/579b0454d0c303070041b1c7\")
![\"AutoCAD](\"https://images.api.hahow.in/images/57ba8704c7425c0700c69e9d\")
![\"Monoame](\"https://images.api.hahow.in/images/593d4dc5d0472a0700f253e6\")
![\"黑色背景中的發光球體，周圍環繞向外延伸的粒子、線條與抽象光點，形成科技感的動態裝飾。\"](\"https://images.api.hahow.in/images/57986464d0c303070041a07e\")