動畫互動網頁程式入門 (HTML/CSS/JS)
找相似
$2,000

動畫互動網頁程式入門 (HTML/CSS/JS)

Hahow 好學校－線上課程平台
搶購
訂單成立賺2%
下單享LINE POINTS點數
訂單成立賺2% 40 點
價格趨勢怎麼看？
設定到價通知
分類：
旅遊餐券 娛樂/生活/服務券 服務課程票券
Hahow 好學校－線上課程平台

Hahow 好學校－線上課程平台

【 消費提醒 】 1. 需透過 LINE 購物前往 Hahow 好學校官方網站消費，並在同一瀏覽器於 24 小時內結帳，方享有 LINE POINTS 回饋資格。 2. 唯有「精選課程」（https://hahow.in/apselect-event）符合回饋資格，在此頁面外的課程或任何學習補給與優惠商品合購組合皆不符合 LINE POINTS 回饋資格，可以於 LINE 購物商店直接搜尋課程名稱，確認是否符合回饋，自行連結至他處所購買之課程將不會回饋 LINE POINTS 點數。 3. 建議從 LINE 購物進入 Hahow 站上後，挑選課程加入購物車並直接完成結帳與付款流程，中間請勿跳出 Hahow 網站，以確保回饋資格。 4. 點數回饋上限以單筆訂單計算。 5. 取消訂單或退貨行為，不具贈點資格。 6. 點數將於付費並無退貨後 30 天前後發送， 是否符合回饋資格請洽 LINE購物客服詢問。

相關文章

【日本|東京】登山裝備敗家何處去？新宿/澀谷/原宿/上野。戶外用品店逛街地圖

【日本|東京】登山裝備敗家何處去？新宿/澀谷/原宿/上野。戶外用品店逛街地圖

都市生活緊湊匆忙，然而購物已經成為許多人舒壓的一種方式，逛街也是許多人來到日本重要的目的之一。Mao以前甚至有聽同事說：如...
12,043人已觀看
上班族通勤必備好包！網友激推提把托特包TOP8

上班族通勤必備好包！網友激推提把托特包TOP8

提把托特包的大容量是許多上班族珍愛的通勤好包，不僅可以放筆電，如果有1-2天短距離的出差公務需求時，也可以拿來當成旅行包使...
45,638人已觀看
日韓暢銷6款人氣即溶咖啡！連明星們都愛不釋口！

日韓暢銷6款人氣即溶咖啡！連明星們都愛不釋口！

咖啡可說是每日精神糧食，宅家辦公一樣少不了它！尤其即溶咖啡既省時又方便，就連2021最夯的韓國影集「黑道律師文森佐」都看得...
518,027人已觀看
2024 重量級「國外咖啡店」進軍台灣 Top 5：韓國巨大可頌Ouvert seoul、%Arabica進駐中山… 一次收藏！

2024 重量級「國外咖啡店」進軍台灣 Top 5：韓國巨大可頌Ouvert seoul、%Arabica進駐中山… 一次收藏！

台灣人愛喝咖啡，從連鎖品牌、超商再到街角的文青咖啡店，即便趨近於飽和的台灣咖啡市場，國外咖啡品牌進軍同樣依舊能吸引買氣，帶...
929人已觀看
小心！上公廁也可能被傳染新冠病毒！重症名醫：使用蹲式馬桶「自保6要訣」必注意

小心！上公廁也可能被傳染新冠病毒！重症名醫：使用蹲式馬桶「自保6要訣」必注意

防疫三級警戒降至二級，隨著人流活動機會增加，大家在戶外碰到尿急時，必需找公廁，但是不禁令人擔心：「上廁所時，在公廁內遇到新...
1,468,040人已觀看
不想再人擠人？「大稻埕煙火」5個最佳觀賞地點推薦，北門承恩門廣場、劍潭山觀景平台坐收360度美景！

不想再人擠人？「大稻埕煙火」5個最佳觀賞地點推薦，北門承恩門廣場、劍潭山觀景平台坐收360度美景！

「2024年大稻埕夏日節」在本月17號盛大開跑！作為台北市最具代表性的夏季活動之一，最令人期待的絕對就是高空煙火秀，每年都...
1,278人已觀看
復古跑鞋57/40花樣上市，春櫻粉、梨花奶茶、雛菊黃...5款春日限定錯過捶心肝！

