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

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

Hahow 好學校－線上課程平台（舊）
搶購
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購物客服詢問。

相似商品

【客製化】日本 eSIM 網路流量專區(1~18天)
找相似
140

【客製化】日本 eSIM 網路流量專區(1~18天)

WifiMi 旅遊上網
1%
計算機程式設計 (Computer Programming)
找相似
歷史低價
1,161 (降$121)

計算機程式設計 (Computer Programming)

coursera
3%
【客製化】菲律賓 eSIM 網路流量專區(19~31天)
找相似
1,020

【客製化】菲律賓 eSIM 網路流量專區(19~31天)

WifiMi 旅遊上網
1%
大世界實體店面 現貨 選書師 繁體中文正版 益智桌遊 含稅附發票
找相似
96折
757

大世界實體店面 現貨 選書師 繁體中文正版 益智桌遊 含稅附發票

松果購物｜放大你對家的想像
5%
限時加碼19:28:24
【電子書】網商達人列傳
找相似
200

【電子書】網商達人列傳

台灣樂天市場
3%
不會寫程式也能創立個人品牌和變現_Readmoo 讀墨電子書
找相似
280

不會寫程式也能創立個人品牌和變現_Readmoo 讀墨電子書

Yahoo奇摩購物中心
1%
Digital Content Planning and Management
找相似
歷史低價
1,459 (降$151)

Digital Content Planning and Management

coursera
3%
【客製化】加拿大 eSIM 網路流量專區(1~18天)
找相似
165

【客製化】加拿大 eSIM 網路流量專區(1~18天)

WifiMi 旅遊上網
1%
【客製化】美國 eSIM 網路流量專區(19~31天每日恢復)
找相似
870

【客製化】美國 eSIM 網路流量專區(19~31天每日恢復)

WifiMi 旅遊上網
1%
【客製化】東南亞 eSIM 網路流量專區(19~31天)
找相似
650

【客製化】東南亞 eSIM 網路流量專區(19~31天)

WifiMi 旅遊上網
1%
Programming Mobile Applications for Android Handheld Systems: Part 2
找相似
1,459

Programming Mobile Applications for Android Handheld Systems: Part 2

coursera
3%
程式邏輯訓練—App Inventor 2 林正雄 2018 普林斯頓國際有限公司
找相似
470

程式邏輯訓練—App Inventor 2 林正雄 2018 普林斯頓國際有限公司

台灣樂天市場
3%
【電子書】不會寫程式也能創立個人品牌和變現：快速打造你的數位助理，建立結帳系統，多管道同步推廣品牌
找相似
280

【電子書】不會寫程式也能創立個人品牌和變現：快速打造你的數位助理，建立結帳系統，多管道同步推廣品牌

台灣樂天市場
3%
【客製化】越南 eSIM 網路流量專區(19~31天)
找相似
1,010

【客製化】越南 eSIM 網路流量專區(19~31天)

WifiMi 旅遊上網
1%
Containers in the Cloud
找相似
降價
1,459 (降$151)

Containers in the Cloud

coursera
3%
【客製化】加拿大 eSIM 網路流量專區(19~31天)
找相似
1,155

【客製化】加拿大 eSIM 網路流量專區(19~31天)

WifiMi 旅遊上網
1%
微軟 Microsoft 365 個人版 3個月訂閱 序號卡 無光碟(4入組)
找相似
3,090

微軟 Microsoft 365 個人版 3個月訂閱 序號卡 無光碟(4入組)

Yahoo奇摩購物中心
0.3%
【客製化】日本 eSIM 網路流量專區(19~31天)
找相似
1,040

【客製化】日本 eSIM 網路流量專區(19~31天)

WifiMi 旅遊上網
1%
微軟 Microsoft 365 個人版 3個月訂閱 序號卡 無光碟
找相似
790

微軟 Microsoft 365 個人版 3個月訂閱 序號卡 無光碟

Yahoo奇摩購物中心
0.3%
微軟 Microsoft 365 個人版 3個月訂閱 序號卡 無光碟(4入組)
找相似
3,090

