LINE購物 價格追蹤APP
商店加碼、商品低價即時通知
LINE購物
價格追蹤APP
立即體驗
動畫互動網頁程式入門 (HTML/CSS/JS)
2,000

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

16% 購買約可得320點
Hahow 好學校-線上課程平台

Hahow 好學校-線上課程平台

更多

消費提醒: (1) 精選課程 需透過 LINE 購物前往 Hahow 好學校官方網站消費,並在同一瀏覽器於 24 小時內結帳,方享有 LINE POINTS 回饋資格。 (2) 唯有「精選課程」(https://hahow.in/apselect-event)和「指定活動頁面課程」符合回饋資格,在此頁面外的課程皆不符合LINE POINTS 回饋資格,或可以於 LINE 購物商店直接搜尋課程名稱,確認是否符合回饋,自行連結至他處所購買之課程將不會回饋 LINE POINTS 點數。 (4)點數回饋上限以單筆訂單計算。 (5)取消訂單或退貨行為,不具贈點資格。 (6)點數將於付費並無退貨後 30 天前後發送, 是否符合回饋資格請洽 LINE購物客服詢問 。

加入購物車

分享

2,000近期未降價,現在買不吃虧現在買不吃虧
$2,000歷史高價最高價$2,000歷史低價最低價

相關文章

娶到是你賺到!最持家的星座女非她莫屬,加碼推薦提升戀愛運好物
娶到是你賺到!最持家的星座女非她莫屬,加碼推薦提升戀愛運好物
想要娶個宜家宜室的好老婆?除了憑借運氣外,你還得有好眼光!雖然「好眼光」這種能力比運氣容易得到,卻也不是想有就能有!跟摘星...
121,674人已觀看
容易在人群中脫隱而出的人氣王星座前三!提升好人緣就靠這秘密法寶
容易在人群中脫隱而出的人氣王星座前三!提升好人緣就靠這秘密法寶
「只是因為在人群中多看了你一眼,再也沒能忘掉你容顏」——這個你,是有多大魅力?那麼多人,怎麼就單單只看到你?不僅打眼,還容...
211,721人已觀看
霸道獨立到讓男人害怕的星座女強人前三名!加碼推薦超強送禮小物~
霸道獨立到讓男人害怕的星座女強人前三名!加碼推薦超強送禮小物~
向男友撒個嬌、示示弱、嬌氣一下,對強勢的女生來說,真的太難做到了!畢竟,他們習慣了凡事一肩挑,強大到無所不能,根本就不給男...
68,921人已觀看
最新免費貼圖都在這!快用可愛的鵝言鵝語跟朋友話家常吧~
最新免費貼圖都在這!快用可愛的鵝言鵝語跟朋友話家常吧~
最後更新時間:2022/05/19(持續更新中) 免費LINE貼圖又更新啦~本週免費貼圖等你下載!可愛的鵝言鵝語、Q萌的天...
374,102人已觀看
吵架就愛提分手的星座女,情侶升溫好物就選這品!
吵架就愛提分手的星座女,情侶升溫好物就選這品!
每次跟老公吵架,都氣不打一處來,氣急敗壞地發洩憤不滿,脫口就會把分手講出來。哪些星座女容易這樣?摘星工廠提醒這幾個星座女的...
262,402人已觀看
會偷偷吃悶醋不告訴戀人的星座排名,用這情侶好物套牢他的心!
會偷偷吃悶醋不告訴戀人的星座排名,用這情侶好物套牢他的心!
吃醋,沒什麼大不了的,有些人喜歡用吃醋來表示對戀人的重視,但有人就是不願意光明正大地吃醋!在戀人面前傲嬌,然後暗地裡吃醋的...
101,321人已觀看
熱戀期一過就情感倦態的星座戀人!戀愛運提升靠這好物
熱戀期一過就情感倦態的星座戀人!戀愛運提升靠這好物
熱戀期的情侶,總有說不完的話題、講不夠的笑料、分享不完的故事,可一旦過了熱戀期,新鮮感漸漸消失,難免開始行禮如儀,甚至冷下...
56,381人已觀看
最新免費貼圖更新啦!快下載可愛爆擊的天竺鼠布丁~
最新免費貼圖更新啦!快下載可愛爆擊的天竺鼠布丁~
最後更新時間:2022/05/10(持續更新中) 免費LINE貼圖又更新啦~本週免費貼圖等你下載!超可愛的天竺鼠布丁、會動...
611,594人已觀看
會瀟灑放手、絕不糾纏的星座,招桃花好物推薦給你!
會瀟灑放手、絕不糾纏的星座,招桃花好物推薦給你!
自己的一片癡心,始終得不到對方的回應;自己的一片真心,久久換不來對方的真心……碰到這種情況,有的人會繼續糾纏、拚命挽留,有...
182,300人已觀看
又萌又實用的免費貼圖倒數計時中!想下載可愛三花看家中要趁現在~
又萌又實用的免費貼圖倒數計時中!想下載可愛三花看家中要趁現在~
最後更新時間:2022/05/19(持續更新中) 免費LINE貼圖又更新啦~本週免費貼圖等你下載!可愛的鵝言鵝語、Q萌的天...
353,413人已觀看

相似商品

React. js Redux
歷史低價1,170 (降$30)

React. js Redux

Udemy
7.5%
Node.js 網站開發 with React.js
1,980

Node.js 網站開發 with React.js

Hahow 好學校-線上課程平台
16%
限時加碼12:55:17
線上課程|動畫互動網頁程式入門 (HTML/CSS/JS)
2,000

線上課程|動畫互動網頁程式入門 (HTML/CSS/JS)

蝦皮商城
1%
自學程式如何快速入門 - 以 Python/JS 為例
2,200

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

Hahow 好學校-線上課程平台
16%
限時加碼12:55:17
線上課程|Python 資料分析:AI 機器學習入門到應用
1,680

線上課程|Python 資料分析:AI 機器學習入門到應用

蝦皮商城
1%
線上課程|自學程式如何快速入門 - 以 Python/JS 為例
2,200

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

蝦皮商城
1%
Python 資料分析:AI 機器學習入門到應用
1,680

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

Hahow 好學校-線上課程平台
16%
限時加碼12:55:17
自學英語口說:提升英文流暢度的5大步驟
1,800

自學英語口說:提升英文流暢度的5大步驟

Hahow 好學校-線上課程平台
16%
限時加碼12:55:17
【遍路文化】線上視頻課程|培養孩子的邏輯思考力,16堂金字塔寫作素養課
2,500

【遍路文化】線上視頻課程|培養孩子的邏輯思考力,16堂金字塔寫作素養課

蝦皮商城
1%
線上課程|Python 資料分析&機器學習入門
2,500

線上課程|Python 資料分析&機器學習入門

蝦皮商城
1%
動畫互動網頁特效入門(JS/CANVAS)
2,500

動畫互動網頁特效入門(JS/CANVAS)

Hahow 好學校-線上課程平台
16%
限時加碼12:55:17
線上課程|動畫互動網頁特效入門(JS/CANVAS)
2,500

線上課程|動畫互動網頁特效入門(JS/CANVAS)

蝦皮商城
1%
線上課程|自學英語口說:提升英文流暢度的5大步驟
1,800

線上課程|自學英語口說:提升英文流暢度的5大步驟

蝦皮商城
1%
線上課程|洞察行銷世代|引領未來行銷的數據洞察思維
2,500

線上課程|洞察行銷世代|引領未來行銷的數據洞察思維

蝦皮商城
1%
.二手書R2YB 1998年2月初版二刷《JAVA 網路遊戲設計 21天完全課程
1,700

.二手書R2YB 1998年2月初版二刷《JAVA 網路遊戲設計 21天完全課程

Yahoo奇摩超級商城
0.5%
線上課程|志祺的架構性思考:從資訊整理到觀點表達
1,960

線上課程|志祺的架構性思考:從資訊整理到觀點表達

蝦皮商城
1%
利息養成現金流:債券入門投資術
1,990

利息養成現金流:債券入門投資術

Hahow 好學校-線上課程平台
16%
限時加碼12:55:17
Python 資料分析&機器學習入門
2,500

Python 資料分析&機器學習入門

Hahow 好學校-線上課程平台
16%
限時加碼12:55:17
線上課程|ETF 投資全球:帶你量身打造專屬資產配置
3,000

線上課程|ETF 投資全球:帶你量身打造專屬資產配置

蝦皮商城
1%
線上課程|Python 行銷資料科學 :基礎語法入門最前線
1,480

線上課程|Python 行銷資料科學 :基礎語法入門最前線

蝦皮商城
1%

熱銷排行榜

更多

輝葉 垂直律動機 律動奇機 HY-806 (享12期0利率/輝葉官方旗艦店) 贈六堂居家全律動線上課程
歷史低價16,800 (降$23,000)

輝葉 垂直律動機 律動奇機 HY-806 (享12期0利率/輝葉官方旗艦店) 贈六堂居家全律動線上課程

蝦皮商城
1%
Notion 實戰課程:打造專屬數位工作術
2,680

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

Hahow 好學校-線上課程平台
16%
限時加碼12:55:17
跟 YouTuber 莫彩曦學美國道地的說話習慣
1,900

跟 YouTuber 莫彩曦學美國道地的說話習慣

Hahow 好學校-線上課程平台
16%
限時加碼12:55:17
Python 入門特訓 - 基礎實作到證照攻略
1,490

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

Hahow 好學校-線上課程平台
16%
限時加碼12:55:17
省錢攝影術:零基礎拍好美食&商品!
1,690

省錢攝影術:零基礎拍好美食&商品!

Hahow 好學校-線上課程平台
16%
限時加碼12:55:17
職場必備的 Excel 關鍵技法-進階
1,390

職場必備的 Excel 關鍵技法-進階

Hahow 好學校-線上課程平台
16%
限時加碼12:55:17
產品設計實戰:用Figma打造絕佳UI/UX
4,280

產品設計實戰:用Figma打造絕佳UI/UX

Hahow 好學校-線上課程平台
16%
限時加碼12:55:17
用 Python 理財:打造小資族選股策略
3,200

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

Hahow 好學校-線上課程平台
16%
限時加碼12:55:17
動畫互動網頁程式入門 (HTML/CSS/JS)
2,000

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

Hahow 好學校-線上課程平台
16%
限時加碼12:55:17
1080P高清視訊鏡頭(內置麥克風) 視訊攝影機 居家上班/線上課程/直播/會議
降價257 (降$433)

1080P高清視訊鏡頭(內置麥克風) 視訊攝影機 居家上班/線上課程/直播/會議

生活市集
2%
社群力:30 堂課突破你的內容行銷盲點!
2,400

社群力:30 堂課突破你的內容行銷盲點!

Hahow 好學校-線上課程平台
16%
限時加碼12:55:17
從入門到業界實戰 - UI / UX 前端網頁設計
2,500

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

Hahow 好學校-線上課程平台
16%
限時加碼12:55:17
讓圖不只是好看的-資訊設計思考力!
1,800

讓圖不只是好看的-資訊設計思考力!

Hahow 好學校-線上課程平台
16%
限時加碼12:55:17
偵探攻略:推理詭計X故事創作 寫作課
2,000

偵探攻略:推理詭計X故事創作 寫作課

Hahow 好學校-線上課程平台
16%
限時加碼12:55:17
開啟程式設計之門 - C++ 核心課程
1,490

開啟程式設計之門 - C++ 核心課程

Hahow 好學校-線上課程平台
16%
限時加碼12:55:17
靈魂的代言人-塔羅牌義全解析
800

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

Hahow 好學校-線上課程平台
16%
限時加碼12:55:17
王梓沅的 3D 英文筆記術:打造最強「說」「寫」英語資料庫
2,800

王梓沅的 3D 英文筆記術:打造最強「說」「寫」英語資料庫

Hahow 好學校-線上課程平台
16%
限時加碼12:55:17
Excel VBA 金融資料抓取 | 打造股票研究系統
3,450

Excel VBA 金融資料抓取 | 打造股票研究系統

Hahow 好學校-線上課程平台
16%
限時加碼12:55:17
Katie 凱蒂流動瑜珈:啟動熱能,身心修復
1,800

Katie 凱蒂流動瑜珈:啟動熱能,身心修復

Hahow 好學校-線上課程平台
16%
限時加碼12:55:17
啾啾鞋的資料彙整術 - 別淹沒在資訊海!
1,500

啾啾鞋的資料彙整術 - 別淹沒在資訊海!

Hahow 好學校-線上課程平台
16%
限時加碼12:55:17
量價交易精髓:打造股票、期貨完美交易策略
3,600

量價交易精髓:打造股票、期貨完美交易策略

Hahow 好學校-線上課程平台
16%
限時加碼12:55:17
SQL的五十道練習:初學者友善的資料庫入門
2,480

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

Hahow 好學校-線上課程平台
16%
限時加碼12:55:17
在台灣也能學一口漂亮英文!Phonics 自然發音&正音教學
990

在台灣也能學一口漂亮英文!Phonics 自然發音&正音教學

Hahow 好學校-線上課程平台
16%
限時加碼12:55:17
GA4 新手完全攻略!用數據分析下商業決策
2,400

GA4 新手完全攻略!用數據分析下商業決策

Hahow 好學校-線上課程平台
16%
限時加碼12:55:17
志祺的架構性思考:從資訊整理到觀點表達
1,960

志祺的架構性思考:從資訊整理到觀點表達

Hahow 好學校-線上課程平台
16%
限時加碼12:55:17
陳介中老師解題-刑法(陳介中)-003BB
85折553

陳介中老師解題-刑法(陳介中)-003BB

新保成網路書局
15%
電商人妻 IG 增粉攻略!三大領域經營術
3,980

電商人妻 IG 增粉攻略!三大領域經營術

Hahow 好學校-線上課程平台
16%
限時加碼12:55:17
15 單元看懂經濟運行,掌握全球投資趨勢
3,600

15 單元看懂經濟運行,掌握全球投資趨勢

Hahow 好學校-線上課程平台
16%
限時加碼12:55:17
棋許、武羿2022司律第一試綜合法學-七小科立大功-極重點整理+經典題演練(棋許、武羿)-002BR
85折468

棋許、武羿2022司律第一試綜合法學-七小科立大功-極重點整理+經典題演練(棋許、武羿)-002BR

新保成網路書局
15%
手機支架 懶人支架 平板支架 落地支架 旋轉摺疊 手機平板支架 直播支架 懸臂支架 支架 追劇  直播 線上課程好幫手
降價99 (降$300)

手機支架 懶人支架 平板支架 落地支架 旋轉摺疊 手機平板支架 直播支架 懸臂支架 支架 追劇 直播 線上課程好幫手

蝦皮商城
1%

商品描述

你曾經想學過網頁設計嗎?曾經看過線上課程,大部分的程式設計教學往往只講解功能沒教你如何讓網頁好看,好用學完做出來之後,總離真正上線的網頁有段距離而覺得沮喪寫一個網頁,往往不只是一個人的夢魘,設計師拉好了頁面交給工程師,卻怎麼樣也達不到想要的效果,而程式設計師也溝通的煩悶,改到不耐煩的說「要不然你來做阿」設計師能做的話,他早就自己做了,但上網一查語法 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 - 基礎前期規劃-網站主題名稱logo 6 - 基礎前期規劃-網站瀏覽結構樹規劃 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 顯示方式 display block/inline 19 - 基礎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參考資料轉換jade 31 - 系統性管理開發 - 實作網頁品牌視覺指導套色 32 - 素材前期準備 - 如何在以拉中製作icon/圖像 33 - 素材前期準備 - 如何輸出圖片jpeg/png/svg 34 - 素材前期準備 - 將圖片上傳到imgur影像網站 35 - 素材前期準備 - 管理網頁色彩(guideline/sass/js) 36 - 前端基礎動畫互動-html attr 與自定義屬性名稱 37 - 前端基礎動畫互動 - css 綜合定位運用 absolute / relative 38 - 前端基礎動畫互動 - css 加入基礎滑鼠互動 :hover / :active 39 - 前端基礎動畫互動 - css 動畫基礎 transition-duration/delay 40 - 前端基礎動畫互動 - css 製作影格動畫 animation/keyframes 41 - 前端基礎動畫互動 - css 動畫速度曲線 fillmode/speed curve 42 - 前端基礎動畫互動 - SVG - 繪製向量網頁圖片 / logo 43 - 前端基礎動畫互動 - SVG - 讓你的LOGO或圖像動起來 44 - 前端基礎動畫互動 - 動態互動天氣盒子 45 - 前端進階程式js-引言 46 - 前端進階程式js - jquery 動態改變css外觀/ html內容 47 - 前端進階程式js - jquery 初階滑鼠事件 - click/hover 48 - 前端進階程式js - jquery 變數概念- 儲存修改與判斷 49 - 前端進階程式js - json 物件陣列概念 & for 遍歷 50 - 前端進階程式js - Jquery 切換class/css應用-手機demo 51 - 前端進階程式js - jquery / json 動態產生購物車清單 52 - 前端進階程式js - Jquery ajax - 非同步載入與應用介紹 53 - 前端進階程式js - Jquery ajax - 實作導入資料代辦清單 54 - 前端進階程式js - 實作購物車-動態新增購買物品與結算 55 - RWD原理與應用-內容流與概念說明 56 - RWD原理與應用-指定比例尺寸% 與max-width/min-width 57 - RWD原理與應用-重新排版的原理-特定條件css-media query 58 - 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 - 實際網站應用案例-Yellow Studio 設計工作室網頁 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主機設置與安裝apache 84 - 購買伺服器部署/網域-使用filezilla軟體連線與上傳 85 - 購買伺服器部署/網域-使用sublime sftp進行同步 86 - 購買伺服器部署/網域-使用Prepros在電腦上動態編譯sass/jade 87 - 購買伺服器部署/網域-網站上線GA追蹤與og(用在fb)顯示設定 88 - 破除障礙-問題解決的技巧-Chrome Dev tools 89 - 後續發展與介紹- 如何規劃自己的未來學習路程 (前端/ 動畫)同學們的作品集作品集連結:http://2017.awiclass.monoame.com/proj/1?utm=class_1_description網站範例參考:臺北聲音地景計畫-「捷運站體環境音樂」徵選活動花旗聯合勸募2016複雜生活節 Dyverse Studio 音樂工作室(舊)翔虹AutoCAD技術中心 Monoame Design 墨雨設計 新詩視覺化靠北交大2.0Abstract(將音樂轉成視覺形式)常見問題Q&A  (6/24更新)沒有程式或設計基礎適合上這門課嗎?A: 這堂課是為了讓設計相關或是沒有任何程式基礎的人,能上手真正“業界”網頁程式設計的課程!,其實在業界的大型網站往往都不是用軟體,而是用程式碼一行一行刻出來的,沒有圖形化介面也不容易親近,簡介中提到的codepen平台是線上的編輯環境,可以即時預覽打出來的程式,不會覺得學起來很抽象,也可以省去上傳檔案才能預覽的麻煩:),而且平台練習使用都是免費的!開啟網頁瀏覽器輸入網址就可以使用希望能幫助大家不害怕程式設計,懂得如何熟練跟用它操作網頁視覺互動,能做的東西絕對比單純用dreamweaver排版來的多而且專業,在業界也可以提升跟相關程式人員的溝通基礎唷!Adobe Illstrator / 網頁開發 的課程比例各占多少呢? 不會以拉適合學嗎?A: 可以的,主要的內容會放在網頁編輯開發上,以拉是輔助工具而已出場機會不多,課程中的範例都會準備好素材給各位練習唷! 在後半課程我會提到多ㄧ些圖像設計跟介面的概念,與ㄧ些比較有趣的應用手法和案例,AI不是這次課程的主體,僅會拿來做版面的規劃跟視覺,不過還是會提到基礎的使用喔! 如果沒有以拉,也可以用任何繪圖軟體、甚至紙筆做規劃都可以! 重點是如何有系統的規劃結構跟版面。RWD(響應式網頁) 會講到嗎?A: 在課堂中會教學RWD是什麼,如何基礎的判斷裝置寬度改變對應的CSS,當了解基礎部分後,會進一步引入框架等RWD常用模組,希望讓大家不只會使用這些套件,更能了解背後運作的原理,才能夠能改能修,對於網頁有更高的操控度不會像拼裝車搖搖晃晃。課程使用的軟體要怎麼安裝跟使用呢? 有分平台嗎?A: 簡介中提到的codepen平台是線上的編輯環境,網址為http://www.codepen.io,可以即時預覽打出來的程式,開啟網頁瀏覽器輸入網址就可以使用!不論是MAC或是Windows都可以使用已經是html/css工程師了,適合上這門課嗎?A: 這門課大約50%入門,50%是專攻介面設計跟動畫呈現,希望能夠快速抓住網頁美感跟互動規劃的工程師,十分適合來上這門課!常用的參考資料/學習資源有什麼呢?視覺部分,像是Pinterest / Dribble 還有這次的教學平台Codepen,關於視覺介面只要搜尋關鍵字 UI / UX Web Design 就可以找到很多不錯的案例!程式部分 w3school在基礎的html/css都有方便的索引參考,想做什麼就查什麼,雖然偏向功能解析,只要掌握網頁基本概念了之後都能夠很快速的引用。可以分享相關接案經歷跟流程細節嗎?A: 會特別有一個單元是針對自己的接案經驗做分享,如果大家有特別感興趣的部分都可以反應在平台上再安排內容:)圖文內容的排版跟結構規劃會提到嗎?A: 會分析3-4個基本的網站案例,以及常見的網頁呈現形式,UI/UX部分有很多瑣碎的細節和視覺要安排,都會逐步分析與帶大家實際模仿大型頁面的思維做練習,累積能量創造自己的作品!上完這門課之後,有辦法獨立接案嗎?A: 獨立接案需要經驗累積,不過把課程上提的東西練熟跟自己嘗試應用,能讓你熟悉網頁領域不害怕,容易與工程師合作,自行進修便能嘗試接案。能透過這門課做出購物車真正能結帳、或是社團的留言功能嗎?A:這堂課主要是針對前端跟介面,所以後端並沒有提到,但是能對網站有很完整的了解,也能自行上手其他技術,後端部分又是另一門學問,不是那麼快可以學到完成深入的東西了!想學更進階的JS跟繪圖嗎? 第二堂課-動態互動網頁特效入門這堂課將帶領你,從零開始打造一個「打動人心」的互動特效網頁;賦予你堅實的網頁開發技術、靈活組合各式技巧的應變能力,透過從零開始的JS程式教學與Canvas繪圖概念,結合數學、物理與物件導向程式開發,幫助你實踐心中的想法。課程內容分為四階段,總共 2000 分鐘以上第一階段:將 HTML/CSS 融會貫通,輕鬆入門,順暢進階第二階段:JavaScript 程式與動畫基礎,做出設計感的動畫應用第三階段:UI 原理實作與 Canvas 運算藝術第四階段:結合Vue.js,打造輕巧完整的獨立網頁遊戲熱騰騰上線中課程連結個人經歷墨雨設計創辦人 吳哲宇從動畫與平面設計起家,持續做到整體品牌形象CI設計到UI/UX APP介面設計,目前專攻網頁動畫與互動,研究如何以網頁的技巧實踐 MotionGraphics的精神,以設計的角度主宰網頁,讓網頁不只是能用、資訊呈現,更要有趣、好玩。第五屆宏碁數位創作獎 國中組首獎第六屆宏碁數位創作獎 國中組首獎第七屆宏碁數位創作獎 高中普通組首獎+評審團超級大獎第八屆宏碁數位創作獎 高中普通組優等第九屆宏碁數位創作獎 高中專業組首獎+評審團超級大獎故事旅社 啟程,故事總匯風視覺設計台北智慧城市黑客松評審團超級大獎Selinko&RemyMartin 限量合作酒款APP界面設計聯合報國際美容展 2015/2016   前後台網頁暨系統開發2015世界健康大會 前後台網頁暨系統開發翔虹AutoCAD技術中心 網頁與管理系統開發其他作品

LINE 購物是匯集購物情報與商品資訊的整合性平台,商品資料更新會有時間差,請務必點擊商品至各合作網路商家,確認現售價與購物條件,一切資訊以合作廠商網頁為準。