• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
TechMoon 科技月球

TechMoon 科技月球

免費工具、WordPress、虛擬主機、 科技前端

  • 科技新知
  • 月球精選
  • 線上工具
  • 虛擬主機
    • Bluehost 主機
    • SiteGround 主機
  • WordPress
    • WordPress 教學
    • WordPress 主題
    • WordPress 外掛
  • 免費資源
  • 優惠資訊
  • 自我提升
    • Excel 教學
    • 網路行銷
  • Udemy 免費課程
  • 虛擬主機總覽
目前位置: 首頁 / 免費資源 / Practice.dev – 免費線上學習前後端程式語言,邊做邊學適合初學者的開源線上學習平台
Practice.dev - 免費線上學習前後端程式語言,邊做邊學適合初學者的開源線上學習平台

Practice.dev – 免費線上學習前後端程式語言,邊做邊學適合初學者的開源線上學習平台

Last Updated on 2020-07-22 By Sliven Leave a Comment

Bluehost 虛擬主機 4 折 60% OFF 優惠折扣
SiteGround 主機 3 折優惠 + WordPress 一鍵安裝完整教學
3 分鐘閱讀

Practice.dev 是一個免費開源的線上教學平台,裡面提供了各種前端與後端的挑戰練習,能夠讓初學者輕鬆的一步步學習各種情境下完成前端設計或後端程式編碼的技巧,讓你做中學,學中做。

Practice.dev 的主要提供對象是初級開發人員,沒有經驗的程式設計師往往很難獲得一份實際的工作,也無法接觸到實際的開發過程。因此,無論你是初學者、初級開發人員,甚至是資深的開發人員,都能夠透過此平台學習各種模擬實務上會遇到的各項功能開發的情境,並一步步學會解決這些問題。

Practice.dev 提供了許多面相的專業技能,例如:路由、驗證、錯誤處理、身份驗證、商業邏輯驗證…等等。和其他線上教育平台,像是「Udemy」不同之處在於,對於初學者來說,「Practice.dev」的挑戰會比較難一些,但取而代之的是,你可以立即的進入狀況,並藉由適度的挑戰,獲得更多的經驗與技巧。

網站名稱:Practice.dev
網站網址:https://practice.dev/

目錄
1. Practice.dev 簡介教學
1.1. 加入免費會員
1.2. 選擇挑戰課程
1.3. 查看挑戰範例
1.4. Demo 影片教學
1.5. 測試標準
1.6. 其他挑戰者答案
1.7. 課後討論
1.8. 提交答案
2. 你可能有興趣
3. 更多相關文章

Practice.dev 簡介教學

第 1 步

加入免費會員

要開始學習之前,要先註冊免費會員並登入,放心,它是 100% 永久免費的線上開源學習平台:

加入免費會員
加入免費會員

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

使用信箱註冊或是透過 Github、Google 帳號直接註冊登入
使用信箱註冊或是透過 Github、Google 帳號直接註冊登入
第 2 步

選擇挑戰課程

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

點選「SOLVE」按鈕即可進入挑戰課程內容
點選「SOLVE」按鈕即可進入挑戰課程內容

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

查看該挑戰主要解決問題
查看該挑戰主要解決問題
第 3 步

查看挑戰範例

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

每個挑戰都會展示成果,並提供原始完整的 HTML 程式碼與 CSS 樣式表
每個挑戰都會展示成果,並提供原始完整的 HTML 程式碼與 CSS 樣式表
第 4 步

Demo 影片教學

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

每個挑戰都會有 Demo 成果展示影片與教學操作的影片
每個挑戰都會有 Demo 成果展示影片與教學操作的影片
第 5 步

測試標準

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

Test Suite 會表明該挑戰所要測試的部分
Test Suite 會表明該挑戰所要測試的部分
第 6 步

其他挑戰者答案

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

「Solutions」標籤會顯示所有挑戰者完成的原始程式碼
「Solutions」標籤會顯示所有挑戰者完成的原始程式碼

你可以在這裡看看其他人是怎麼完成這道挑戰的,或許能帶給你不一樣的邏輯思維。

第 7 步

課後討論

你可以在「Discussion」標籤中與其他人一同分享與討論自己的想法:

在「Discussion」標籤中留言,與其他人分享、交流
在「Discussion」標籤中留言,與其他人分享、交流
第 8 步

提交答案

