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

文章最後更新於 2021 年 8 月 20 日

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

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

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

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

網頁設計工作者

當你對於前端語法的掌握度越來越高,你的idea會愈來越多,就好像玩遊戲一樣,技能一直在解鎖,慢慢的當公司需要你 > 你需要公司的時候,你的價值就體現出來了。

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

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

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

設計X前端X後端
  • Design 網頁設計師
  • FrontEnd 前端工程師
  • BackEnd 後端工程師

那前端設計師就介於網頁設計師 -> 前端工程師之間,也可以說前端設計同時具備” 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的課程介面其實優化的不錯,有不少貼心的小功能。

當前單元
像是右上方紅框的當前單元,點一下就能跳到目前正在看的單元,然後有些單元有綠色的ICON,那是老師附註的內容,像是一些經驗談或是補充的筆記。
筆記標註
如果點筆記的話,就會看到自己曾經在那些單元的幾分幾秒做過筆記,可以參考圖中的123步驟,點下1之後就會跳出2的輸入欄位,然後3就會列出紀錄,之後只要直接點右邊的時間,例如點02:27就會直跳到你當時做筆記的影片的那個時間點,這功能蠻強的。
逐字稿
逐字稿就很好理解了,右邊紅框就是目前影片撥放時的文字(這功能好適合拿來唱歌阿~)。

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

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

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

sublime
我平常開sublime習慣用兩個column,一邊看html一邊寫css或js,左圖中的紅框指的是只要對單詞點2下,就會自動選取所有一樣的詞,尤其在改路徑的時候很方便

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

codepen
進入codepen的網站就會看到不一樣的範例,也可以打關鍵字搜尋你想要的效果。
template
隨便點一個專案進去就可以看到,左邊欄位分別有別人寫的html、css、js,點右下角紅框的Export就可以下載專案,老師上課時都是用codepen做示範。

當你開始寫程式語法後,畫面只會有滿滿的程式碼,要做出甚麼架構都會在腦中先思考一下框架,然後一邊打出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之後就直接算出答案了,快速很多。

sublime寫程式畫面
舉例來說,左邊的畫面是sass,右邊是css,我在左邊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

html像是網頁的主結構

想像html標籤會有<head><body><footer>,就好像每個人有頭、身體、腳一樣,此時大家都有一樣的部分,外觀看起來也一樣。

css

css像是網頁的外觀

在網路上常常看到的template也是透過css做變化,例如有些網頁會看到字體可以選擇大小,就是透過css去做變化,想像每個人都有了<head><body><footer>之後,再加上css的美化,每個人就像穿上衣服一樣,有不一樣的風格,也有不同的高矮胖瘦。

java script

JavaScript則是負責網頁如何跟使用者作互動

常見的範例像是我點了某個按鈕,畫面就下滑到指定的位置,或是滑鼠在網頁上滑動,物件會緩緩地移動,可以想像一個人加上了JS之後,就像有了個性,可以活潑、可以冷靜

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

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

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

RWD
RWD除了需要注意在各裝置上的體驗,也需要注意第一視頻能夠呈現的畫面,避免重要資訊被畫面切掉。

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

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

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

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

Vue.js

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

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

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

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

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

設計、前端、後端常見框架與資源

學完之後得到甚麼?

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

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

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

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

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

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

您可能也會喜歡…

14 個回應

  1. 樂布蕾表示:

    太有收穫了!!謝謝分享~我會考慮購買這堂課的!!

  2. Shelly表示:

    好詳細!
    如果身邊有讀網頁設計的一定推薦給他們!
    謝謝分享

  3. Evelyn表示:

    投資自己是最好的投資,這門課或許可以讓我再提升一點,讓自己網站更完善,可以考慮呢,謝謝分享!

  4. Wendy表示:

    很棒的課程分享,也已和朋友分享囉!

  5. Sky Jack Wong表示:

    分析到位的网络设计师课堂,这个行业是人人羡慕的,因为都是高薪行业。谢谢楼主分享让我受益良多

  6. Richmaple表示:

    哇靠這課程感覺不簡單啊,我這個電腦白癡⋯⋯

  7. Alan表示:

    這篇看起來相對我而言滿專業的,畢竟我沒有學過這類的東西,前一陣子有開始聽到HAHOW,裡面確實滿多內容的

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *