Frontend Mentor 前端切版練功坊：用實作來逃離 tutorial hell 吧！

Kelly CHI

10 min readOct 10, 2022

所有程式初心者(包含我自己)，一定都有經歷過以下的狀況：

看了n小時教學影片，抄了筆記，認為自己已經將內容百分百吸收了。但當你打開VScode，要從頭開始建立一個專案時，完了，你的腦中一片空白。此時，你在google上面盲目尋求解答，第一個搜尋結果是一部教學影片，你直覺地打開筆記繼續抄寫重點…

結論是，妳看了n+n小時的影片，卻還是甚麼都沒辦法做出來…

這個，就是俗稱的 “tutorial hell (教學影片地獄)”。

💡實作是逃離tutorial hell的唯一方法

網路上有很多如何逃離tutorial hell的文章，但結論八九不離十都在強調實作的重要性。就像廚藝，把食譜一字一句背下來卻沒親自下廚過，是很難讓人相信你是真正會煮飯的人的。

以實作為核心的學習資源有很多，最知名的有 The Odin Project、Javascript30 等等 ( 可以參考Mike大大的文章：什麼是切版？切版練習的方式與工具 )，在這邊我要跟大家推薦一個較少有中文介紹的網站：Frontend Mentor。

Frontend Mentor 網站簡介

由前端工程師 Matt Studdert 所創立，旨在提供前端學習者專業的練習素材與社群交流。平台至今已有四年多的歷史，仍然不斷在成長茁壯，網站也持續在優化當中。(btw，好奇搜尋了一下創辦人的背景，居然是健身教練出身的！)

網站所提供的挑戰分為五個等級：

newbie (新手)、junior (初階)、intermediate (中級)、advanced (高級)、guru (專家)。

因此，不論你是剛開始接觸程式的小白，或是需要磨練功力的中階學習者，都可以在Frontend Mentor找到符合需求的挑戰。

最棒的是，這些挑戰都搭配了精美的專業設計圖 (包含手機版本、平板版本和桌面版本)，以及所有需要的用到的素材 (插圖、icon、色票、字型設定等等)，讓對設計一竅不通的前端學習者可以專心在程式的撰寫，而非思考設計細節。(同時也較接近現實世界的workflow)

開始你的第一個挑戰

話不多說，就讓我們開始來進行挑戰吧！

在開始之前，必須先用github帳號登入 (因為上傳挑戰時需要提供repo和demo連結)。還沒有github帳號的人，可以參考 GitHub 註冊教學來建立自己的帳號！

1️⃣ Step 1 下載挑戰

登入之後，進到 challenges列表 當中，選擇一個自己看得順眼的挑戰。每個挑戰都有標明難易度，以及是否需要premium權限才可進行挑戰 (須付費)。可以利用旁邊的按鈕以難易度做篩選。

選擇完以後，進到挑戰說明，讀完之後按下 “start challenge”。

點擊開始之後會進入到 challenge hub，下面會有一些更詳細的挑戰說明。閱讀完後，點選 “download starter” 下載一個含有JPG設計圖、照片、icon、readme檔等等的 starter 包。

接著就可以打開 VScode (或是任何一款你喜歡的編輯器) 開始 happy coding 啦！

2️⃣ Step 2 進行挑戰

前面有提到，新手學習者時常會陷入tutorial hell的狀況，看了n部影片之後還是什麼都做不出來，而Frontend Mentor的挑戰，就是要強迫你面對這個一片空白，練習「靠自己」找到答案。

當然，人總是要從自己的錯誤或是從他人的經驗中學習，若真的想破頭不知道該怎麼做，觀摩其他人的作品也是完全沒有問題的。(後面一段會繼續說明，如何從實做中學習)

3️⃣ Step 3 上傳挑戰

在費盡千辛萬苦之後，你終於完成了挑戰！🎉 但是要如何知道自己的挑戰有沒有成功呢？那就是要上傳給網友觀摩一下啦。

由於上傳時會需要提供 github repo 和 live demo 的連結，所以在完成挑戰後，首先要做的事情就是把檔案上傳到github上面。

關於如何使用git和github，這邊先不贅述，請參見高見龍老師的：為你自己學git。

備註：我不想要每有一個新的挑戰就開新的repo，我的做法是把所有的挑戰整理到同一個repo當中，這樣要一次全部瀏覽也較容易。

利用github的pages功能可以很快速方便的產生live demo，除了github pages之外還有 Netlify 也是一個常用的靜態網站hosting服務。

👉 目前找到最簡潔的教學：從零開始用github架設靜態網站入門(5) — 部署到Github Pages

完成github上傳後，回到challenge hub，點選右邊的 “submit solution”。

除了輸入標題、repo連結、live demo連結之外，也可以在下面留下自己在挑戰過程中所遇到的困難，熱心網友可能會針對你的問題提供建議。

在 solution 頁面，最有趣的莫過於比較挑戰成果與設計圖之間的差異。左右拉動中間的紅色圓球(?)，很容易發現自己在過程當中疏忽的一些細節。

到這邊，其實挑戰的主要部分已經都完成了，但 Frontend Mentor 所提供的不只這些，活躍的社群可以讓你進步得更快！

如何從實作中學習

以下談談幾個我自己在實作過程當中曾經出現的狀況，以及遇到這些狀況時該怎麼辦，該如何才能確保自己在實作中是真正有進步的。

❗Situation 1 卡關了怎麼辦

想破頭還是不知道該怎麼把某個細節、某樣功能實作出來，該怎麼辦？點選 “Solutions”，可以看看其他人完成挑戰的方法。小麻煩的是這邊沒辦法以搜尋來過濾挑戰，所以要自己慢慢找。

找到想參考的作品之後，點選 "view code" 查看別人的原始碼。

另外，Frontend Mentor有一個很活躍的Slack社群，若在挑戰過程中遇到任何問題，都可以在社群中提問。基本上只要是認真的問題，社群裡的大家 (包含與你一樣的學習者和業界的前端工程師們) 都很樂意協助你。

❗Situation 2 不確定做法對不對

在上傳挑戰之後，通常很快會有人在下面給予回饋 (最快速度不到30分鐘就有人來留言了！)，可以從網友的回覆中學習到很多實用的tips。

在登入之後的 home 頁面中間有一個 “My feed”，這裡會持續推播你曾經做過的挑戰的新的solutions。參考網友的做法以及他人對該solution的回饋，也是學習的好方式 (畢竟每個人得到的回饋都有點不同)。

觀摩並實際操作幾次之後，慢慢會看出哪些方法是較好的，從而可以將這些優點融入自己下一次的挑戰中。

❗Situation 3 我到底有沒有在進步？

做了幾個類似的挑戰之後忽然覺得，疑？我好像只是一直在重複做同樣的事，速度是有變快了，但我真的有在進步嗎？

實作在學習的過程中固然重要，但前提是有一定的知識輸入，如此一來才能在實作中將腦海中的知識轉化為技能。比如說，我今天看了一個影片學到了 CSS custom properties 或是 CSS Grid，那我就可以主動把學習到的知識落實在下一個挑戰當中。或是我今天學習了一個新的框架B，雖然某挑戰我已經用框架A完成了，但我可以試著用那個新的框架再實作一次。

在建議的 README 模板中，可以記錄每一次的挑戰用了哪些技術。除了讓閱讀專案的人更清楚理解專案的實作方式之外，也是一個給自己的reminder，督促自己在每一次的挑戰中不斷精進。