復古跑鞋57/40花樣上市，春櫻粉、梨花奶茶、雛菊黃...5款春日限定錯過捶心肝！

靠著舒適度和有型有款的設計New Balance 57/40 復古運動鞋，成為近期女鞋頭們熱搜大熱門！搶眼復古風格搭配上醒...
58,890人已觀看
清洗保溫瓶好重要！保溫瓶清洗方法與超高CP保溫瓶推薦

清洗保溫瓶好重要！保溫瓶清洗方法與超高CP保溫瓶推薦

保溫杯的好，你不能不知道！夏天裝冰飲能保冰、冬天裝熱飲能保溫，方便好用又討人喜歡，而許多人會用使用同個保溫瓶裝不同類型的飲...
51,101人已觀看
8款精選萌虎馬克杯，讓巨貓陪你上班！貓掌玻璃杯、胖虎陶瓷杯⋯⋯虎哩工作順利準時下班！

8款精選萌虎馬克杯，讓巨貓陪你上班！貓掌玻璃杯、胖虎陶瓷杯⋯⋯虎哩工作順利準時下班！

漂亮實用的水杯，不僅能讓喝水動力大大提升，還能為書桌、辦公桌上多些質感和巧思，這篇精選出八款老虎系列杯組！從個性手繪到優雅...
15,459人已觀看
水晶寶寶哪裡買到正確丟棄處理方式｜懶人包

水晶寶寶哪裡買到正確丟棄處理方式｜懶人包

水晶寶寶是什麼？是活得還死的？ 水晶寶寶是沒有生命的非生物，水晶寶寶的成分屬於丙烯酸高分子聚合物，這種化學藥品具有強力吸水...
75,732人已觀看

相似商品

動畫互動網頁特效入門（JS/CANVAS）
找相似
2,500

動畫互動網頁特效入門（JS/CANVAS）

Hahow 好學校－線上課程平台
2%
漫畫素描技法從入門到精通(附光盤DVD教學版)
找相似
1,299

漫畫素描技法從入門到精通(附光盤DVD教學版)

台灣樂天市場
0.5%
臺灣銀行數位金融業務企劃人員一套書 (不含問題分析與解決、策略分析/附題庫網帳號/雲端課程/3冊合售)/鼎文公職名師群 eslite誠品
找相似
歷史低價
1,059 (降$147)

臺灣銀行數位金融業務企劃人員一套書 (不含問題分析與解決、策略分析/附題庫網帳號/雲端課程/3冊合售)/鼎文公職名師群 eslite誠品

蝦皮商城
0%
影片製作入門10堂課 - 攝影、剪輯、腳本
找相似
1,400

影片製作入門10堂課 - 攝影、剪輯、腳本

Hahow 好學校－線上課程平台
2%
112年臺灣銀行國際金融英語組/ 大陸地區組套書 (附英文單字書/題庫網帳號/雲端課程/4冊合售)/鼎文公職名師群 eslite誠品
找相似
歷史低價
1,248 (降$174)

112年臺灣銀行國際金融英語組/ 大陸地區組套書 (附英文單字書/題庫網帳號/雲端課程/4冊合售)/鼎文公職名師群 eslite誠品

蝦皮商城
0%
日語大全集(基礎入門+初級常用+中級實用+高級活用日語)
找相似
2,000

日語大全集(基礎入門+初級常用+中級實用+高級活用日語)

Yahoo奇摩購物中心
1%
Notion 實戰課程：打造專屬數位工作術
找相似
3,380

Notion 實戰課程：打造專屬數位工作術

Hahow 好學校－線上課程平台
2%
企業管理題庫─破Point｜企業管理高頻題目觀測&難題破解秘術(線上課程＋書)(書號：010IE982401)(王毅)(志光)-SV36
找相似
2,690

企業管理題庫─破Point｜企業管理高頻題目觀測&難題破解秘術(線上課程＋書)(書號：010IE982401)(王毅)(志光)-SV36

新保成網路書局
4%
【AI 深度學習】新手入門應用篇
找相似
2,500

【AI 深度學習】新手入門應用篇

Hahow 好學校－線上課程平台
2%
零基礎轉職！網頁設計 HTML、CSS 快速入門
找相似
2,690

零基礎轉職！網頁設計 HTML、CSS 快速入門

