hahow完課評價 | 給網頁設計師走向前端的88堂課

文章最後更新於 2022 年 10 月 16 日

在廣告圈、電商、客戶端待了近10年的時間，發現身邊的設計大多數都不會切版、寫前端語法，我覺得很可惜，因為設計會前端的話，你可以

• 在職場上的選擇會更多(薪水當然比較好談)
• 接案的來源比較廣
• 寫出興趣的話，還可以朝前端工程師發展
• 在設計layout時，你有更多的主導權

個人覺得第4點是最重要的，我相信很多設計都有跟程式配合的經驗，你可能聽過設計抱怨程式切出來的畫面、動態跟設計想的不一樣，或是程式抱怨設計畫的layout很難切、一直改東改西之類的。

我很幸運本身沒遇過上述的問題，遇到的工程都很好相處，我想學前端是因為在設計畫面的時候，我就在思考動態可以怎麼做，在切版的時候我可以怎麼加入視差滾動讓畫面有巧思，或是做RWD的時候，哪些物件是可以在各個裝置共用的，讓自己在做專案的時候能夠更省力。

在我跟你分享這堂課的心得之前

先簡單自我介紹一下，我是非科班出身的設計師，之前唸的是財務金融，想當初要從銀行跨領域去學設計也是被同事及朋友各種的看衰，但心裡想的只有”不試試看怎麼知道“，結果像這樣不務正業的做設計一晃眼也是10年了。

如果你是相關產業的工作者，我想你應該知道要完成一個網站，我們會需要:

那前端設計師就介於網頁設計師 -> 前端工程師之間，也可以說前端設計同時具備” UI/UX視覺呈現“以及”程式邏輯思考“兩項技能，優勢當然就是在設計layout時，同時就能思考css的框架以及動態如何呈現，還有JS網頁互動的可行性。

所以設計基本上分成以下兩種

• 不會寫JS前端語法的設計 > 網頁設計師 : 會寫CSS，知道怎麼跟前端配合，哪些地方要切出欄位給前端套程式，知道甚麼樣的畫面可以切版(有些平面設計畫出來的layout就很難切版，因為沒有網頁的思維)。
• 會寫JS前端語法的設計 > 前端設計師 : 熟悉CSS也會寫JS、CANVAS、SVG，能夠寫出網頁互動的功能，習慣用coding軟體製作網頁(像是Sublime)，厲害的前端設計可以把跟後端配合的前置工作都包了。

但實際上每間公司在職稱上，對工作內容的定義也不盡相同，分很細的公司就會有網頁設計、前端設計、前端工程、後端工程，但有些公司的資深設計=網頁設計+前端設計，就是會設計、會切版、也會寫JS。

這堂課適合甚麼樣的人?

這堂課我覺得適合本身有設計基礎的人，像是網頁設計、平面設計或是相關科系學生，當初我在學前端語言的時候，會覺得有些教學不太好懂，感覺像是寫給前端工程看的文章，但設計的邏輯會有點不太一樣，所以會學得頗辛苦。

Hahow這堂課的老師是平面設計出身，後來才接觸程式語言，他在課程介紹時有提到，不同於以往程式設計課程是在講解功能，而是專注讓網站好看、好玩、特別，在學習上比較像是從設計的角度出發，對沒有程式基礎的人是蠻好吸收的。

P.S 只要註冊成為Hahow會員，就可以免費觀看試看單元，比較能夠知道講師的教學方式適不適合自己喔!

課程章節架構

主要分成13個章節

1. 公告區 => 1個單元
2. 楔子 & 基礎前期規劃 => 7個單元
3. 環境架設 => 4個單元
4. 基礎HTML/CSS => 10個單元
5. 系統性管理開發 => 8個單元
6. 素材前期準備 => 4個單元
7. 前端基礎動畫互動 => 9個單元
8. 前端進階程式js => 10個單元
9. RWD原理與應用 => 9個單元
10. 網頁視覺概念設計 => 8個單元
11. 前端框架 Vue.js => 9個單元
12. 購買伺服器部署/網域 => 7個單元
13. 後續發展與介紹 => 2個單元

覺得線上課程的好處就是，你可以選擇目前最需要解決的問題開始看課程，有些課程也會附上講義跟原始碼，沒時間看課程的人也可以先預習一下。

