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