Practice.dev 是一個免費開源的線上教學平台,裡面提供了各種前端與後端的挑戰練習,能夠讓初學者輕鬆的一步步學習各種情境下完成前端設計或後端程式編碼的技巧,讓你做中學,學中做。
Practice.dev 的主要提供對象是初級開發人員,沒有經驗的程式設計師往往很難獲得一份實際的工作,也無法接觸到實際的開發過程。因此,無論你是初學者、初級開發人員,甚至是資深的開發人員,都能夠透過此平台學習各種模擬實務上會遇到的各項功能開發的情境,並一步步學會解決這些問題。
Practice.dev 提供了許多面相的專業技能,例如:路由、驗證、錯誤處理、身份驗證、商業邏輯驗證…等等。和其他線上教育平台,像是「Udemy」不同之處在於,對於初學者來說,「Practice.dev」的挑戰會比較難一些,但取而代之的是,你可以立即的進入狀況,並藉由適度的挑戰,獲得更多的經驗與技巧。
網站名稱:Practice.dev
網站網址:https://practice.dev/
Practice.dev 簡介教學
第 1 步
加入免費會員
要開始學習之前,要先註冊免費會員並登入,放心,它是 100% 永久免費的線上開源學習平台:

你可以透過 Email 信箱註冊,或是直接使用 GitHub 帳號、Google 帳號直接登入:

第 2 步
選擇挑戰課程
註冊並通過驗證後,你就可以前往挑選你想要學習的挑戰課程。點選「SOLVE」就可以進入該挑戰,查看更多的細節:

進入挑戰之後,首先可以看到該挑戰主要是要幫助你學習與解決哪個主要的問題:

第 3 步
查看挑戰範例
在每一個挑戰課程當中,它都會提供你一個正確解答的完整版內容,你可以直接在頁面中演示成果。此外,它還會提供你完整的 HTML 檔案與 CSS 樣式表:

第 4 步
Demo 影片教學
除了完整的開源程式碼之外,每個挑戰也都會提供 Demo 的影片展示,以及如何在「CodeSandbox.io」或「localhost」當中實現挑戰的內容,你可以根據影片教學來進行操作:

第 5 步
測試標準
你可以點選上方的「Test Suite」來了解最終測驗所評估的方面有哪些部分,評分的標準就是寫在這裡:

第 6 步
其他挑戰者答案
點選「Solutions」標籤後,你就可以看到其他完成這個挑戰的人,他們所提交的原始程式碼:

你可以在這裡看看其他人是怎麼完成這道挑戰的,或許能帶給你不一樣的邏輯思維。
第 7 步
課後討論
你可以在「Discussion」標籤中與其他人一同分享與討論自己的想法:

第 8 步
提交答案
Practice.dev 是以自動化方式自動幫你進行評估,剛剛有提到所有的挑戰都可以使用「CodeSandbox.io」進行模擬環境,或者你也可以使用自己的「localhost」完成環境的部署。
無論如何,最終你都會有一個網址,能夠讓別人訪問並查看驗證你的程式碼。因此,當你完成後,點選右上方的「SUBMIT」按鈕,就可以輸入網址,系統就會自動驗證你的程式碼是否通過挑戰:

如果你想要了解更多線上學習平台,透過線上學習來增進自己的技能,那麼你可以參考:Udemy。

Practice.dev 評價推薦優點
- 終身 100% 免費線上開源
- 線上即時實作教學與檢驗
- 提供原始檔與 Demo 影片
- 不斷添加新的免費課程
你可能有興趣
- 超過 40 個線上學習網站 – 網頁設計、程式語言、各種領域線上課程免費/付費資源索引
- (2021 年 4 月)Udemy 免費課程優惠碼 – 付費課程限時折扣 0 元免費線上學習
- Mirrored.to – 整合多款免費雲端空間上傳服務,只需上傳一次即可批次將檔案上傳至多個鏡像免空
- ProductShot – 免費上圖片局部放大產生器,幫助你凸顯圖片中的重點區塊並支援複製上傳下載功能
- Whyp.it – 免費音樂雲端上傳空間,免註冊即可上傳音樂並即時線上高音質播放
- Upload.cc – 老牌免費圖片上傳雲端空間,上限 5 MB 無需註冊永不刪檔支援批量圖片上傳功能
- Blobs – 線上免費產生 Blobs 圖形,可調整大小形狀、漸變顏色並產生 SVG 格式與支援 Flutter 程式匯入
- BackgroundCut – 最佳免費線上去背工具,採用 AI 技術處理刪除複雜背景並產生高解析度去背後圖片
- CSS Gradient – 線上產生線性漸變背景,提供 5 種漸變模式與可客製化顏色與色段區間並產生 CSS 程式碼
- Cool Backgrounds – 免費背景線上產生器,快速建立三角抽象、多線條、漸變與渲染的豐富背景
- Trianglify.io – 線上多邊形圖片背景產生器,可客製化圖片的大小顏色與多邊形樣式並免費下載
- Neumorphism CSS Generator – 新擬態風格圖形樣式產生器,線上客製化最新軟 UI 風格與產生 CSS 程式碼
如果你喜歡這篇文章,請幫我們將這篇文章分享出去。你也可以在 Facebook 與 Instagram 上按讚追蹤我們,也歡迎加入 Facebook 粉絲團和我們一同交流!
發佈留言