另外提一下，覺得hahow的課程介面其實優化的不錯，有不少貼心的小功能。

簡單分類一下各章節可以學到甚麼

第1~3章 | 網頁基礎觀念，像是前端、後端的原理、網站規劃流程、工作環境設定

從第3章環境架設開始就要進入寫程式的世界了，以往在Dreamweaver可以用拖曳的方式拉元素進網頁，但是本章要開始熟悉Sublime跟Codepen兩個工具，Sublime在寫程式上有很多方便的用法，像是html標籤整理方便、一次修改所有要改的內容很快速、程式語法高亮等，還有很多外掛套件，很推薦使用(有時候我也會拿來當文字編輯軟體)。

Codpen則是一個集合很多前端寫的厲害範例的網站，如果你本身會套程式的話，可以到這邊找你需要的特效或功能來研究對方的寫法，或是直接下載檔案套用，絕對是設計的好朋友，先加到我的最愛。

當你開始寫程式語法後，畫面只會有滿滿的程式碼，要做出甚麼架構都會在腦中先思考一下框架，然後一邊打出html標籤，最後輸出確認畫面跟你腦中想的一樣時，就是一個”爽”字。

第4~7章 | 有css常用的基礎語法，還有加速寫css效率的sass，以及利用css寫動態，而第5章(sass)是我在實作上最有收穫的部分，一定要會

第4章開始就有很多實作範例了，建議最好同時一起跟著練習，我自己是開著桌機跟筆電同步進行，一邊聽一邊做印象就加深了2次，尤其遇到問題也可以練習debug的能力，久了之後在專案上遇到問題時，可以很快知道怎麼除錯，我當時所在的設計team只有我會寫前端，所以組員遇到問題時，都會找我幫忙debug，我本身是蠻喜歡debug的，在這樣教學相長的情況下，自己贏得了組員的信賴，同時也提升自己的能力。

連結看老師的第4-10單元的課程範例

第5章的sass為什麼好用呢?舉例來說我可以把常寫的css模組化，例如顏色、字體大小、間距(padding、margin)，如果你的專案是像官網那樣有很多頁面的，修改起來會感覺更有效率，還有計算式，以往在css做計算時 width:(50/1920)*100%，我要自己先計算出來再填上，在sass我只要寫出計算式，編譯成css之後就直接算出答案了，快速很多。

sass可以做到的事情遠比我上述說的多，另外還有scss語法也是類似的概念，寫出感覺之後可以再深入研究，建立自己的模板，我在寫RWD模板的時候，就會分別寫pc、mb、pad 3支sass，然後最後編譯出一支layout.css，目前也是持續優化中。

第7章對於想利用css寫動態的同學可以優先從這章開始，以下連結可以看看老師上課範例做出來的成果。

第7-9單元 動態互動天氣盒子

P.S 只要註冊成為Hahow會員，就可以免費觀看試看單元，比較能夠知道講師的教學方式適不適合自己喔!

第8章 | 主要是前端語法的淺談，也有帶到一些後端程式的概念，害怕程式的設計在這一章應該會抖抖的

這個章節有興趣想深入的話，可以考慮上老師的另一堂課動畫互動網頁特效入門（JS/CANVAS），是比較深入的前端程式課，我自己也有上，課程時間大概是這堂課的一倍，也是CP值很高的課程，如果設計學好這部分的話，真的會拉開跟其他設計師的水平，就好像從一般艙坐到商務艙一樣，如果再具備業務、提案的能力，大概可以坐到頭等艙了吧XD

另外提一下，有人可能會有疑問是html、css 、java script不是都是程式語法嗎? 簡單來說

通常網頁一定會有html跟css，而JS則是看專案需求，而網頁設計師跟前端設計師最大的差別就是在於怎麼寫CSS，會不會寫JS，也就是程式等級的差別

第9章 | RWD原理以及bootstrap應用，也是必學的部分，在各裝置上瀏覽的體驗絕對是設計師要學習的功課

現在多數人普遍都是用手機瀏覽網頁，但不代表我們就能放掉使用桌機或平板的使用者，而且多數的客戶沒有預算分別做桌機跟手機板網頁，另外本章提到的bootstrap是一種套版軟體，在求職的時候有些公司會要求具備此技能，我自己是沒有特別鑽研，還是比較喜歡手刻，個人建議先學會基礎語言，後續學別的語法會比較事半功倍。

