{"successCriteria":{"numSoldTickets":50},"campaign":{"types":[]},"contentRating":{"brief":"LEVEL_0","content":"LEVEL_0"},"videoBackupStatus":"NOT_MIGRATED","_id":"56189df9df7b3d0b005c6639","assignment":"56189df9df7b3d0b005c663a","owner":{"privacies":{"isShowTaughtCourses":true,"isShowBoughtCourses":false,"isShowBoughtArticles":true,"isShowBoughtKnowledgeCollections":true,"isShowIdeas":true,"isShowBookmarkedCourses":false,"isShowBookmarkedArticles":true,"isShowBookmarkedIdeas":true,"isShowCreations":true,"isShowCertificates":true,"isShowBoughtLiveEvents":true},"links":{"website":"https://portaly.cc/cheyuwu","facebook":"https://www.facebook.com/cheyuwu345/","youtube":"https://www.youtube.com/channel/UCHX_XMhPrtvOmgGOnA2eTmA?view_as=subscriber"},"states":{"club2020":{"isShared":false,"isSharedAfterBought":false},"acknowledgedContractRenewal2019":"NO_ACK","teacherTypeLock":true,"haveNotifiedStudyPlanFeature":true},"_id":"56189df7df7b3d0b005c6638","profileImageUrl":"https://images.api.hahow.in/images/59940a4d38c46c0700654afc","name":"吳哲宇","metaDescription":"墨雨設計創辦人，紐約大學進修整合數位媒體碩士。互動設計師、藝術家、講師、全端工程師，引領超過 20,000 位學生進入互動網頁與生成藝術開發的大坑。","username":"majer","skills":"平面、品牌形象設計，動態網頁與前後端程式開發。","description":"
哲宇老師的綜合連結入口
哲宇老師的免費學習與交流資源
  • Creative Coding TW - 互動程式創作台灣站
  • 老闆 來點寇汀吧。 Boss,CODING please. 工程 X 藝術創作品牌
  • 老闆來點寇汀吧 Boss, Coding Please IG 創作集
  • 每週四直播 Coding
    • 探索藝術與工程的邊界 創造極致的互動體驗

    哲宇擔任紐約大學 Creative Coding Graduate Assistant - 在系上任職研究助理與助教快兩年，喜歡新奇古怪的事物，想脫離網頁的限制，更自由的結合各種媒體與技術創作互動設計。從動畫與平面設計起家，持續做到整體品牌形象 CI 設計到 UI/UX APP 介面設計，目前專攻網頁動畫與互動，研究如何以網頁的技巧實踐  MotionGraphics 的精神，以設計的角度主宰網頁，讓網頁不只是能用、資訊呈現，更要有趣、好玩。

    墨雨設計成立於 2015 年，跨足各領域平面 / CI / 網站設計，以多元的視野與專業，為您創造不同凡響的作品。

    互動設計在很多廣告、品牌推廣跟更廣泛的設計產業，都有商業與藝術上的應用，雖然在台灣可能還沒發展興盛，但近年來台灣的設計風氣逐漸蓬勃，也開始有越來越多的展覽、活動或公司嘗試用不同的互動，讓廣告不再只是廣告，而是跟觀眾互動的遊戲或設計來呈現品牌或提升參與度，結合軟體跟硬體，在功能之外，尋找人對世界最原始的感動跟好奇心。

    原來程式可以做到那麼多想像不到的事情

    哲宇善於用有趣的範例，從程式、數學、或設計，整合式的帶你走入絢麗的 Coding 世界，無論是網頁設計，還是用程式藝術，都能從解決真實的問題或創作來看見學習的目的。

    老師的免費學習資源

    ","coverImageUrl":"https://images.hahow.in/images/63b7b74ffbb833355a3a4bb4","publishedProductStatistics":{"courseCount":4,"articleCount":15,"studentCount":24676}},"estimatedCourseVideoLengthInMins":253,"preOrderedPrice":1000,"price":2000,"reviewing":false,"status":"PUBLISHED","numSoldTickets":13018,"uniquename":"monoame-webdesign1","estimatedCourseStartTime":"2016-09-01T00:00:00.000Z","incubateTime":"2016-06-03T04:50:49.000Z","proposalDueTime":"2016-07-03T00:00:00.000Z","proposalStartTime":"2016-06-03T00:00:00.000Z","publishTime":"2016-09-01T15:03:04.000Z","revisionReleaseTime":"2025-05-20T06:10:45.659Z","draftRevisionUpdateTime":"2025-05-20T06:09:27.078Z","isReject":false,"averageRating":4.96,"numRating":565,"tags":["CLASSIC"],"skipIncubating":false,"createdAt":"2015-10-10T05:11:21.000Z","bookmarkCount":12020,"viewCount":2267959,"isTop10Percent":true,"courseType":"REGULAR","priceInMoneyPoint":2000,"preOrderedPriceInMoneyPoint":1000,"i18n":{"title":"courses.56189df9df7b3d0b005c6639.release.title","descriptionContentBlocks":"courses.56189df9df7b3d0b005c6639.release.descriptionContentBlocks","metaDescription":"courses.56189df9df7b3d0b005c6639.release.metaDescription","requiredTools":"courses.56189df9df7b3d0b005c6639.release.requiredTools","recommendedBackground":"courses.56189df9df7b3d0b005c6639.release.recommendedBackground","willLearn":"courses.56189df9df7b3d0b005c6639.release.willLearn","targetGroup":"courses.56189df9df7b3d0b005c6639.release.targetGroup"},"title":"動畫互動網頁程式入門 (HTML/CSS/JS)","descriptionContentBlocks":[{"type":"HTML","content":"

    你曾經想學過網頁設計嗎?

    曾經看過線上課程，大部分的程式設計教學往往只講解功能沒教你如何讓網頁好看，好用學完做出來之後，總離真正上線的網頁有段距離而覺得沮喪

    寫一個網頁，往往不只是一個人的夢魘，設計師拉好了頁面交給工程師，卻怎麼樣也達不到想要的效果，而程式設計師也溝通的煩悶，改到不耐煩的說

    「要不然你來做阿」

    設計師能做的話，他早就自己做了，但上網一查語法 html/js/css 五花撩亂，我們早已脫離了無名小站修改網誌語法的美好時代，究竟該怎麼無痛入手網頁程式開發呢?

    \"「動畫互動網頁程式入門，突破95%!!!」以手機、瀏覽器視窗與桌機螢幕呈現不同版型，包含

    「目前突破8000%! 超過4000人一同學習」課程更新

    >1/26 新增課程共筆   共筆連結

           包含學習目錄與推薦時間 / 課程勘誤補充 / 推薦書籍（持續新增）

           可以一起編輯

    >1/17 全部單元上線完畢

    >11/24 更新課程預計上線時間

    >11/7 新增即時作品集合系統 已經超過一百件同學繳交作品與練習

    \"《[AWI]

    ( 至11/15之前已上線85單元共1230分鐘 )

    >9/04 新增FB討論社群 動畫互動網頁程式入門 課程討論社團

    >8/23 詳細版課程綱要：課程綱要連結

    >7/4 課程募資期間圓滿結束！！

    \"「Animated

    一目了然的教學環境

    這堂課會告訴你從網站的草稿跟結構開始，要怎麼規劃才能有組織，不會掛再螢幕前不知道要做什麼，會從設計師的角度看，去操作網頁，一切你會在以拉上面看到的美好事物，我們會網頁的程式語言呈現。

    不同於一般的網頁設計入門，以最好用，最簡便的平台-- Codepen 代替教學，學習中再也不用上下傳檔案預覽，也能即時看到更新的效果，以替代性的jade/sass樣版語言，能簡化大量HTML/CSS的繁瑣，讓程式易讀好懂，當然後續也會在額外教大家怎麼正式的架設自己的網站。這一切讓初期學習不會因為一點點打錯，網頁出不來而搥桌，跟著這堂課從零到一，就能入門網頁開發了!

    最後常見的問題是，結束了一個課程的同時，很多人遇到不會的問題就卡死，怎麼做也只做得出範例的幾個網頁，因此，特別規劃了「搜尋與問題解決技巧」，讓你以後不管遇到什麼都能靠自己的力量去解決!

    不論你是設計師、學生、程式設計師，一般想碰網頁設計的人，這堂課會準備好一切你需要的素材，讓你感受最少的阻力入門，即使你不懂設計，也能跟著做出來，且知道以後需要什麼樣的素材製作網頁

    「只有自學者才懂自學的痛」

    三年前接觸網頁程式設計，沒有經驗的我，接了一個國中網頁設計的案子，上個經歷還停留在會動的會跳的五顏六色Flash美好年代，只好搜尋線上各種網頁設計相關教學，卻都是一坨坨程式碼教你如何打 H1到H4標題（還會由大到小好棒棒），CSS可愛的背景跟文字家族。

    打開記事本想要刻簡單的一個導覽列跟放張圖片，卻怎麼樣都調不到自己想要的位置，改了一整天，好不容易對齊了，螢幕大小一改變半個頁面就不見。

    我知道，這些慘痛經歷，我都經歷過，一直都是用繪圖軟體過來，設計的頁面平平都是軟體，為什麼網站方面的教學通病都停留在語法跟瑣碎的功能，總是沒人教怎麼把腦海中的頁面變成現實，讓設計的版面照著想像的運作。

    課程目標

    這堂課會告訴你從網站的草稿跟結構開始，要怎麼規劃才能有組織，不會掛在螢幕前不知道要做什麼

    這次的課程，著重在製作網頁的時候，究竟要怎麼把網站做『好』而不是單純的寫出來，卻不能看不好用不夠理想。

    從illustrator的思維來看：

    1. 如何讓東西對齊彼此、至中排列到正確的位置
    2. 如何調整每個東西的顏色、粗細、透明度與看起來的樣子
    3. 如何讓文字脫離新細明體魔掌、行距、字距、讓文章看起來舒服
    4. 如何做到裁切版面、遮罩、繪圖、框線，在網頁上實踐各種圖像設計的常用技巧
    5. 如何讓東西有趣的跟滑鼠互動，使網頁變得好玩

    在素材的方面，會準備好可能用到的圖，以及各種幫助學習的工具，帶著完整走一次網站開發的流程，所以課程結束後，不會徬徨無助只能照著做範例，而是能一步一步自己找資源與參考資料，將夢想的網站與動畫實現。

    你也許會想說，我套模板就好啦，為什麼要學網頁設計呢?

    套模板是一種選擇，不過學完了這堂課，你也將會有自己的能力改造模板、看懂他們，

    更能有系統的規劃、或與他人合作，了解以技術觀點來看網頁能做到什麼

    讓你能夠快速上手一些網站視覺處理的撇步，享受做出屬於自己獨一無二網頁的成就感。

    課程中你將能做出

    1. 從頭開始規畫一個網頁的結構、內容與呈現方式

    2. 章節三、基礎html/css 簡單的自我介紹頁面，練習網頁元素操縱、對位與外觀

    \"動畫網頁課程範例「名片」展示吳哲宇（Che-Yu

    3. 章節四、系統化管理網頁設計- sass變數化易於更改配色/樣式的網頁模板

    \"品牌網頁視覺引導的樣式指南，示範

    4.學習網站配色與視覺的基礎概念，實作icon匯出

    \"品牌視覺設計示意，展示主色

    4.製作動態互動天氣盒子

    5.使用Bootstrap+Skrollr製作捲動式專題網頁

    6. 練習如何從概念、發想到利用網格系統分析與繪製草稿

    \"室內設計工作室網站版面，兩名女性在桌前討論設計，右側以粗體標示「We

    \"八格黑白手繪設計草圖，展示以網格編排的海報與插畫構想，包含「EARTH:

    5.學習分析並刻一個模仿Hahow募資頁面板型的網頁

    \"「前端框架Vue.js-綜合案例-使用hahow課程資料」的卡片介面規格示意：寬260px、上半部160px、下半部184px，圓角5px、內距15px，並標示標題、按鈕與進度條尺寸，以及\"課程卡片「動畫互動網頁程式入門」展示黃色網頁設計插畫封面，預購價

    5. 走過網頁框架、配色、佈局到平面稿的流程

    \"Yellow

    6.使用Vue.js練習資料性的網頁與製作一台互動鋼琴

    \"Vue.js

    7.練習各種滑鼠互動與基礎動畫

    課程單元總覽

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

    同學們的作品集

    作品集連結：http://2017.awiclass.monoame.com/proj/1?utm=class_1_description

    \"Hahow「作品精選」頁面列出共170項作品，左側有

    網站範例參考:

    臺北聲音地景計畫-「捷運站體環境音樂」徵選活動

    \"黑白捷運車站通道中行人往來，畫面以巨大「METRO」字樣呈現「The

    花旗聯合勸募2016

    \"第22屆花旗聯合勸募活動正式開跑，邀請大家一起加入愛的行列；主視覺以坐輪椅的角色、動物與房屋插畫呈現「一起愛，愛不一樣」及

    複雜生活節 

    \"深色網格與放射線交織成抽象背景，彩色圓點散布四周，中央以紅、藍、綠色圓形搭配白色書法字樣，並標示英文「Complex

    Dyverse Studio 音樂工作室(舊)

    \"深棕色圓形背景中央呈現金色抽象字母標誌，下方標示「DYVERSE

    翔虹AutoCAD技術中心 

    \"AutoCAD

    Monoame Design 墨雨設計 

    \"青綠色天空背景飄落細雨，底部由白色與半透明雲朵構成柔和層次；左側標示「Monoame

    新詩視覺化

    \"黑色背景中央是一面由密集放射線構成的圓形時鐘，白色與紅色指針指向不同方向；下方寫著「焦慮是時鐘裡有六十支秒針。」\"

    靠北交大2.0

    \"夜晚，一名戴眼鏡的人在電腦前趕工，對話框寫著「不要再打光頭害小宅我變成光頭了RRR」；旁邊標示「KOU

    Abstract(將音樂轉成視覺形式)

    \"黑色背景中的抽象粒子視覺，一顆帶有細密同心紋理的發光球體位於中央，周圍環繞向外延伸的白色光線、微粒與環狀軌跡，呈現科技感十足的動態裝飾。\"

    常見問題Q&A (6/24更新)

    1. 沒有程式或設計基礎適合上這門課嗎?
    2. A: 這堂課是為了讓設計相關或是沒有任何程式基礎的人，能上手真正“業界”網頁程式設計的課程!，其實在業界的大型網站往往都不是用軟體，而是用程式碼一行一行刻出來的，沒有圖形化介面也不容易親近，簡介中提到的codepen平台是線上的編輯環境，可以即時預覽打出來的程式，不會覺得學起來很抽象，也可以省去上傳檔案才能預覽的麻煩:)，而且平台練習使用都是免費的！開啟網頁瀏覽器輸入網址就可以使用
    3. 希望能幫助大家不害怕程式設計，懂得如何熟練跟用它操作網頁視覺互動，能做的東西絕對比單純用dreamweaver排版來的多而且專業，在業界也可以提升跟相關程式人員的溝通基礎唷!
    4. Adobe Illstrator / 網頁開發 的課程比例各占多少呢? 不會以拉適合學嗎?
    5. A: 可以的，主要的內容會放在網頁編輯開發上，以拉是輔助工具而已出場機會不多，課程中的範例都會準備好素材給各位練習唷! 在後半課程我會提到多ㄧ些圖像設計跟介面的概念，與ㄧ些比較有趣的應用手法和案例，AI不是這次課程的主體，僅會拿來做版面的規劃跟視覺，不過還是會提到基礎的使用喔! 如果沒有以拉，也可以用任何繪圖軟體、甚至紙筆做規劃都可以! 重點是如何有系統的規劃結構跟版面。
    6. RWD(響應式網頁) 會講到嗎?
    7. A: 在課堂中會教學RWD是什麼，如何基礎的判斷裝置寬度改變對應的CSS，當了解基礎部分後，會進一步引入框架等RWD常用模組，希望讓大家不只會使用這些套件，更能了解背後運作的原理，才能夠能改能修，對於網頁有更高的操控度不會像拼裝車搖搖晃晃。
    8. 課程使用的軟體要怎麼安裝跟使用呢? 有分平台嗎?
    9. A: 簡介中提到的codepen平台是線上的編輯環境，網址為http://www.codepen.io，可以即時預覽打出來的程式，開啟網頁瀏覽器輸入網址就可以使用!不論是MAC或是Windows都可以使用
    10. 已經是html/css工程師了，適合上這門課嗎?
    11. A: 這門課大約50%入門，50%是專攻介面設計跟動畫呈現，希望能夠快速抓住網頁美感跟互動規劃的工程師，十分適合來上這門課!
    12. 常用的參考資料/學習資源有什麼呢?
    13. 視覺部分，像是Pinterest / Dribble 還有這次的教學平台Codepen，關於視覺介面只要搜尋關鍵字 UI / UX Web Design 就可以找到很多不錯的案例!
    14. 程式部分 w3school在基礎的html/css都有方便的索引參考，想做什麼就查什麼，雖然偏向功能解析，只要掌握網頁基本概念了之後都能夠很快速的引用。
    15. 可以分享相關接案經歷跟流程細節嗎?
    16. A: 會特別有一個單元是針對自己的接案經驗做分享，如果大家有特別感興趣的部分都可以反應在平台上再安排內容:)
    17. 圖文內容的排版跟結構規劃會提到嗎?
    18. A: 會分析3-4個基本的網站案例，以及常見的網頁呈現形式，UI/UX部分有很多瑣碎的細節和視覺要安排，都會逐步分析與帶大家實際模仿大型頁面的思維做練習，累積能量創造自己的作品!
    19. 上完這門課之後，有辦法獨立接案嗎?
    20. A: 獨立接案需要經驗累積，不過把課程上提的東西練熟跟自己嘗試應用，能讓你熟悉網頁領域不害怕，容易與工程師合作，自行進修便能嘗試接案。
    21. 能透過這門課做出購物車真正能結帳、或是社團的留言功能嗎?A:這堂課主要是針對前端跟介面，所以後端並沒有提到，但是能對網站有很完整的了解，也能自行上手其他技術，後端部分又是另一門學問，不是那麼快可以學到完成深入的東西了！

    想學更進階的JS跟繪圖嗎？ 第二堂課-動態互動網頁特效入門

    這堂課將帶領你，從零開始打造一個「打動人心」的互動特效網頁；賦予你堅實的網頁開發技術、靈活組合各式技巧的應變能力，透過從零開始的JS程式教學與Canvas繪圖概念，結合數學、物理與物件導向程式開發，幫助你實踐心中的想法。

    \"太空船朝向小行星飛行，圖中以θ標示相對角度，並說明極座標轉換公式：X

    \n課程內容分為四階段，總共 2000 分鐘以上\n

    熱騰騰上線中課程連結

    個人經歷

    墨雨設計創辦人 吳哲宇

    從動畫與平面設計起家，持續做到整體品牌形象CI設計到UI/UX APP介面設計，目前專攻網頁動畫與互動，研究如何以網頁的技巧實踐 MotionGraphics的精神，以設計的角度主宰網頁，讓網頁不只是能用、資訊呈現，更要有趣、好玩。

    其他作品

    "}],"metaDescription":"互動網頁程式設計課程，教你用 illustrator 的思維來學習網頁前端程式設計，從網站的結構開始設計，掌握 JS、HTML、CSS 等程式語法，帶你製作出實用且美觀的互動式網頁。","coverImage":{"_id":"5b8726df297df5001efb75c0","url":"https://images.hahow.in/images/5b8726df297df5001efb75c0"},"squareCoverImage":{"_id":"5fbe81be20899061cdf401cd","url":"https://images.hahow.in/images/5fbe81be20899061cdf401cd","height":500,"width":500},"video":{"_id":"574ef155206cd60900c525d7","videoStatus":"available","videoId":"NZKM3zvJ","videoLengthInSeconds":154,"subtitles":[],"videos":[{"type":"video/mp4","quality":"sd","width":320,"height":180,"size":4167247,"link":"https://cdn.jwplayer.com/videos/NZKM3zvJ-ngs0juV7.mp4?exp=1789449091&sig=ef8659f25c7f4e336c75b43ee45260c0","label":"180p"},{"type":"video/mp4","quality":"sd","width":480,"height":270,"size":5659125,"link":"https://cdn.jwplayer.com/videos/NZKM3zvJ-5jtAYQQX.mp4?exp=1789449091&sig=df1c8634d9bacf40149289969fefefa5","label":"270p"},{"type":"video/mp4","quality":"hd","width":1280,"height":720,"size":14349821,"link":"https://cdn.jwplayer.com/videos/NZKM3zvJ-4DPndCcZ.mp4?exp=1789449091&sig=54ca053de31d94723f69af5c35deb245","label":"720p"},{"type":"video/mp4","quality":"hd","width":1920,"height":1080,"size":26256563,"link":"https://cdn.jwplayer.com/videos/NZKM3zvJ-Jwz4uGYf.mp4?exp=1789449091&sig=aa7590c2ffca3b3c215aec13727faf10","label":"1080p"},{"type":"video/mp4","quality":"sd","width":640,"height":360,"size":6700186,"link":"https://cdn.jwplayer.com/videos/NZKM3zvJ-v2Nmo538.mp4?exp=1789449091&sig=6911a7e78bdd747612954153041bbb1b","label":"360p"},{"type":"video/mp4","quality":"sd","width":960,"height":540,"size":10265144,"link":"https://cdn.jwplayer.com/videos/NZKM3zvJ-1Di1YdeL.mp4?exp=1789449091&sig=7ed7d4d66717fe946e9ff096f48b1f50","label":"540p"}],"previewImageUrls":{"source":"JW_PLAYER","images":{"DIMENSION_W300":"https://cdn.jwplayer.com/v2/media/NZKM3zvJ/poster.jpg?width=320","DIMENSION_W600":"https://cdn.jwplayer.com/v2/media/NZKM3zvJ/poster.jpg?width=640","DIMENSION_W1000":"https://cdn.jwplayer.com/v2/media/NZKM3zvJ/poster.jpg?width=1280"}},"backupVideos":[{"type":"video/mp4","quality":"hd","label":"hd","width":1280,"height":720,"size":19499687,"link":"https://d1jwm5cjiym5kj.cloudfront.net/transcoded/0755caf2-e681-4bd1-b903-7bb894a32f4e/mp4/0755caf2-e681-4bd1-b903-7bb894a32f4e_1280x720.mp4?Expires=1789374707&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kMWp3bTVjaml5bTVrai5jbG91ZGZyb250Lm5ldC90cmFuc2NvZGVkLzA3NTVjYWYyLWU2ODEtNGJkMS1iOTAzLTdiYjg5NGEzMmY0ZS8qIiwiQ29uZGl0aW9uIjp7IkRhdGVHcmVhdGVyVGhhbkVxdWFscyI6eyJBV1M6RXBvY2hUaW1lIjoxNzg5MzYzOTA3fSwiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE3ODkzNzQ3MDd9fX1dfQ__&Signature=QwUZAcw7R7~cSpLEsfJBXJSYHAKU8PjxAqrFTBj1AveRH3W7CDmvBrKc93LebHU~1mNB2epg7PkCS-xgmUeAvwMDcrC4xqU2VvyO1urrDZY~3tMaZbq3~y6zQQBKUSs4Srdmod1B46Jras0WP~JmMeTDjP3E1m4NSbb1wHsCFTqb2UH0ddqc~KmM4R3xav09dAtz5jLKbOLfr799MJCIeblMdHoRH6ioMkybe3BuM7iCeV-giUV64kvxGymnajIGysG1ej3RBMEtBxa-TOn1tR8afljlR8K1~4XdQfC6TQAuqovBK8ip2n~FoAIUfSusi1XkvA6gWfijmPvmo86hAA__&Key-Pair-Id=APKAIZFQRQCEYGED75TA"},{"type":"video/mp4","quality":"hd","label":"hd","width":1920,"height":1080,"size":39888269,"link":"https://d1jwm5cjiym5kj.cloudfront.net/transcoded/0755caf2-e681-4bd1-b903-7bb894a32f4e/mp4/0755caf2-e681-4bd1-b903-7bb894a32f4e_1920x1080.mp4?Expires=1789374707&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kMWp3bTVjaml5bTVrai5jbG91ZGZyb250Lm5ldC90cmFuc2NvZGVkLzA3NTVjYWYyLWU2ODEtNGJkMS1iOTAzLTdiYjg5NGEzMmY0ZS8qIiwiQ29uZGl0aW9uIjp7IkRhdGVHcmVhdGVyVGhhbkVxdWFscyI6eyJBV1M6RXBvY2hUaW1lIjoxNzg5MzYzOTA3fSwiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE3ODkzNzQ3MDd9fX1dfQ__&Signature=QwUZAcw7R7~cSpLEsfJBXJSYHAKU8PjxAqrFTBj1AveRH3W7CDmvBrKc93LebHU~1mNB2epg7PkCS-xgmUeAvwMDcrC4xqU2VvyO1urrDZY~3tMaZbq3~y6zQQBKUSs4Srdmod1B46Jras0WP~JmMeTDjP3E1m4NSbb1wHsCFTqb2UH0ddqc~KmM4R3xav09dAtz5jLKbOLfr799MJCIeblMdHoRH6ioMkybe3BuM7iCeV-giUV64kvxGymnajIGysG1ej3RBMEtBxa-TOn1tR8afljlR8K1~4XdQfC6TQAuqovBK8ip2n~FoAIUfSusi1XkvA6gWfijmPvmo86hAA__&Key-Pair-Id=APKAIZFQRQCEYGED75TA"},{"type":"video/mp4","quality":"sd","label":"sd","width":426,"height":240,"size":6314499,"link":"https://d1jwm5cjiym5kj.cloudfront.net/transcoded/0755caf2-e681-4bd1-b903-7bb894a32f4e/mp4/0755caf2-e681-4bd1-b903-7bb894a32f4e_426x240.mp4?Expires=1789374707&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kMWp3bTVjaml5bTVrai5jbG91ZGZyb250Lm5ldC90cmFuc2NvZGVkLzA3NTVjYWYyLWU2ODEtNGJkMS1iOTAzLTdiYjg5NGEzMmY0ZS8qIiwiQ29uZGl0aW9uIjp7IkRhdGVHcmVhdGVyVGhhbkVxdWFscyI6eyJBV1M6RXBvY2hUaW1lIjoxNzg5MzYzOTA3fSwiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE3ODkzNzQ3MDd9fX1dfQ__&Signature=QwUZAcw7R7~cSpLEsfJBXJSYHAKU8PjxAqrFTBj1AveRH3W7CDmvBrKc93LebHU~1mNB2epg7PkCS-xgmUeAvwMDcrC4xqU2VvyO1urrDZY~3tMaZbq3~y6zQQBKUSs4Srdmod1B46Jras0WP~JmMeTDjP3E1m4NSbb1wHsCFTqb2UH0ddqc~KmM4R3xav09dAtz5jLKbOLfr799MJCIeblMdHoRH6ioMkybe3BuM7iCeV-giUV64kvxGymnajIGysG1ej3RBMEtBxa-TOn1tR8afljlR8K1~4XdQfC6TQAuqovBK8ip2n~FoAIUfSusi1XkvA6gWfijmPvmo86hAA__&Key-Pair-Id=APKAIZFQRQCEYGED75TA"},{"type":"video/mp4","quality":"sd","label":"sd","width":640,"height":360,"size":8599890,"link":"https://d1jwm5cjiym5kj.cloudfront.net/transcoded/0755caf2-e681-4bd1-b903-7bb894a32f4e/mp4/0755caf2-e681-4bd1-b903-7bb894a32f4e_640x360.mp4?Expires=1789374707&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kMWp3bTVjaml5bTVrai5jbG91ZGZyb250Lm5ldC90cmFuc2NvZGVkLzA3NTVjYWYyLWU2ODEtNGJkMS1iOTAzLTdiYjg5NGEzMmY0ZS8qIiwiQ29uZGl0aW9uIjp7IkRhdGVHcmVhdGVyVGhhbkVxdWFscyI6eyJBV1M6RXBvY2hUaW1lIjoxNzg5MzYzOTA3fSwiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE3ODkzNzQ3MDd9fX1dfQ__&Signature=QwUZAcw7R7~cSpLEsfJBXJSYHAKU8PjxAqrFTBj1AveRH3W7CDmvBrKc93LebHU~1mNB2epg7PkCS-xgmUeAvwMDcrC4xqU2VvyO1urrDZY~3tMaZbq3~y6zQQBKUSs4Srdmod1B46Jras0WP~JmMeTDjP3E1m4NSbb1wHsCFTqb2UH0ddqc~KmM4R3xav09dAtz5jLKbOLfr799MJCIeblMdHoRH6ioMkybe3BuM7iCeV-giUV64kvxGymnajIGysG1ej3RBMEtBxa-TOn1tR8afljlR8K1~4XdQfC6TQAuqovBK8ip2n~FoAIUfSusi1XkvA6gWfijmPvmo86hAA__&Key-Pair-Id=APKAIZFQRQCEYGED75TA"},{"type":"video/mp4","quality":"sd","label":"sd","width":854,"height":480,"size":10866814,"link":"https://d1jwm5cjiym5kj.cloudfront.net/transcoded/0755caf2-e681-4bd1-b903-7bb894a32f4e/mp4/0755caf2-e681-4bd1-b903-7bb894a32f4e_854x480.mp4?Expires=1789374707&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kMWp3bTVjaml5bTVrai5jbG91ZGZyb250Lm5ldC90cmFuc2NvZGVkLzA3NTVjYWYyLWU2ODEtNGJkMS1iOTAzLTdiYjg5NGEzMmY0ZS8qIiwiQ29uZGl0aW9uIjp7IkRhdGVHcmVhdGVyVGhhbkVxdWFscyI6eyJBV1M6RXBvY2hUaW1lIjoxNzg5MzYzOTA3fSwiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE3ODkzNzQ3MDd9fX1dfQ__&Signature=QwUZAcw7R7~cSpLEsfJBXJSYHAKU8PjxAqrFTBj1AveRH3W7CDmvBrKc93LebHU~1mNB2epg7PkCS-xgmUeAvwMDcrC4xqU2VvyO1urrDZY~3tMaZbq3~y6zQQBKUSs4Srdmod1B46Jras0WP~JmMeTDjP3E1m4NSbb1wHsCFTqb2UH0ddqc~KmM4R3xav09dAtz5jLKbOLfr799MJCIeblMdHoRH6ioMkybe3BuM7iCeV-giUV64kvxGymnajIGysG1ej3RBMEtBxa-TOn1tR8afljlR8K1~4XdQfC6TQAuqovBK8ip2n~FoAIUfSusi1XkvA6gWfijmPvmo86hAA__&Key-Pair-Id=APKAIZFQRQCEYGED75TA"}]},"totalVideoLengthInSeconds":104726,"requiredTools":"一台電腦，強韌不會斷線的網路，與網頁瀏覽器\n(如果會Adobe Illustrator者更棒，這裡會教你如何將自己刻的版面/logo/色系轉換為網站)\n將會使用 codepen.io 作為開發網站測試的平台","recommendedBackground":"多看些自己覺得做得很棒的網頁，\n有強烈想做出來的企圖心，\n能舉一反三與練習如何在自己的手中重現","willLearn":"可以入門網站基礎的架構與開發，網頁元素精準的掌控，\n刻出簡單有趣，視覺好看的網頁與小動畫，\n也會講基本的架構手法，讓你做出來的網頁易於維護也能讓工程師接手，\n知道出錯的時候要如何請股歌大人諭示，才能找到解決的辦法。","targetGroup":"學生族群-想無痛學習網站，卻都找不到好教材\n設計師-想碰一下網頁開發，但怎麼看程式碼都是一坨毛線跟汪洋","modules":["5c91b4a0728ddf00208ba18d","5c91b460728ddf00208ba180","5c91b4ee1a3ca10020055f09","5c91b50a1a3ca10020055f17","5c91b5461a3ca10020055f23","5c91b5741a3ca10020055f2b","5c91b58d1a3ca10020055f34","5c91b5bc1a3ca10020055f41","5c91b6001a3ca10020055f55","5c91b62b1a3ca10020055f63","5c91b6521a3ca10020055f6a","5c91b6861a3ca10020055f76","5c91835bed65c200740ef069"],"chargePlan":{"_id":"6a9905d2e3dbb076695e5767","type":"CP_2023_50_50_90_10","course":"56189df9df7b3d0b005c6639","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:54.495Z"},"group":{"_id":"5c0a05491f7e290020b4c294","title":"程式","uniquename":"programming","subGroup":{"_id":"5c0a05d51f7e290020b4c2a7","title":"程式入門","uniquename":"programming-fundamentals"}},"productTags":[{"_id":"66691a7f3d9dff5028ee4729","name":"前後端程式精選課","tagType":"BASIC","createdAt":"2024-06-12T03:48:15.655Z","updatedAt":"2024-06-12T03:48:15.655Z"},{"_id":"63a0020eca16a600715529a7","tagType":"BASIC","name":"HTML","description":"是一種用於建立網頁的標準標示語言，又稱超文件標示語言，HTML是一種基礎技術，常與CSS、JavaScript一起用於設計網頁。","createdAt":"2018-12-07T05:57:42.000Z","updatedAt":"2018-12-07T05:57:42.000Z"},{"_id":"63a00210ca16a600715536f6","tagType":"BASIC","name":"CSS","description":"CSS與HTML是網頁開發語言，完整地學習CSS與HTML即可掌握網頁開發基礎知識，也是進入網頁前端開發的起點。","createdAt":"2018-12-07T05:57:31.000Z","updatedAt":"2018-12-07T05:57:31.000Z"},{"_id":"63a0020cca16a60071551c52","tagType":"BASIC","name":"JavaScript 入門","description":"一種直譯式、基於原型的物件導向程式語言，JavaScript，同時具有函數式程式設計的特性。","createdAt":"2018-12-07T05:49:43.000Z","updatedAt":"2018-12-07T05:49:43.000Z"},{"_id":"63a0020eca16a60071552b8f","tagType":"BASIC","name":"網站開發入門","description":"線上網站開發課程，如果你還不確定自己適合前端或後端，先在網站開發入門探索 UIUX、RWD、資料庫等內容你對哪個最有興趣吧！","createdAt":"2018-12-17T09:04:47.000Z","updatedAt":"2018-12-17T09:04:47.000Z"}],"totalCourseLengthInSeconds":104726,"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":"6630a2dc0d300d8c0bb46695","title":"其他人也在學｜產品設計 x 動畫網頁程式","coverImage":{"_id":"6630a2650d1fdd8ee44a3a2c","url":"https://images.hahow.in/images/6630a2650d1fdd8ee44a3a2c","height":625,"width":1000},"previewDescription":"課程合購優惠 85 折"},{"_id":"666810933d9dff50288ae258","title":"其他人也在學｜Python 入門 x 動畫程式入門","coverImage":{"_id":"6668103802064da6d74178de","url":"https://images.hahow.in/images/6668103802064da6d74178de","height":625,"width":1000},"previewDescription":"課程合購優惠 85 折"},{"_id":"6668165b6b82b2641a2a2e38","title":"其他人也在學｜視覺設計 x 動畫程式","coverImage":{"_id":"666815d86b82b2641a29ea27","url":"https://images.hahow.in/images/666815d86b82b2641a29ea27","height":625,"width":1000},"previewDescription":"課程合購優惠 85 折"},{"_id":"6a58439aebd72ac1954aca3f","title":"從網頁語法入門，邁向互動藝術實戰","coverImage":{"_id":"6a5842de30b8f254aa088e33","url":"https://images.hahow.in/images/6a5842de30b8f254aa088e33","height":625,"width":1000},"previewDescription":"吳哲宇老師新舊課一次擁有！"}],"globalAverageRating":4.81,"hasSubscribedSaleNotification":false,"purchasePlan":{"id":"57ab9f4a294ec007002237e4","type":"COURSE_PUBLISHED","category":"COURSE","price":2000,"priceInMoneyPoint":2000,"isLimitedTimeOffer":false},"currencyCode":"TWD","basePricingInfo":{"price":2000,"preOrderedPrice":1000,"currencyCode":"TWD"}}