Hahow 好學校－線上課程平台
2%
自學程式如何快速入門 - 以 Python/JS 為例
找相似
2,200

自學程式如何快速入門 - 以 Python/JS 為例

Hahow 好學校－線上課程平台
2%
動態設計全方位！[動畫篇] 實戰入門一次搞定
找相似
2,000

動態設計全方位！[動畫篇] 實戰入門一次搞定

Hahow 好學校－線上課程平台
2%
產品分析入門：UX 設計師的思考術
找相似
2,450

產品分析入門：UX 設計師的思考術

Hahow 好學校－線上課程平台
2%
Canva 入門到進階實戰｜零基礎做質感設計
找相似
2,780

Canva 入門到進階實戰｜零基礎做質感設計

Hahow 好學校－線上課程平台
2%
從入門到業界實戰 - UI / UX 前端網頁設計
找相似
2,500

從入門到業界實戰 - UI / UX 前端網頁設計

Hahow 好學校－線上課程平台
2%
大當家bs-3370u 指紋/密碼二合一考勤機 考勤快速不塞車 線上教學不用擔心 保固14個月
找相似
92折
2,678

大當家bs-3370u 指紋/密碼二合一考勤機 考勤快速不塞車 線上教學不用擔心 保固14個月

松果購物｜放大你對家的想像
2%
桃園【澤也東方養生莊園-澤荟SPA】藝文旗艦店淨痘靚顏課程90分鐘-新客專案MO23
找相似
98折
1,273

桃園【澤也東方養生莊園-澤荟SPA】藝文旗艦店淨痘靚顏課程90分鐘-新客專案MO23

神腦生活
2%
終極藝術百科 + 細看藝術
找相似
1,378

終極藝術百科 + 細看藝術

東森購物 ETMall
1%
《終極藝術百科》+《細看藝術》
找相似
77折
1,378

《終極藝術百科》+《細看藝術》

台灣樂天市場
0.5%
DIY材料盒 雙邊旋轉鑰匙包|皮件線上課程|在家安心做皮件
找相似
1,380

DIY材料盒 雙邊旋轉鑰匙包|皮件線上課程|在家安心做皮件

亞洲跨境設計購物平台 Pinkoi
1%
土地銀行（數位行銷規劃人員）套書（贈題庫網帳號、雲端課程）
找相似
1,590

土地銀行（數位行銷規劃人員）套書（贈題庫網帳號、雲端課程）

Yahoo奇摩購物中心
1%
輕鬆學好道地美式發音！
找相似
2,000

輕鬆學好道地美式發音！

Hahow 好學校－線上課程平台
2%

熱銷排行榜

更多

讓插畫走入生活－Procreate 文創物實作！
找相似
2,880

讓插畫走入生活－Procreate 文創物實作！

Hahow 好學校－線上課程平台
2%
Procreate 插畫入門－從素描到風格
找相似
2,800

Procreate 插畫入門－從素描到風格

Hahow 好學校－線上課程平台
2%
靈魂的代言人-塔羅牌義全解析
找相似
800

靈魂的代言人-塔羅牌義全解析

Hahow 好學校－線上課程平台
2%
Canva 入門到進階實戰｜零基礎做質感設計
找相似
2,780

Canva 入門到進階實戰｜零基礎做質感設計

Hahow 好學校－線上課程平台
2%
用 Python 理財：打造小資族選股策略
找相似
3,200

用 Python 理財：打造小資族選股策略

Hahow 好學校－線上課程平台
2%
掌握鉤針編織邏輯：五種針法自造生活小物
找相似
2,980

掌握鉤針編織邏輯：五種針法自造生活小物

Hahow 好學校－線上課程平台
2%
找回身體最佳狀態｜動力鏈：人人必修的身體使用說明書
找相似
11,000

找回身體最佳狀態｜動力鏈：人人必修的身體使用說明書

Hahow 好學校－線上課程平台
2%
曾寶儀——從心開始的溝通術
找相似
1,900

曾寶儀——從心開始的溝通術

Hahow 好學校－線上課程平台
2%
Procreate人體繪畫入門－扎實基礎養成
找相似
3,600

Procreate人體繪畫入門－扎實基礎養成

Hahow 好學校－線上課程平台
2%
擺脫職涯卡關！聚焦你的職場絕對優勢
找相似
2,980

擺脫職涯卡關！聚焦你的職場絕對優勢