第10章 | 這章節比較像是定義設計畫面時的guideline，簡單來說就是UI跟UX的部分

這部分比較多使用者體驗的部分，AI操作的部分蠻多的，這邊我會推薦也可以用adobe XD，主要是做UI的軟體，我覺得蠻好用的，layout設計好之後可以直接產出連結，傳給企劃或客戶看的時候很方便，對方也可以直接留言回饋，目前是免費的軟體。

另外本章提到的網頁流程概念，對於網頁初學者或是不熟悉網頁概念的平面設計是很好的入門課，像是第10章的第7單元就會帶到網頁在切版時，區塊要怎麼做區分，是很實用的觀念，還有CSS命名的概念，因為當網站結構比較大的時候，很容易會不知不覺設了很多class，此時除了要善用css選擇器之外，還要定義好css的命名，也是為了日後要維護比較方便，不管是給自己看或是之後接手網站維護的人。

第11章 | Vue.js 對我來說就是進階前端程式語法了，可以了解怎麼串接後端資料庫的邏輯概念

老實說當初沒想到課程會教到這部分，覺得蠻受用的，因為自己在接案的過程中，有些專案必須用到的前端技巧會比較困難一點，像是怎麼跟後端資料庫串接(有些公司這部分是前端負責的，有些則不是)，例如怎麼在google map顯示出客戶每間店的位置及相關資料，這邊比超出我平常作業的範疇了，所以主要就是了解原理，知道怎麼跟後端配合。

第12章 | 購賣伺服器/網域，我覺得適合soho族、接案工作室了解一下

因為客戶也不希望專案要分別包給不同的人，像我之前接案時只會處理到前端的部分，後端就必須再包出去，如果客戶本身沒有主機放網頁，又要另外再找這方面的專業人士，如果可以交給一個窗口統包，對於接案者當然可以賺比較多，只是甚麼都自己來很累而已，那對客戶來說他對你一個窗口就好了，何樂不為。

第13章 | 設計、前端、後端常見框架與資源

13-2有帶到XD的一些應用，可以做APP介面的模擬以及動態的展示方式，我自己是也拿來做網頁，目前是覺得蠻好用的，因為都是adobe的軟體，算是很快就可以上手，同時也會介紹設計、前端、後端分別常用的軟體。

學完之後得到甚麼?

我上完的心得是 : 我很難說哪幾章比較重要，哪幾章不重要，因為聽完老師的課程跟講解之後，我覺得每章都很重要，當初我要買這堂課時，本身JS也有一定的基礎，算是半個前端設計，也會擔心這堂課是不是很多東西我都會了，原本以為自己本來就知道的東西，頓時有很更深入的了解，而且老師的語調跟說明都很清楚，總之你可以按照需求挑著聽課程，但有時間的話，每一章都聽過一定會有收穫。

• 我自己的應用 : 工作上應用sass更有效率，對原本就知道的語法多了更深的理解，讓我可以從知道 > 做到 > 指導。
• 從主管角度 : 因為目前是主管職，當然希望自己的部屬能夠獨立完成專案，所以可以用課程素材去教導設計新鮮人，讓他們先看課程有概念，之後有問題比較有共同的語言可以溝通。
• 從雇員角度 : 結合原本設計的感性+程式邏輯的理性，朝向前端設計，提高身價。

我認為線上課程除了產品本身吸不吸引人，能不能解決問題之外，更重要的是培養自學跟自律的能力 ，

因為它不同於線下課有時間地點的規範，就好像我們當學生時，每堂課要坐在教室50分鐘，有固定的課表，有定期的考試，透過分數來檢視自己的學習成果，出社會後沒有人有義務要教我們甚麼，只有知道自己想要甚麼，想達到甚麼，很多人是先看見才相信，有方向有目標的人則是先相信才看見，相信自己做得到，自律的去刻意練習，終會看到你達成目標的畫面。

推薦指數 : 5顆星 ★★★★★

P.S 只要註冊成為Hahow會員，就可以免費觀看試看單元，比較能夠知道講師的教學方式適不適合自己喔!