Practice.dev 是以自動化方式自動幫你進行評估,剛剛有提到所有的挑戰都可以使用「CodeSandbox.io」進行模擬環境,或者你也可以使用自己的「localhost」完成環境的部署。

無論如何,最終你都會有一個網址,能夠讓別人訪問並查看驗證你的程式碼。因此,當你完成後,點選右上方的「SUBMIT」按鈕,就可以輸入網址,系統就會自動驗證你的程式碼是否通過挑戰:

提交你完成的網址,系統將自動驗證是否通過挑戰
提交你完成的網址,系統將自動驗證是否通過挑戰

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

Practice.dev - 免費線上學習前後端程式語言,邊做邊學適合初學者的開源線上學習平台

Practice.dev 評價推薦優點

  • 終身 100% 免費線上開源
  • 線上即時實作教學與檢驗
  • 提供原始檔與 Demo 影片
  • 不斷添加新的免費課程

你可能有興趣

  • 超過 40 個線上學習網站 – 網頁設計、程式語言、各種領域線上課程免費/付費資源索引
  • (2021 年 1 月)Udemy 免費課程優惠碼 – 付費課程限時折扣 0 元免費線上學習
  • 【WordPress 付費主題免費下載】Bufet – Multi Concept Software & App Landing WordPress Theme + RTL
  • 【WordPress 付費主題免費下載】Danni — Minimalist WordPress Blog Theme
  • Free Deca UI Kit – 簡潔 UI Kit 素材免費下載,提供 Figma 與 Sketch 設計軟體格式
  • OFFF.to – 無須註冊免費縮短網址服務,可直接在網址列當中縮短網址並獲得分析數據
  • 【WordPress 付費主題免費下載】Kallem – Creative Portfolio WordPress Theme
  • 【WordPress 付費主題免費下載】GlobeCo – Transportation & Logistics WordPress Theme
  • 【WordPress 付費主題免費下載】Teoro – CV Resume WordPress Theme
  • photoAC – 超過 3 百萬圖片素材免費下載,來自日本的高品質可商用的線上圖庫
  • Speedcheck – 免費線上測速工具,快速測量網路上傳/下載速度與延遲的真實數據
  • YoutubeDLD – 一鍵免費下載 Youtube 影片,在網址加上 DLD 即可 Download

更多相關文章

  • Iconstore - 高畫質免費 Icons 圖標庫,234+ 個圖標集合包,CC0 可免費作為商業用途
  • SugarHosts 主機評價(2021 年 1 月)- 糖果主機 6 折優惠碼一鍵安裝 WordPress,使用超過 4 年的虛擬主機推薦經驗與教學
  • SVG Repo - 免費 SVG 圖標與向量圖示免費下載,高達 300,000+ 的免版權可商用圖標集任你下載
  • GiftofSpeed - 免費線上檢測網站載入速度,瀑布流展示各項資源載入情況與優化建議
  • 該如何選擇網域名稱?7 個最佳域名申請技巧、費用與域名註冊商
  • Unicons Solid - 3300+ icons 免費線上圖標庫,多達 27 種類別與 3 種樣式免費開源下載
  • Iconhub - 免費自定義線上圖標 Icons,提供 6 種不同樣式與上千種 Icons 可做商業用途使用
  • LineIcons - 超過 2000+ 個線形圖標庫,專為設計師與開發人員設計的圖標 Icons 免費下載
  • 【2020 最新】15 個最佳 WordPress Newsletter 電子報訂閱外掛
  • On-page SEO 網站優化 - 改善內容提升排名的秘訣
  • Animated icons by Icons8 - 900+ 免費線上動畫圖標,提供 GIF、JSON 與 AE 格式免費下載可商用動畫圖示
  • 14 個最佳 WordPress Cache Plugins 緩存快取外掛推薦 - 2020 免費/付費通通有

如果你喜歡這篇文章,請幫我們將這篇文章分享出去。你也可以在 Facebook 與 Instagram 上按讚追蹤我們,也歡迎加入 Facebook 粉絲團和我們一同交流!

所屬分類: 免費資源, 自我提升 標籤: Practice.dev, 前端教學, 學習平台, 後端教學, 程式語言, 線上教學

讀者互動

發佈留言 取消回覆

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Primary Sidebar

追蹤我們

站內搜尋

