# Frontend 前端初學 - 線上工具分享 (freeCodeCamp)
> 今天想來跟大家分享我自己在學習前端路上，覺得對初學者蠻有幫助的三個學習網站。
> 分別是 **[MDN](https://developer.mozilla.org/zh-TW/docs/Learn)、[W3Schools](https://www.w3schools.com/)、[freeCodeCamp](https://www.freecodecamp.org/)**，相信大家應該都不陌生，那就讓我帶你們進一步了解這三個網站的資源可以如何使用吧！

**MDN** 的分享在這邊 👉 [Frontend 前端初學 - 線上工具分享 (MDN)](https://hackmd.io/@emma-huang/BkKu1PI11x)
**W3Schools** 的分享在這邊 👉 [Frontend 前端初學 - 線上工具分享 (W3Schools)](https://hackmd.io/@emma-huang/rkMnRw8yke)
### freeCodeCamp
**freeCodeCamp** 本身也是需要註冊會員的，完成註冊後進到首頁，可以點擊 **Get Started** 開始使用：
進來之後可以選擇要學習的主題，這邊以「***Legacy JavaScript Algorithms and Data Structures***」為例：
像我已經有學習進度的話，也可以看到 ***目前課程進度 / 總進度***，已經完成的部分也有標示以利辨識唷！
### 學習區塊分享
進一步來看看 **freeCodeCamp** 的學習介面，我個人覺得他的介面做得蠻完整的，下方以條列式與大家分享：
* 左上方粉色區塊是**功能說明、實作說明**的部分
* 右上方藍色區塊是**作答區塊**，可以依照左側指示在此作答進行練習
* 程式碼作答完畢後，可以點擊左側的 **Run the Tests** 來跑測試做為提交前確認
* 同時也可以在左下方黃色區塊看到系統幫我們事先寫好的**測試內容**
* 並且我們的**測試結果**可以在右下方橘色區塊查看到

作答正確後就會看到以下畫面，接著就可以點擊 **Submit and go to next challenge** 進到下一個關卡囉繼續學習囉！

### 提示與解答
不過如果在作答的時候遇到困難，**freeCodeCamp** 也有提供 **提示** 以及 **說明影片** 可以做參考：
其中的 **Get a Hint** 可以查看到答題說明的進一步解釋，並且提示你可以如何下手答題
但若是覺得提示還是無法幫助到你，也可以直接查看 **Solutions** 看看系統幫我們寫好的答案來進一步作參考：

以上就是關於我在使用 **freeCodeCamp** 的學習分享，如果有更多不同的使用方式都歡迎大家與我分享！