# Frontend 前端初學 - 線上工具分享 (W3Schools)
> 今天想來跟大家分享我自己在學習前端路上，覺得對初學者蠻有幫助的三個學習網站。
> 分別是 **[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
不知道大家平常都是如何使用 W3Schools 的資源呢？
我自己初期使用 W3Schools 比較像是 MDN 那樣，像是在看技術文件類型的網站。
不過後來發現大多數的功能閱讀到下方都會有一個類似練習的區塊，點進去會發現其實 W3Schools 有做一個蠻完整的練習題目可以逐一功能去做學習與測驗！

### 記錄學習進度
若是想記錄自己的學習進度，也可以註冊成為 W3Schools 的會員，登入後點擊右上角的頭貼，接著進到左側 **My Learning** 就可以查看目前的學習進度喔！
進到其中一個學習進度中，可以看到左側功能欄位會有***綠色的線***，表示已經看過的功能，***灰色的線***表示還沒看過的部分。點擊下方的 **Submit Answer** 可以接著進到專門練習的頁面（如下一張圖）
進到專門練習的頁面可以看到左側也有使用「V」標記已經完成練習的功能，整體設計我個人覺得是還蠻直覺好用的！

### Practice & Interview Practice
除了基本的功能練習外，在個人頁面左側還有一個 Practice 可以進一步來做練習。
進來之後可以選擇 ***Interview*** 或是 ***Code Quiz***：
* **Code Quiz**
我們先來看看 ***Code Quiz*** 的部分，先選擇想要練習的主題：
下一步可以選擇 **難易度**：
有 Beginner、Intermediate、Advanced 還有 Professional 四種可以做選擇，完成設定後就可以開始測試了！
***Code Quiz*** 的題型會有單選題、複選題、填空題等多種題型可以做練習
* **Interview Practice**
接著是 **Interview Practice** 的部分
首先我們可以先選擇要面試的職位：
接著一樣可以選擇難易度，以及與你面試的對象如：HR、Team Lead、Technical Expert：
開始後就會透過類似 AI 機器人對話的方式進行面試練習：

> 這邊也想跟大家分享我很喜歡的一句話：「我們人不會知道自己不知道的事」
> 在使用 **W3Schools** 學習的時候，我算是逐一功能去看去練習，也從中學到很多我之前沒有用過的功能，所以覺得非常有收穫！

以上就是我自己在使用 **W3Schools** 相關資源的方式給大家做學習參考，若有更多的隱藏使用方式也歡迎與我分享！

接著也歡迎大家繼續閱讀 [Frontend 前端初學 - 線上工具分享 (freeCodeCamp) ](https://hackmd.io/@emma-huang/rJJ7xeFy1l)來看看我為大家整理的使用方式吧！