初心者的前端路線學習指南

Mike
I am Mike
Published in
7 min readJan 25, 2020

希望可以幫助那些想要入門前端領域但是不知道要怎麼選擇課程的人,給一個學習的建議與方向,之中推薦的課程有免費以及付費,就看自己的需求取捨,那就我們就開始來看看有那些推薦的學習資源與課程。

Step1:學習 HTML & CSS (必修)

前端的工作上面很常會需要把設計稿轉換成 html 跟 css,在這邊我非常推薦由 AMOS 老師再IT鐵人賽中所錄製的一系列網頁設計的基礎課程,讓對於想剛入門網頁製作的同學可以用很簡單的方式來學習了解網頁,是一堂可以讓從沒接觸過網頁的同學站在起跑點上的課程。

  1. 金魚都能懂的網頁設計入門 — 金魚都能懂了你還怕學不會嗎
  2. 金魚都能懂的這個網頁畫面怎麼切 — 金魚都能懂了你還怕學不會嗎
  3. 金魚都能懂的 CSS 選取器 — 金魚都能懂了你還怕學不會嗎

Step2:Responsive Web Design (必修)

有了 HTML 跟 CSS 的基礎後,就要開始學習如何製作RWD網站,由於Google對於沒有RWD的網頁SEO評分會降低,還有使用者在手機上面觀看效果不佳,所以各家網頁紛紛投入轉投入製作RWD網頁,RWD已經可以說是現代切版技能的標配。

這邊推薦我開設的課程,我將我做案子的經驗與實作的技巧整合所編成的精華,教你如何從零開始的一步一步建構 Responsive Web Design 網站,用業界常常遇到的問題當舉例,教你如何解決因為行動裝置而產生破版,還有用特殊的切版技巧來製做出完美且不破版的網頁。

  1. 職人必修的 RWD 網頁入門班

Step3:SASS / SCSS : CSS預處理器學習 (必修)

學習CSS之後,我們應該學習現在實際開發上比較主流的SASS / SCSS,透過強大的巢狀寫法,讓你可以更精簡的去寫CSS,還有模組化CSS,更可以透過像是迴圈以及變數等功能,讓你寫SASS / SCSS的時候也可以學習到部分程式的概念。

由六角學院的校長廖洧杰廖老師所撰寫的文章,他在 iT 邦幫忙鐵人賽 中所寫的一系列的SASS/SCSS教學非常完整,是入門SASS/SCSS的最好推薦。

  1. 30天掌握Sass語法
  2. Sass3.3 & CSS設計模式

Step4:JavaScript (必修)

當對於RWD 技術掌握後,再來最需要掌握的技術,JavaScript !
我們開始會需要跟網頁上面的元件做互動、與後端做溝通、瞭解 JavaScript版本的差異、熟悉瀏覽器環境、與現代前端所使用的開發工具等,帶你一步步站在前端工程師的起跑線。

  1. JavaScript & TypeScript 前端工程師入門班
  2. Alex 宅幹嘛的深入淺出 Javascript30 快速導覽

Step4.5: TweenMax 網頁動態(選修)

HTML、CSS、JavaScript 是網頁的三大要素,而 TweenMax 是專為製作動態網頁誕生的開源工具,它是一款強大的 JavaScript 動畫程式庫,能快速實現許多常見的動態效果,如果你在工作上面會需要製作複雜且大量的網頁動畫,那你可以考慮看看這門課程,會幫助你喜歡上製作網頁動畫。

  1. GSAP3 Update 10 Tips ( GSAP3十大升級指南 )

Step5:挑一個前端框架學習 (必選修)

現在的前端不是單純寫 HTML + CSS + JavaScript 就好,而是透過框架來開發一個服務或是網站,前端框架不管是 Vue 或是 React 起碼都要學會一種才能在現在的職場達到最低門檻,在這邊推薦我覺得不錯的 Vue 跟 React 的課程。

Vue :

  1. 首先是 Alex 宅幹嘛 這位實況主所錄製的 Vue.js 手牽手,一起嗑光全家桶 的系列教學影片,透過幽默風趣的教學,帶你一步步學習 Vue.js 的入門課。
  2. 還有就是由我自己本人開設的 Vue3 高效入門與實踐用最新的Vue3來進行授課 !!!

Step5.5:前端自動化工具(選修)

隨著前端技術的發展,使用第三方工具或套件輔助專案開發已經成為業界常態,不但功能全面,涵蓋了編譯,打包與伺服器服務,連三大前端框架的背後也是使用webpack來做編譯,這堂課將由我帶領你學習webpack自動化工具,讓你可以瞭解現代前端透過自動化工具開發網頁的全貌。

  1. 這堂課目前為免費公開課程可以免費註冊觀看

Step6.5:HTML5 canvas 動畫 & 遊戲製作(選修)

要製作HTML5 canvas 動畫或遊戲會讓很多工程師頭痛,早期可以透過Flash製作像這類型的需求,現在的時代 Flash 已死,我們只能透過純codeing的方式來開發HTML5 canvas 相關的需求,不過這邊推薦這堂可以透過Animate CC 這套軟體製作複雜的 Canvas 動畫,然後轉出HTML5格式,整合到自己的網頁裡面做使用,對於以前Flash的使用者來說是非常方便且快速的,也讓我們在開發這類型的需求可以很容易的把動畫跟程式的工作分工給切開。

  1. HTML5+Animate CC 無痛上手網頁動畫與遊戲互動

Youtube直播技術分享

推薦幾個不錯的前端技術youtube,包含我在內其他幾個老師都會不定期的做技術分享與直播跟同學互動,在這些老師的頻道都會找到許多有趣的主題來學習,也請喜歡的這些頻道的朋友記得訂閱加分享,按下小鈴鐺,獲得我們最新的課程消息喔。

  1. CSScoke
  2. Alex 宅幹嘛
  3. Mike Cheng
  4. 偷米騎巴哥

好啦~這次的學習地圖分享就到這邊告一段落,當然前端的技術還有很多,不只我上面列的這些,但是我列出來的這些是給剛入門的新手一個學習的方向,當然最後還是要看同學們的工作需求來決定繼續朝哪個方向來邁進,這邊也附上之前寫的技術清單列表,給同學們做個參考囉~

--

--

Mike
I am Mike

如果有一行code無法解決的bug,那就寫兩行!