微軟 Microsoft 365 個人版 3個月訂閱 序號卡 無光碟(4入組)

Yahoo奇摩購物中心
0.3%
【電子書】好好玩！Python程式設計入門與實例應用-鍛鍊邏輯思維×徹底掌握核心
找相似
430

【電子書】好好玩！Python程式設計入門與實例應用-鍛鍊邏輯思維×徹底掌握核心

台灣樂天市場
3%
北車捷運稀有露台美套｜台北市大同區天水路
找相似
15,800,000

北車捷運稀有露台美套｜台北市大同區天水路

5168實價登錄比價王
0%
Microsoft 365 個人版 一年訂閱盒裝(無光碟)
找相似
2,290

Microsoft 365 個人版 一年訂閱盒裝(無光碟)

friDay購物
1%
海華國際之星二房+平面車位｜桃園市中壢區環北路
找相似
13,980,000

海華國際之星二房+平面車位｜桃園市中壢區環北路

5168實價登錄比價王
0%
正東海別墅商圈繁華大面寬透店｜台中市龍井區台灣大道五段
找相似
27,880,000

正東海別墅商圈繁華大面寬透店｜台中市龍井區台灣大道五段

5168實價登錄比價王
0%
【客製化】東南亞 eSIM 網路流量專區(1~18天)
找相似
650

【客製化】東南亞 eSIM 網路流量專區(1~18天)

WifiMi 旅遊上網
1%
加購區。尺寸變更製版費
找相似
150

加購區。尺寸變更製版費

亞洲跨境設計購物平台 Pinkoi
5%
限時加碼19:28:24
每公分純銀延長圈圈鏈(限加購)
找相似
20

每公分純銀延長圈圈鏈(限加購)

亞洲跨境設計購物平台 Pinkoi
5%
限時加碼19:28:24
LINE@衝粉 【LINE@生活圈 增加粉絲/衝粉絲/衝人氣】LINE增加粉絲/追蹤數 LINE衝人數/增粉 LINE生活圈衝讚 真人追蹤 LINE@增粉 追蹤者
找相似
10,000

LINE@衝粉 【LINE@生活圈 增加粉絲/衝粉絲/衝人氣】LINE增加粉絲/追蹤數 LINE衝人數/增粉 LINE生活圈衝讚 真人追蹤 LINE@增粉 追蹤者

台灣樂天市場
3%
【客製化】中港澳 eSIM 網路流量專區(19~31天)
找相似
540

【客製化】中港澳 eSIM 網路流量專區(19~31天)

WifiMi 旅遊上網
1%

相關文章

不用花盆也能種植！療癒系苔球植栽超好照顧！

不用花盆也能種植！療癒系苔球植栽超好照顧！

喜歡植栽也想要增添室內綠意，卻又擔心植物不好照顧，還需要各式土壤及肥料，不僅費神又傷荷包。推薦你超容易種植又不需經常照料的...
81,083人已觀看
義大利百年甜點COVA再登台！7大亮點開箱：必吃4大經典「這款」全球都要本店直送

義大利百年甜點COVA再登台！7大亮點開箱：必吃4大經典「這款」全球都要本店直送

來自米蘭、歷史橫跨兩世紀的精品甜點名店COVA二度登台，正式插旗台北101。從海明威鍾愛的咖啡館起家，到受LVMH青睞的時...
235人已觀看
男用腰包推薦總整理！7款實用好看運動腰包、精品腰包、工作腰包一次看，一秒掌握型男穿搭～

男用腰包推薦總整理！7款實用好看運動腰包、精品腰包、工作腰包一次看，一秒掌握型男穿搭～

大多數男生出門時講求簡單快速，衣著穿搭也傾向簡單隨性，一個好看又實用的腰包就成為男生外出必備的時尚單品之一。但市面上腰包種...
44,265人已觀看
日韓暢銷6款人氣即溶咖啡！連明星們都愛不釋口！

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

咖啡可說是每日精神糧食，宅家辦公一樣少不了它！尤其即溶咖啡既省時又方便，就連2021最夯的韓國影集「黑道律師文森佐」都看得...
527,295人已觀看
旅行頸枕 4 大推薦！選對頸枕，機上也能一覺到天亮！

