大家好，我是來自臺北教育大學玩遊所的碩士生 May，在大學接觸到如何寫網頁後，就毅然踏入了前端這個大坑。

我想學前端，從哪裡開始？然後呢？

變幻莫測的前端技術好像多到怎麼學也學不完，你可能還沒學完一項就又會冒出另一項新的技術。這麼多的技術沒有一個明確的指引，在學程前期我常常會迷失方向，不知道接下來該往哪個技術努力。後來跟著學校的課程學習了不少，才總算是摸清楚前端的架構，大概了解每個技術存在的用意，知道我下一步該往哪個區塊去深入學習。

前端技能樹

Frontend Roadmap 是一個非常值得參考的學習地圖，它列出了前端領域的技術架構和路徑，在你困惑接下來該學什麼時，提供一個輪廓指引，而且每年都會釋出更新版。

取自 Kamran Ahmed 的 Frontend Roadmap 2021

現在你可能對網頁開發有興趣，但尚未開始學習；或者你可能知道要學習網頁基本 HTML、CSS、JS，但卻不知道下一步該往哪走，那前端技能樹對你就是一個非常有用的工具。如果能在一開始就清楚學習之路的輪廓，相信在前端這條路上就能走得不迷惘、學習也會更有效率。

30天的前端技能樹之旅

於是這個系列就是要在30天內，帶領讀者來場小小的前端技能之旅，我會大致根據前端技能樹的流程，摘取幾個比較重要的技術。目標不是完整學習，而是讓讀者能夠基礎了解每個技術存在的意義、如何使用，以及它能夠做到什麼？再延伸提供一些進階學習的方向指引。希望能夠幫助對前端有興趣但不知道從哪裡開始的初新手，能夠有個更好更輕鬆的學習之路。

以下是預計會帶領大家認識的技能，其中有兩個小試身手，會使用前面幾天提到的技術來實作小作品。30天的旅程大致這樣分成兩部分：

前半部

• HTML
• CSS、RWD
• CSS Architecture
• Javascript
• Bootstrap
• Git
• 小試身手 - 靜態網頁

後半部

• npm
• Webpack
• React、Redux
• Styled-components、CSS Module
• 小試身手 - Todolist

小結

我其實也還在前端這條路上學習中，尚未全盤了解這個領域，第一次參加鐵人賽就選了個自己也覺得很難的題目，有點亞歷山大。但我還是拚了，會選擇這麼廣的主題，其實也是希望在寫文章的過程中，能夠同時審視自己的技能，抓到那些被遺漏的知識補回來，並且加深自己的信心。

如果文章中有錯誤的地方，要麻煩各位大大不吝賜教；喜歡的話，也要記得幫我按讚訂閱❤️，接下來的30天就請各位多多指教囉！