最新文章

  • 【WordPress 付費主題免費下載】Regn | Multi-Purpose WordPress Theme
  • PureVPN – 超好用的 VPN 翻牆工具,超過 180 個國家伺服器,可跨區觀看 Netflix 各國影集
  • 【WordPress 付費主題免費下載】Bufet – Multi Concept Software & App Landing WordPress Theme + RTL
  • 【WordPress 付費主題免費下載】Danni — Minimalist WordPress Blog Theme
  • Free Deca UI Kit – 簡潔 UI Kit 素材免費下載,提供 Figma 與 Sketch 設計軟體格式
  • OFFF.to – 無須註冊免費縮短網址服務,可直接在網址列當中縮短網址並獲得分析數據
  • (2021 年 1 月)A2 Hosting 評價 – 每月 $2.99 美元折扣優惠,WordPress 一鍵安裝虛擬主機推薦高達 66% OFF
  • 如何解決 WordPress 中「目前正在執行另一項更新程序」導致無法升級/更新的問題
  • 【WordPress 付費主題免費下載】Kallem – Creative Portfolio WordPress Theme
  • 【WordPress 付費主題免費下載】GlobeCo – Transportation & Logistics WordPress Theme
Bluehost best deal from TechMoon$2.95/月
Bluehost 獨家優惠
現在透過 TechMoon 專屬優惠折價券購買 Bluehost 主機,享有每月 $2.95 美元的獨家超低優惠價格,要搶要快!
自動套用優惠
立即購買!

熱門內容

  • Heroicons.dev - 線上開源 176+ 個免費圖示,一鍵複製 SVG 格式程式碼直接貼上顯示圖標!
  • 【WordPress SEO 外掛】 11 個 WordPress SEO Plugins 最佳推薦外掛(2020)
  • SVG Repo - 免費 SVG 圖標與向量圖示免費下載,高達 300,000+ 的免版權可商用圖標集任你下載
  • mkcert - 讓你在 Localhost 與 IP 環境中也能安裝 SSL 證書,啟用 HTTPS 協議
  • 【2020 最新】15 個最佳 WordPress Newsletter 電子報訂閱外掛
  • Emblemicons - 免費開源圖標 Icons,高達 1000+ 個產品開發、設計與業務展示的圖標樣式免費下載
  • Heroicons - 免費商用 Icons SVG 線上圖標,可直接在 HTML 中使用 CSS 類別元素顯示 Icons
  • 2020 年該如何申請註冊網域?如何購買最便宜的網址?一篇從購買網址、網域設定到管理的完整教學!
  • Tabler Icons - 超過 558+ 高品質圖標 SVG 格式免費下載,MIT 授權可線上客製化圖示樣式
  • Google Translate 介面大改版,提供更好的使用者操作介面

相關文章

  • Detailed SEO Extension – Google Chrome 免費 Google SEO 分析工具擴充功能
  • Dubox – 百度網盤國際版,1 TB 超大容量不限速上下載僅開放中國地區以外的使用者註冊使用
  • AI Image Upscaler – 免費線上圖片放大工具,採用 AI 技術可快速將小圖無損放大 2、4 倍
  • Animated icons by Icons8 – 900+ 免費線上動畫圖標,提供 GIF、JSON 與 AE 格式免費下載可商用動畫圖示
  • PFPMaker – 免費專業人物大頭貼照片產生器,透過 AI 自動去除背景與美化,可客製化外框樣式與顏色
  • Ionicons – 1200+ 免費精美圖標 Icons 開源下載,專為 Web、iOS、Android、桌面應用程式所開發
  • Image Colorizer – 免費線上圖片色彩優化工具,透過 AI 將黑白圖片進行著色與細節優化
  • Simple Icons – 大量知名品牌圖標 Icons,CC0 可商用免費下載 SVG 向量檔與提供線上 CDN 資源
  • PxHere – 大量免費圖片與照片線上圖庫,提供 CC0 可商用高清素材,並提供 iOS、Android 尺寸可供下載
  • Free Vector Illustrations – 150+ 免費插圖與動態圖片免註冊下載,無須署名且能運用在商業用途使用
Bluehost 虛擬主機 4 折 60% OFF 優惠折扣
SiteGround 主機 3 折優惠 + WordPress 一鍵安裝完整教學
TechMoon 科技月球 © 2021.
Theme by StudioPress
DMCA.com Protection Status
  • 免責聲明