Hahow 好學校－線上課程平台
2%
Python 入門特訓 - 基礎實作到證照攻略
找相似
1,790

Python 入門特訓 - 基礎實作到證照攻略

Hahow 好學校－線上課程平台
2%
【線上課程】溫美玉注音系列第三堂：兒童注音讀寫趴｜銜接小學課程！
找相似
79折
2,990

【線上課程】溫美玉注音系列第三堂：兒童注音讀寫趴｜銜接小學課程！

親子天下Shopping
2%
台灣手語達人孵化班：聾聽雙師的基礎入門課
找相似
1,800

台灣手語達人孵化班：聾聽雙師的基礎入門課

Hahow 好學校－線上課程平台
2%
Python 資料分析 - 網頁爬蟲與視覺呈現
找相似
1,880

Python 資料分析 - 網頁爬蟲與視覺呈現

Hahow 好學校－線上課程平台
2%
風格藝術 設計上線 - 用 PS、AI 做吸睛視覺設計
找相似
3,200

風格藝術 設計上線 - 用 PS、AI 做吸睛視覺設計

Hahow 好學校－線上課程平台
2%
Python 資料分析：AI 機器學習入門到應用
找相似
2,180

Python 資料分析：AI 機器學習入門到應用

Hahow 好學校－線上課程平台
2%
動畫互動網頁程式入門 (HTML/CSS/JS)
找相似
2,000

動畫互動網頁程式入門 (HTML/CSS/JS)

Hahow 好學校－線上課程平台
2%
用實際案例學設計-美編的 InDesign 排版課
找相似
1,600

用實際案例學設計-美編的 InDesign 排版課

Hahow 好學校－線上課程平台
2%
高效閱讀、有效輸出－和閱讀人學習實踐知識的技術
找相似
2,800

高效閱讀、有效輸出－和閱讀人學習實踐知識的技術

Hahow 好學校－線上課程平台
2%
Notion 實戰課程：打造專屬數位工作術
找相似
3,380

Notion 實戰課程：打造專屬數位工作術

Hahow 好學校－線上課程平台
2%
職場人必學的商業分析術 - 專案策略思考
找相似
2,880

職場人必學的商業分析術 - 專案策略思考

Hahow 好學校－線上課程平台
2%
王梓沅的高效英聽學習法：3 階段打造英聽腦
找相似
3,800

王梓沅的高效英聽學習法：3 階段打造英聽腦

Hahow 好學校－線上課程平台
2%
打動人心的創作秘密，畫出個性的角色設計
找相似
1,280

打動人心的創作秘密，畫出個性的角色設計

Hahow 好學校－線上課程平台
2%
旅行韓文這樣說！帶你高效提升韓文口語力
找相似
2,500

旅行韓文這樣說！帶你高效提升韓文口語力

Hahow 好學校－線上課程平台
2%
【加購】客製化文字雷射雕刻服務
找相似
360

【加購】客製化文字雷射雕刻服務

亞洲跨境設計購物平台 Pinkoi
1%
王梓沅的 Can-Do 英文溝通術：從聽到說的 24 個實戰任務
找相似
3,800

王梓沅的 Can-Do 英文溝通術：從聽到說的 24 個實戰任務

Hahow 好學校－線上課程平台
2%
直球對決你的工作焦慮！劉軒的 50 堂職場心理學
找相似
8,000

直球對決你的工作焦慮！劉軒的 50 堂職場心理學

Hahow 好學校－線上課程平台
2%
比ㄅㄆㄇ簡單的韓語發音
找相似
1,590

比ㄅㄆㄇ簡單的韓語發音

Hahow 好學校－線上課程平台
2%
加密貨幣新手攻略 | 從買賣入門到自動交易
找相似
2,400

加密貨幣新手攻略 | 從買賣入門到自動交易

Hahow 好學校－線上課程平台
2%
動畫互動網頁特效入門（JS/CANVAS）
找相似
2,500

動畫互動網頁特效入門（JS/CANVAS）

Hahow 好學校－線上課程平台
2%

商品描述

