課程學習地圖

因為有許多同學反映光憑課程標題看不太出來學習路線應該是什麼，因此在這邊稍微講一下課程安排的順序。

其實順序或是學習地圖可以先看這兩個資源：

  1. 紮實的網頁前端學習路線與資源推薦
  2. 程式導師實驗計畫第四期課綱

上面這兩個資源裡面也都有提到這邊的課程，可以先大概看一下。

底下的話我稍微講一下學習的順序為何，另外我必須先提醒大家一下，如果想要完整地學習，在看課程之餘必須自己做練習，練習的主題你可以參照上面的課綱裡的作業，試試看能不能自己把那些作業寫出來。

目前的課程大概可以分成四個種類：

  1. 新手入門之共同基礎（在開始寫程式前可以學一下的）
  2. 程式基礎（教你怎麼寫程式）
  3. 前端基礎（教你怎麼寫前端網頁）
  4. 後端基礎（教你怎們寫後端網頁）
  5. 前端進階（如何使用 React 寫前端網站）
  6. 後端中階（使用後端框架 Express 寫網站）

新手入門之共同基礎

這個分類底下一共有四門課：

  1. [CMD101] Command Line 超新手入門
  2. [GIT101] Git 超新手入門
  3. [CS101] 初心者的計概與 coding 火球術
  4. [NET101] 網路基礎概論（搭配 JS 實作練習）

第一門是最重要的，會帶你使用 command line，讓你學會用指令去操作電腦，這個之所以重要是因為日後會碰到很多需要用到 command line 操作電腦的場合，所以這個一定要會。

接著 [GIT101] Git 超新手入門這堂課則是教你使用版本控制，並且讓你學會怎麼把程式碼上傳到 GitHub 去，上傳到那邊以後他有一個 GitHub Pages 的功能可以讓你看到上傳後的網頁並且把連結分享給朋友們。

[CS101] 初心者的計概與 coding 火球術則是比較理論性的課程，幾乎沒有實作，會跟你講一些計算機概論相關的東西，讓你對相關的知識比較清楚。有些人會覺得從這堂課入門可以先有一些基礎知識，但也有些人認為從這個入門太無聊。

如果你覺得太無聊的話，我建議可以等到上其他課程然後有相關知識出現的時候，再回來補相關的章節就好了。

[NET101] 網路基礎概論（搭配 JS 實作練習）則是與網路相關的課程，這邊我也建議你可以等之後需要了解網路相關概念的時候再回來補就好。

總結以上，新手入門的話要修的第一堂課是 [CMD101] Command Line 超新手入門，第二堂我建議是 [CS101] 初心者的計概與 coding 火球術，這堂課裡面也有講到 CMD101 的部分，而且有跟你說寫程式大概是怎樣的一件事情。

再來可以學一下 GIT101，學一下如何操作 Git，然後 NET101 可看可不看，以後回來補也可以。

程式基礎

這個分類底下一共有四門課：

  1. [JS101] 用 JavaScript 一步步打造程式基礎
  2. [JS102] 升級你的 JavaScript 技能：ES6 + npm + Jest
  3. [ALG101] 先別急著寫 leetcode

前面新手入門的部分學完之後，可以開始寫程式囉！這邊建議先上的是 JS101，因為裡面會帶你熟悉 JS 的基本語法，讓你知道怎麼用 JS 寫程式。上完之後看 JS102，會帶你用一個叫做 npm 的東西，可以安裝許多套件幫助寫程式，也會學習比較新的語法以及用 Jest 來寫單元測試。

最後則是 ALG01，繼續把自己的程式基礎打好，寫一些題目來增加對 JS 的熟悉程度。ALG101 其實之後再補也可以，主要是針對 JS 的基礎再去做練習，如果你覺得無趣的話也可以先跳到下一個部分前端基礎，但我還是強烈建議先修這個啦。

前端基礎

學完程式之後，就可以開始來正式寫網頁囉！這邊有四堂課：

  1. [FE101] 前端基礎：HTML 與 CSS
  2. [FE102] 前端必備：JavaScript
  3. [FE201] 前端中階：那些前端會用到的工具們
  4. [FE210] 從新手到中手：前端工程加強班

這四堂課前兩堂要按照順序修，先學習怎麼用 HTML + CSS 寫出網頁，然後再透過 FE102 學習怎麼樣把之前學到的 JS 用在網頁上面，去操控網頁上的元素。

前兩堂課學完之後就有基本的網頁前端概念了，接著透過後兩堂繼續加強，要從哪個先開始都可以，[FE210] 從新手到中手：前端工程加強班是比較早期的課程，會透過不斷改善同一個專案磨練自己的前端技巧，而裡面講到的一些東西在 [FE201] 前端中階：那些前端會用到的工具們中也會提到，所以這兩堂課可以說是互補的。

這四堂修完之後，前端應該就有一定的基礎了。

再來你可以選擇要繼續往前端精進，還是先學一點後端，我是建議先學一點後端啦。

後端基礎

網頁畢竟是前後端一起組成的，只會前端不會後端的話，是沒有辦法理解整個網頁的運作的。

如果想要學一點後端的話，目前有的後端基礎課程是：[BE101] 用 PHP 與 MySQL 學習後端基礎，可以透過這門課學到後端的基礎概念。

前端進階

前面都學完之後，就可以又跑回來後端學習更多東西囉！這邊主要有四堂課：

  1. [JS201] 進階 JavaScript：那些你一直搞不懂的地方
  2. [FE301] React 基礎（class component 版）
  3. [FE302] React 基礎 - hooks 版本
  4. [FE303] React 的好夥伴：Redux

第一堂 JS201 其實滿重要的，可以帶你釐清一些 JS 的核心觀念，對之後面試其實很有幫助。不過在看這堂課之前也建議你可以先看大家很推薦的在 udemy 上面的 JavaScript: Understanding the Weird Parts，再回來看堂課，可以達到相輔相成的效果。

之所以會想讓大家先回去補這些基礎跟核心概念，是因為沒有這些的話容易在框架中迷失，補好之後就可以進入到框架了。

這邊有兩堂很像的課 FE301 跟 FE302，這兩堂都叫做 React 基礎，之所以會這樣是因為 React 前兩三年做出了一個滿大的改動，新的 FE302 是新的版本，FE301 則是舊的。但因為舊的也還沒有完全被淘汰，所以目前來說還是有學習的必要。

我會建議你從 FE302 開始看，如果卡住再回去看 FE301，最理想的狀況是兩堂都要看完，把舊的新的都學一遍，其實概念也會比較清楚一點。

學習到這邊之後其實 React 的基礎就已經有了，接下來這堂課其實是選修，[FE303] React 的好夥伴：Redux，這堂課會教你使用 Redux 這個東西去管理狀態。

後端中階

如果想要學習更多後端的東西，可以上：[BE201] 後端中階：Express 與 Sequelize，會教你用現代框架來做出後端的網站。

以上大概就是目前 Lidemy 有的課程以及我們推薦的學習順序，在學習的時候光憑這邊的課程其實是不夠的，你還要額外再尋找其他資源來當作輔助，也要自己動手下去實作，才能有比較良好的學習成效。

有什麼問題都可以到 Lidemy 討論區詢問，祝學習順利！