旅行頸枕 4 大推薦！選對頸枕，機上也能一覺到天亮！

無論是長途飛行、辦公室午休，還是日常放鬆，合適的頸枕都是提升舒適與健康的關鍵。這次精選 CABEAU、TripPal、EV...
2,923人已觀看
清洗保溫瓶好重要！保溫瓶清洗方法與超高CP保溫瓶推薦

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

保溫杯的好，你不能不知道！夏天裝冰飲能保冰、冬天裝熱飲能保溫，方便好用又討人喜歡，而許多人會用使用同個保溫瓶裝不同類型的飲...
64,242人已觀看
紐約最強漢堡Shake Shack傳進軍台灣！首間店址、必吃推薦一次看

紐約最強漢堡Shake Shack傳進軍台灣！首間店址、必吃推薦一次看

不少人每到國外旅遊時，除了吃在地美食，至少也都會安排一到兩餐的胃，到機場或百貨品嚐號稱「紐約最強漢堡」Shake Shac...
6,373人已觀看
什麼是塔吉鍋？這個原理「燒菜不加水」保留食物原汁原味！

什麼是塔吉鍋？這個原理「燒菜不加水」保留食物原汁原味！

北非摩洛哥的料理有著濃濃的異國風情，「燒菜不加水」熱騰騰塔吉料理的秘密是什麼呢？一起來看看2021塔吉鍋Top 5人氣排行...
29,429人已觀看
氣炸蒜球 整顆蒜頭直接氣炸，在家也可以享受排餐餐廳的經典配菜。

氣炸蒜球 整顆蒜頭直接氣炸，在家也可以享受排餐餐廳的經典配菜。

按讚加入粉絲團氣炸蒜球，排餐的經典配菜之一。之前在教父牛排吃到烤蒜球後，就對烤蒜球有著莫名的愛。後來幾次在比較高檔的西餐廳...
9,597人已觀看
【捷克布拉格】菠丹妮botanicus和蔓菲蘿Manufaktura捷克必買天然保養品推薦開箱

【捷克布拉格】菠丹妮botanicus和蔓菲蘿Manufaktura捷克必買天然保養品推薦開箱

奧地利＆捷克相關文章 本次12天行程：維也納>哈修塔特>薩爾斯堡>庫倫諾夫>布拉格>維也納 >>【奧地利維也納】3間必訪咖...
8,275人已觀看

熱銷排行榜

【早鳥59折🔥】黃瑽寧與樂樂的兒童健康課+繪本套書⭐加贈好習慣貼紙｜線上課程｜親子天下線上學校
找相似
59折
3,980

【早鳥59折🔥】黃瑽寧與樂樂的兒童健康課+繪本套書⭐加贈好習慣貼紙｜線上課程｜親子天下線上學校

親子天下Shopping
4%
領券再折$450 ★【線上課程】從動機到成績，馬大元的《全方位學習攻略課》（加贈附件10款實用學習單）
找相似
64折
4,350

領券再折$450 ★【線上課程】從動機到成績，馬大元的《全方位學習攻略課》（加贈附件10款實用學習單）

親子天下Shopping
4%
創辦人選品提案
找相似
79折
1,220

創辦人選品提案

19again
2%
【早鳥6折🔥】黃瑽寧與樂樂的兒童健康課:帶孩子認識身體、保護自己、養出好習慣｜線上課程｜親子天下線上學校
找相似
61折
3,580

【早鳥6折🔥】黃瑽寧與樂樂的兒童健康課:帶孩子認識身體、保護自己、養出好習慣｜線上課程｜親子天下線上學校

親子天下Shopping
4%
綠角的基金８堂課（2016補課增修版）
找相似
240

綠角的基金８堂課（2016補課增修版）

Yahoo奇摩購物中心
1%
馬斯克傳：唯一不設限、全公開傳記
找相似
800

馬斯克傳：唯一不設限、全公開傳記

PChome 24h購物
1%
轉型再成長：策略架構與執行力(軟精裝)
找相似
632

轉型再成長：策略架構與執行力(軟精裝)

