###### tags: `前端技能樹`

<!-- <style>
.markdown-body h2 {
border: none;
margin-bottom: 10px;
}
</style>
-->

# 前言

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

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

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

### 前端技能樹

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


> 取自 Kamran Ahmed 的 [Frontend Roadmap](https://github.com/kamranahmedse/developer-roadmap)

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

## 30天的前端技能樹之旅

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

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

### 前半部

- Git
- HTML
- CSS
- CSS Architecture
- Javascript
- Bootstrap
- 番外篇之小試身手 - 靜態網頁

### 後半部：進入稍微進階一點的領域

- npm
- Webpack
- React、Redux
- Styled-components、CSS Module
- 番外篇之小試身手 - Todolist

## 小結

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

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