你曾經想學過網頁設計嗎?曾經看過線上課程，大部分的程式設計教學往往只講解功能沒教你如何讓網頁好看，好用學完做出來之後，總離真正上線的網頁有段距離而覺得沮喪寫一個網頁，往往不只是一個人的夢魘，設計師拉好了頁面交給工程師，卻怎麼樣也達不到想要的效果，而程式設計師也溝通的煩悶，改到不耐煩的說「要不然你來做阿」設計師能做的話，他早就自己做了，但上網一查語法html/js/css五花撩亂，我們早已脫離了無名小站修改網誌語法的美好時代，究竟該怎麼無痛入手網頁程式開發呢?「目前突破8000%!超過4000人一同學習」課程更新>1/26新增課程共筆共筆連結包含學習目錄與推薦時間/課程勘誤補充/推薦書籍（持續新增）可以一起編輯>1/17全部單元上線完畢>11/24更新課程預計上線時間>11/7新增即時作品集合系統已經超過一百件同學繳交作品與練習(至11/15之前已上線85單元共1230分鐘)>9/04新增FB討論社群動畫互動網頁程式入門課程討論社團>8/23詳細版課程綱要：課程綱要連結>7/4課程募資期間圓滿結束！！一目了然的教學環境這堂課會告訴你從網站的草稿跟結構開始，要怎麼規劃才能有組織，不會掛再螢幕前不知道要做什麼，會從設計師的角度看，去操作網頁，一切你會在以拉上面看到的美好事物，我們會網頁的程式語言呈現。不同於一般的網頁設計入門，以最好用，最簡便的平台--Codepen代替教學，學習中再也不用上下傳檔案預覽，也能即時看到更新的效果，以替代性的jade/sass樣版語言，能簡化大量HTML/CSS的繁瑣，讓程式易讀好懂，當然後續也會在額外教大家怎麼正式的架設自己的網站。這一切讓初期學習不會因為一點點打錯，網頁出不來而搥桌，跟著這堂課從零到一，就能入門網頁開發了!最後常見的問題是，結束了一個課程的同時，很多人遇到不會的問題就卡死，怎麼做也只做得出範例的幾個網頁，因此，特別規劃了「搜尋與問題解決技巧」，讓你以後不管遇到什麼都能靠自己的力量去解決!不論你是設計師、學生、程式設計師，一般想碰網頁設計的人，這堂課會準備好一切你需要的素材，讓你感受最少的阻力入門，即使你不懂設計，也能跟著做出來，且知道以後需要什麼樣的素材製作網頁「只有自學者才懂自學的痛」三年前接觸網頁程式設計，沒有經驗的我，接了一個國中網頁設計的案子，上個經歷還停留在會動的會跳的五顏六色Flash美好年代，只好搜尋線上各種網頁設計相關教學，卻都是一坨坨程式碼教你如何打H1到H4標題（還會由大到小好棒棒），CSS可愛的背景跟文字家族。打開記事本想要刻簡單的一個導覽列跟放張圖片，卻怎麼樣都調不到自己想要的位置，改了一整天，好不容易對齊了，螢幕大小一改變半個頁面就不見。我知道，這些慘痛經歷，我都經歷過，一直都是用繪圖軟體過來，設計的頁面平平都是軟體，為什麼網站方面的教學通病都停留在語法跟瑣碎的功能，總是沒人教怎麼把腦海中的頁面變成現實，讓設計的版面照著想像的運作。課程目標這堂課會告訴你從網站的草稿跟結構開始，要怎麼規劃才能有組織，不會掛在螢幕前不知道要做什麼這次的課程，著重在製作網頁的時候，究竟要怎麼把網站做『好』而不是單純的寫出來，卻不能看不好用不夠理想。從illustrator的思維來看：如何讓東西對齊彼此、至中排列到正確的位置如何調整每個東西的顏色、粗細、透明度與看起來的樣子如何讓文字脫離新細明體魔掌、行距、字距、讓文章看起來舒服如何做到裁切版面、遮罩、繪圖、框線，在網頁上實踐各種圖像設計的常用技巧如何讓東西有趣的跟滑鼠互動，使網頁變得好玩在素材的方面，會準備好可能用到的圖，以及各種幫助學習的工具，帶著完整走一次網站開發的流程，所以課程結束後，不會徬徨無助只能照著做範例，而是能一步一步自己找資源與參考資料，將夢想的網站與動畫實現。你也許會想說，我套模板就好啦，為什麼要學網頁設計呢?套模板是一種選擇，不過學完了這堂課，你也將會有自己的能力改造模板、看懂他們，更能有系統的規劃、或與他人合作，了解以技術觀點來看網頁能做到什麼讓你能夠快速上手一些網站視覺處理的撇步，享受做出屬於自己獨一無二網頁的成就感。課程中你將能做出1.從頭開始規畫一個網頁的結構、內容與呈現方式2.章節三、基礎html/css簡單的自我介紹頁面，練習網頁元素操縱、對位與外觀3.章節四、系統化管理網頁設計-sass變數化易於更改配色/樣式的網頁模板4.學習網站配色與視覺的基礎概念，實作icon匯出4.製作動態互動天氣盒子5.使用Bootstrap+Skrollr製作捲動式專題網頁6.練習如何從概念、發想到利用網格系統分析與繪製草稿5.學習分析並刻一個模仿Hahow募資頁面板型的網頁5.走過網頁框架、配色、佈局到平面稿的流程6.使用Vue.js練習資料性的網頁與製作一台互動鋼琴7.練習各種滑鼠互動與基礎動畫課程單元總覽2-楔子-課程進行模式說明3-楔子-網頁前後端如何運作4-基礎前期規劃-網站專案開發流程5-基礎前期規劃-網站主題名稱logo6-基礎前期規劃-網站瀏覽結構樹規劃7-基礎前期規劃-網站排版規劃與分類8-基礎前期規劃-網站視覺配色概念與資源9-本機環境架設-sublime操作與瀏覽器預覽網頁10-本機環境架設-伺服器瀏覽與原理講解11-Codepen環境架設-平台介紹/註冊與基礎設定12-Codepen環境架設-實際使用sublime中快速鍵13-基礎HTML/CSS-html中元素&排列的概念14-基礎HTML/CSS-html中結構&層級的概念15-基礎HTML/CSS-簡易版本自我介紹16-基礎HTML/CSS-css直接調整外觀與顏色框線17-基礎HTML/CSS-css分開撰寫-class&id概念18-基礎HTML/CSS-css顯示方式displayblock/inline19-基礎HTML/CSS-css元素位置-相對/絕對定位20-基礎HTML/CSS-css內間隔/外間隔(padding/margin)21-基礎HTML/CSS-css字體變化與span-在文章段落中製作變化22-基礎HTML/CSS-html/css大整合-製作獨特名片網頁23-​基礎HTML/CSS-功課說明-製作自己的技能網頁24-系統性管理開發-html縮寫模組-Emmet介紹25-系統性管理開發-html樣板語言-jade(pug)(課程主要使用)26-系統性管理開發-css樣板語言-sass(課程主要使用)27-系統性管理開發-sass-變數概念管理色彩&內容28-系統性管理開發-sass-動態產生模組mixin概念29-系統性管理開發-sass-常用mixin與累積資源30-系統性管理開發-html參考資料轉換jade31-系統性管理開發-實作網頁品牌視覺指導套色32-素材前期準備-如何在以拉中製作icon/圖像33-素材前期準備-如何輸出圖片jpeg/png/svg34-素材前期準備-將圖片上傳到imgur影像網站35-素材前期準備-管理網頁色彩(guideline/sass/js)36-前端基礎動畫互動-htmlattr與自定義屬性名稱37-前端基礎動畫互動-css綜合定位運用absolute/relative38-前端基礎動畫互動-css加入基礎滑鼠互動:hover/:active39-前端基礎動畫互動-css動畫基礎transition-duration/delay40-前端基礎動畫互動-css製作影格動畫animation/keyframes41-前端基礎動畫互動-css動畫速度曲線fillmode/speedcurve42-前端基礎動畫互動-SVG-繪製向量網頁圖片/logo43-前端基礎動畫互動-SVG-讓你的LOGO或圖像動起來44-前端基礎動畫互動-動態互動天氣盒子45-前端進階程式js-引言46-前端進階程式js-jquery動態改變css外觀/html內容47-前端進階程式js-jquery初階滑鼠事件-click/hover48-前端進階程式js-jquery變數概念-儲存修改與判斷49-前端進階程式js-json物件陣列概念&for遍歷50-前端進階程式js-Jquery切換class/css應用-手機demo51-前端進階程式js-jquery/json動態產生購物車清單52-前端進階程式js-Jqueryajax-非同步載入與應用介紹53-前端進階程式js-Jqueryajax-實作導入資料代辦清單54-前端進階程式js-實作購物車-動態新增購買物品與結算55-RWD原理與應用-內容流與概念說明56-RWD原理與應用-指定比例尺寸%與max-width/min-width57-RWD原理與應用-重新排版的原理-特定條件css-mediaquery58-RWD原理與應用-實作手機版面-模仿fb帳號頁面桌面/手機板變化59-RWD原理與應用-懶人工具-bootstrap原理與結構講解60-RWD原理與應用-bootstrap基礎案例與原理熟悉61-RWD原理與應用-bootstrap格線系統原理與RWD應用62-RWD原理與應用-bootstrap應用技巧padding型規劃63-實際應用範例bootstrap-結合skrollr製作捲動式網頁64-網頁視覺設計-概念-版面規劃概念與網格系統(AI/SKETCH/紙筆)65-網頁視覺設計-概念-與頁面結構/跳轉方式規劃66-網頁視覺設計-概念-樣式顏色規劃67-網頁視覺設計-概念-微互動元素動畫反應規劃68-網頁視覺設計-案例-從元素建構而上的設計69-網頁視覺設計-案例-從頁面整體切分而下的設計70-網頁視覺設計-案例-從設計轉換程式網頁的常用技巧71-實際網站應用案例-YellowStudio設計工作室網頁72-前端框架Vue.js-為什麼要用資料導向做網頁(回顧js)73-前端框架Vue.js-將變數代入模板中74-前端框架Vue.js-v-for列舉元素應用75-前端框架Vue.js-v-model使用者輸入雙向綁定76-前端框架Vue.js-v-if/v-show條件渲染與資料的後處理-實作博客來77-前端框架Vue.js-v-on/method建立js事件78-前端框架Vue.js-與AJAX的對接動態載入資訊79-前端框架Vue.js-綜合案例-使用hahow課程資料80-前端框架Vue.js-互動錄音播放鋼琴81-購買伺服器部署/網域-如何匯出codepen與網站結構82-購買伺服器部署/網域-現成主機與網址DNS設置83-購買伺服器部署/網域-linux主機設置與安裝apache84-購買伺服器部署/網域-使用filezilla軟體連線與上傳85-購買伺服器部署/網域-使用sublimesftp進行同步86-購買伺服器部署/網域-使用Prepros在電腦上動態編譯sass/jade87-購買伺服器部署/網域-網站上線GA追蹤與og(用在fb)顯示設定88-破除障礙-問題解決的技巧-ChromeDevtools89-後續發展與介紹-如何規劃自己的未來學習路程(前端/動畫)同學們的作品集作品集連結：http://2017.awiclass.monoame.com/proj/1?utm=class_1_description網站範例參考:臺北聲音地景計畫-「捷運站體環境音樂」徵選活動花旗聯合勸募2016複雜生活節DyverseStudio音樂工作室(舊)翔虹AutoCAD技術中心MonoameDesign墨雨設計新詩視覺化靠北交大2.0Abstract(將音樂轉成視覺形式)常見問題Q&A(6/24更新)沒有程式或設計基礎適合上這門課嗎?A:這堂課是為了讓設計相關或是沒有任何程式基礎的人，能上手真正“業界”網頁程式設計的課程!，其實在業界的大型網站往往都不是用軟體，而是用程式碼一行一行刻出來的，沒有圖形化介面也不容易親近，簡介中提到的codepen平台是線上的編輯環境，可以即時預覽打出來的程式，不會覺得學起來很抽象，也可以省去上傳檔案才能預覽的麻煩:)，而且平台練習使用都是免費的！開啟網頁瀏覽器輸入網址就可以使用希望能幫助大家不害怕程式設計，懂得如何熟練跟用它操作網頁視覺互動，能做的東西絕對比單純用dreamweaver排版來的多而且專業，在業界也可以提升跟相關程式人員的溝通基礎唷!AdobeIllstrator/網頁開發的課程比例各占多少呢?不會以拉適合學嗎?A:可以的，主要的內容會放在網頁編輯開發上，以拉是輔助工具而已出場機會不多，課程中的範例都會準備好素材給各位練習唷!在後半課程我會提到多ㄧ些圖像設計跟介面的概念，與ㄧ些比較有趣的應用手法和案例，AI不是這次課程的主體，僅會拿來做版面的規劃跟視覺，不過還是會提到基礎的使用喔!如果沒有以拉，也可以用任何繪圖軟體、甚至紙筆做規劃都可以!重點是如何有系統的規劃結構跟版面。RWD(響應式網頁)會講到嗎?A:在課堂中會教學RWD是什麼，如何基礎的判斷裝置寬度改變對應的CSS，當了解基礎部分後，會進一步引入框架等RWD常用模組，希望讓大家不只會使用這些套件，更能了解背後運作的原理，才能夠能改能修，對於網頁有更高的操控度不會像拼裝車搖搖晃晃。課程使用的軟體要怎麼安裝跟使用呢?有分平台嗎?A:簡介中提到的codepen平台是線上的編輯環境，網址為http://www.codepen.io，可以即時預覽打出來的程式，開啟網頁瀏覽器輸入網址就可以使用!不論是MAC或是Windows都可以使用已經是html/css工程師了，適合上這門課嗎?A:這門課大約50%入門，50%是專攻介面設計跟動畫呈現，希望能夠快速抓住網頁美感跟互動規劃的工程師，十分適合來上這門課!常用的參考資料/學習資源有什麼呢?視覺部分，像是Pinterest/Dribble還有這次的教學平台Codepen，關於視覺介面只要搜尋關鍵字UI/UXWebDesign就可以找到很多不錯的案例!程式部分w3school在基礎的html/css都有方便的索引參考，想做什麼就查什麼，雖然偏向功能解析，只要掌握網頁基本概念了之後都能夠很快速的引用。可以分享相關接案經歷跟流程細節嗎?A:會特別有一個單元是針對自己的接案經驗做分享，如果大家有特別感興趣的部分都可以反應在平台上再安排內容:)圖文內容的排版跟結構規劃會提到嗎?A:會分析3-4個基本的網站案例，以及常見的網頁呈現形式，UI/UX部分有很多瑣碎的細節和視覺要安排，都會逐步分析與帶大家實際模仿大型頁面的思維做練習，累積能量創造自己的作品!上完這門課之後，有辦法獨立接案嗎?A:獨立接案需要經驗累積，不過把課程上提的東西練熟跟自己嘗試應用，能讓你熟悉網頁領域不害怕，容易與工程師合作，自行進修便能嘗試接案。能透過這門課做出購物車真正能結帳、或是社團的留言功能嗎?A:這堂課主要是針對前端跟介面，所以後端並沒有提到，但是能對網站有很完整的了解，也能自行上手其他技術，後端部分又是另一門學問，不是那麼快可以學到完成深入的東西了！想學更進階的JS跟繪圖嗎？第二堂課-動態互動網頁特效入門這堂課將帶領你，從零開始打造一個「打動人心」的互動特效網頁；賦予你堅實的網頁開發技術、靈活組合各式技巧的應變能力，透過從零開始的JS程式教學與Canvas繪圖概念，結合數學、物理與物件導向程式開發，幫助你實踐心中的想法。課程內容分為四階段，總共2000分鐘以上第一階段：將HTML/CSS融會貫通，輕鬆入門，順暢進階第二階段：JavaScript程式與動畫基礎，做出設計感的動畫應用第三階段：UI原理實作與Canvas運算藝術第四階段：結合Vue.js，打造輕巧完整的獨立網頁遊戲熱騰騰上線中課程連結個人經歷墨雨設計創辦人吳哲宇從動畫與平面設計起家，持續做到整體品牌形象CI設計到UI/UXAPP介面設計，目前專攻網頁動畫與互動，研究如何以網頁的技巧實踐MotionGraphics的精神，以設計的角度主宰網頁，讓網頁不只是能用、資訊呈現，更要有趣、好玩。第五屆宏碁數位創作獎國中組首獎第六屆宏碁數位創作獎國中組首獎第七屆宏碁數位創作獎高中普通組首獎+評審團超級大獎第八屆宏碁數位創作獎高中普通組優等第九屆宏碁數位創作獎高中專業組首獎+評審團超級大獎故事旅社啟程，故事總匯風視覺設計台北智慧城市黑客松評審團超級大獎Selinko&RemyMartin限量合作酒款APP界面設計聯合報國際美容展2015/2016前後台網頁暨系統開發2015世界健康大會前後台網頁暨系統開發翔虹AutoCAD技術中心網頁與管理系統開發其他作品

加入購物車

設定到價通知

前往賣場2%