PChome 24h購物
1%
客製化寶寶動態LINE貼圖(客製版本)
找相似
110

客製化寶寶動態LINE貼圖(客製版本)

亞洲跨境設計購物平台 Pinkoi
5%
限時加碼19:28:24
淘寶爆款操作聖經
找相似
269

淘寶爆款操作聖經

Yahoo奇摩購物中心
1%
How It Works知識大圖解 1年12期 贈 DK編輯-- 第二次世界大戰
找相似
2,790

How It Works知識大圖解 1年12期 贈 DK編輯-- 第二次世界大戰

Yahoo奇摩購物中心
1%
[線上課程] 卡片盒筆記實戰課｜靈感捕捉到高效產出的知識管理系統-卡片盒筆記實戰課｜靈感捕捉到高效產出的知識管理系統 (會員獨享 8 折)
找相似
8折
3,519

[線上課程] 卡片盒筆記實戰課｜靈感捕捉到高效產出的知識管理系統-卡片盒筆記實戰課｜靈感捕捉到高效產出的知識管理系統 (會員獨享 8 折)

UrMart｜運動吃蛋白｜早餐吃麥片
1%
Webtoon：手機世代的韓流浪潮，條漫如何打造跨媒體的全球版圖？
找相似
歷史低價
322 (降$65)

Webtoon：手機世代的韓流浪潮，條漫如何打造跨媒體的全球版圖？

康是美網購eShop
0%
李崇建：一週一練習，一年學會冰山理論(有聲課程)｜親子天下線上學校
找相似
77折
3,480

李崇建：一週一練習，一年學會冰山理論(有聲課程)｜親子天下線上學校

親子天下Shopping
4%
[線上課程] 刮除身體煩惱｜一刮就上手的科學刮痧課-刮除身體煩惱｜一刮就上手的科學刮痧課 (獨享 8 折)
找相似
8折
9,600

[線上課程] 刮除身體煩惱｜一刮就上手的科學刮痧課-刮除身體煩惱｜一刮就上手的科學刮痧課 (獨享 8 折)

UrMart｜運動吃蛋白｜早餐吃麥片
1%
無印良品 收納・家事 好感生活提案
找相似
9折
342

無印良品 收納・家事 好感生活提案

康是美網購eShop
0%
【線上課程】黃瑽寧的10堂育兒必修課（I）｜親子天下線上學校
找相似
79折
2,990

【線上課程】黃瑽寧的10堂育兒必修課（I）｜親子天下線上學校

親子天下Shopping
4%
在車上畫畫：火車、高鐵、捷運上，10分鐘就能畫！練就精準迅速的動速寫全技法
找相似
9折
342

在車上畫畫：火車、高鐵、捷運上，10分鐘就能畫！練就精準迅速的動速寫全技法

康是美網購eShop
0%
[線上課程] 拳擊小潘的拳擊實戰課｜攻防X腳步X戰術一次到位-拳擊小潘的拳擊實戰課｜攻防X腳步X戰術一次到位 (會員獨享 8 折)
找相似
8折
6,400

[線上課程] 拳擊小潘的拳擊實戰課｜攻防X腳步X戰術一次到位-拳擊小潘的拳擊實戰課｜攻防X腳步X戰術一次到位 (會員獨享 8 折)

UrMart｜運動吃蛋白｜早餐吃麥片
1%
[線上課程] 志祺七七 × 宋晏仁醫師的「外食減重學」：帶你瞭解體質，無痛瘦身-志祺七七 × 宋晏仁醫師的「外食減重學」：帶你瞭解體質，無痛瘦身 (會員獨享 8 折)
找相似
8折
3,060

[線上課程] 志祺七七 × 宋晏仁醫師的「外食減重學」：帶你瞭解體質，無痛瘦身-志祺七七 × 宋晏仁醫師的「外食減重學」：帶你瞭解體質，無痛瘦身 (會員獨享 8 折)

UrMart｜運動吃蛋白｜早餐吃麥片
1%
從零開始讀懂數位行銷
找相似
降價
355 (降$50)

從零開始讀懂數位行銷

康是美網購eShop
0%
呆萌町DINOTAENG 防水裝飾貼紙-夥伴/玩耍/招呼/上學
找相似
20

呆萌町DINOTAENG 防水裝飾貼紙-夥伴/玩耍/招呼/上學

Yahoo奇摩購物中心
0%
Webtoon：手機世代的韓流浪潮，條漫如何打造跨媒體的全球版圖？
找相似
340

Webtoon：手機世代的韓流浪潮，條漫如何打造跨媒體的全球版圖？

Yahoo奇摩購物中心
0%
[線上課程] 聰明買房的地產秘密課｜15堂課識別購屋眉角，不踩雷入手千萬房產-聰明買房的地產秘密課｜15堂課識別購屋眉角，不踩雷入手千萬房產 (會員獨享 8 折)
找相似
8折
5,280

[線上課程] 聰明買房的地產秘密課｜15堂課識別購屋眉角，不踩雷入手千萬房產-聰明買房的地產秘密課｜15堂課識別購屋眉角，不踩雷入手千萬房產 (會員獨享 8 折)

UrMart｜運動吃蛋白｜早餐吃麥片
1%
[線上課程] 【 皮拉提斯Pilates 】瑪G陪你練出蜜桃翹臀-【 皮拉提斯Pilates 】瑪G陪你練出蜜桃翹臀 (會員獨享 8 折)
找相似
8折
1,760

[線上課程] 【 皮拉提斯Pilates 】瑪G陪你練出蜜桃翹臀-【 皮拉提斯Pilates 】瑪G陪你練出蜜桃翹臀 (會員獨享 8 折)

UrMart｜運動吃蛋白｜早餐吃麥片
1%
【電子書】星巴克促銷策略之溝通與社群媒體行銷
找相似
50

【電子書】星巴克促銷策略之溝通與社群媒體行銷

台灣樂天市場
3%
[線上課程] 12 週打造理想體態｜飲食訓練一手包辦-12 週打造理想體態｜飲食訓練一手包辦 (會員獨享 8 折)
找相似
8折
3,200

[線上課程] 12 週打造理想體態｜飲食訓練一手包辦-12 週打造理想體態｜飲食訓練一手包辦 (會員獨享 8 折)

UrMart｜運動吃蛋白｜早餐吃麥片
1%
超過4000人加入這堂課！【線上課程】鄧惠文的自我覺察必修課：跨越10道心理困境，做自己生命的主人｜親子天下線上學校
找相似
71折
4,380

超過4000人加入這堂課！【線上課程】鄧惠文的自我覺察必修課：跨越10道心理困境，做自己生命的主人｜親子天下線上學校

親子天下Shopping
4%
SQL的五十道練習：初學者友善的資料庫入門
找相似
9折
432

SQL的五十道練習：初學者友善的資料庫入門

康是美網購eShop
0%
【On-Spa】全身四大課程隨妳配 任選3堂共150分鐘799元(北南部)
找相似
14折
799

【On-Spa】全身四大課程隨妳配 任選3堂共150分鐘799元(北南部)

LINE禮物
【2025寫作文推薦】🔥超過3300名學員熱烈報名🔥林怡辰線上作文課📝附贈老師批改！｜小學生學作文首選｜親子天下線上學校
找相似
52折
3,580

【2025寫作文推薦】🔥超過3300名學員熱烈報名🔥林怡辰線上作文課📝附贈老師批改！｜小學生學作文首選｜親子天下線上學校

親子天下Shopping
4%

商品描述

你曾經想學過網頁設計嗎?曾經看過線上課程，大部分的程式設計教學往往只講解功能沒教你如何讓網頁好看，好用學完做出來之後，總離真正上線的網頁有段距離而覺得沮喪寫一個網頁，往往不只是一個人的夢魘，設計師拉好了頁面交給工程師，卻怎麼樣也達不到想要的效果，而程式設計師也溝通的煩悶，改到不耐煩的說「要不然你來做阿」設計師能做的話，他早就自己做了，但上網一查語法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技術中心網頁與管理系統開發其他作品

加入購物車

設定到價通知

前往賣場