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

TechMoon 科技月球

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

  • 科技新知
  • 月球精選
  • 線上工具
  • 虛擬主機
    • Bluehost 主機
    • A2 Hosting 主機
    • 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 優惠折扣
A2 Hosting Coupon
3 分鐘閱讀

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

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

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

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

目錄
  1. 1. Practice.dev 簡介教學
    1. 1.1. 加入免費會員
    2. 1.2. 選擇挑戰課程
    3. 1.3. 查看挑戰範例
    4. 1.4. Demo 影片教學
    5. 1.5. 測試標準
    6. 1.6. 其他挑戰者答案
    7. 1.7. 課後討論
    8. 1.8. 提交答案
  2. 2. 你可能有興趣
  3. 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 年 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 程式碼

更多相關文章

  • 2021 年該如何申請註冊網域?如何購買最便宜的網址?一篇從購買網址、網域設定到管理的完整教學!
  • Iconstore - 高畫質免費 Icons 圖標庫,234+ 個圖標集合包,CC0 可免費作為商業用途
  • 14 個最佳 WordPress Cache Plugins 緩存快取外掛推薦 - 2020 免費/付費通通有
  • On-page SEO 網站優化 - 改善內容提升排名的秘訣
  • 該如何選擇網域名稱?7 個最佳域名申請技巧、費用與域名註冊商
  • Heroicons - 免費商用 Icons SVG 線上圖標,可直接在 HTML 中使用 CSS 類別元素顯示 Icons
  • Tabler Icons - 超過 558+ 高品質圖標 SVG 格式免費下載,MIT 授權可線上客製化圖示樣式
  • SVG Repo - 免費 SVG 圖標與向量圖示免費下載,高達 300,000+ 的免版權可商用圖標集任你下載
  • SugarHosts 主機評價(2021 年 4 月)- 糖果主機 6 折優惠碼一鍵安裝 WordPress,使用超過 4 年的虛擬主機推薦經驗與教學
  • 【WordPress SEO 外掛】 11 個 WordPress SEO Plugins 最佳推薦外掛(2020)
  • 【2020 最新】15 個最佳 WordPress Newsletter 電子報訂閱外掛
  • Iconhub - 免費自定義線上圖標 Icons,提供 6 種不同樣式與上千種 Icons 可做商業用途使用

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

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

關於 Sliven

每日分享科技新知、免費資源以及 WordPress、虛擬主機相關主題,任何問題歡迎在科技月球下方留言,或是發送 Email 至 [email protected] 與我聯繫。

讀者互動

發佈留言 取消回覆

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

Primary Sidebar

追蹤我們

站內搜尋

最新文章

  • Mirrored.to – 整合多款免費雲端空間上傳服務,只需上傳一次即可批次將檔案上傳至多個鏡像免空
  • ProductShot – 免費上圖片局部放大產生器,幫助你凸顯圖片中的重點區塊並支援複製上傳下載功能
  • Whyp.it – 免費音樂雲端上傳空間,免註冊即可上傳音樂並即時線上高音質播放
  • 【WordPress 付費主題免費下載】Bethlehem – Church WordPress Theme
  • 【WordPress 付費主題免費下載】Anada – Data Science & Analytics Saas WordPress Theme
  • 【WordPress 付費主題免費下載】Yoome – Modern WooCommerce WordPress Theme
  • 【WordPress 付費主題免費下載】Cindy – Accessible Local Government WordPress Theme
  • Upload.cc – 老牌免費圖片上傳雲端空間,上限 5 MB 無需註冊永不刪檔支援批量圖片上傳功能
  • Blobs – 線上免費產生 Blobs 圖形,可調整大小形狀、漸變顏色並產生 SVG 格式與支援 Flutter 程式匯入
  • BackgroundCut – 最佳免費線上去背工具,採用 AI 技術處理刪除複雜背景並產生高解析度去背後圖片
Bluehost best deal from TechMoon $2.95/月
Bluehost 獨家優惠
現在透過 TechMoon 專屬優惠折價券購買 Bluehost 主機,享有每月 $2.95 美元的獨家超低優惠價格,要搶要快!
自動套用優惠
立即購買!

熱門內容

  • GiftofSpeed - 免費線上檢測網站載入速度,瀑布流展示各項資源載入情況與優化建議
  • On-page SEO 網站優化 - 改善內容提升排名的秘訣
  • Google Translate 介面大改版,提供更好的使用者操作介面
  • Emblemicons - 免費開源圖標 Icons,高達 1000+ 個產品開發、設計與業務展示的圖標樣式免費下載
  • Education.com - 超過三萬個免費線上資源,讓小孩在玩樂中也能輕鬆學習!
  • Animated icons by Icons8 - 900+ 免費線上動畫圖標,提供 GIF、JSON 與 AE 格式免費下載可商用動畫圖示
  • Unicons Solid - 3300+ icons 免費線上圖標庫,多達 27 種類別與 3 種樣式免費開源下載
  • 【WordPress SEO 外掛】 11 個 WordPress SEO Plugins 最佳推薦外掛(2020)
  • CSS.GG - 700+ 開源免版權圖標免費下載,支援 Figma 格式檔案,並提供 .css、.svg、.tsx、.fig、.xd、.json、.xml 格式下載
  • mkcert - 讓你在 Localhost 與 IP 環境中也能安裝 SSL 證書,啟用 HTTPS 協議

相關文章

  • MyStockPhotos – 1222+ CC0 可商用圖片免費下載,提供多種圖片尺寸的免費圖庫
  • Pexels – 可以任意使用的線上免費圖庫,支援中文關鍵字搜尋,可用於商業用途且無需附上來源的 CC0 授權方式
  • SVGOMG – 可複製貼上 SVG HTML 程式碼,壓縮優化 SVG 檔案大小與下載 SVG 檔案
  • BackgroundCut – 最佳免費線上去背工具,採用 AI 技術處理刪除複雜背景並產生高解析度去背後圖片
  • Focusli – 線上背景聲音幫助你集中精神與放鬆身心,可組合高達 8 種聲音與咖啡廳或大自然聲音
  • PDF.new – Adobe 攜手 Google 提供「.new」相關 PDF 免費線上轉檔服務
  • Feather Icons- 超過 200+ 個系統常用圖示免費下載,不僅開源還可線上調整圖示大小粗細與顏色!
  • Iconstore – 高畫質免費 Icons 圖標庫,234+ 個圖標集合包,CC0 可免費作為商業用途
  • 2020 改變自我 – 10 個觀念幫助你培養好習慣
  • Color Palette Generator – 免費線上調色盤產生器,一鍵自動產生 5 種搭配套色,並提供顏色代碼與一鍵複製顏色色碼!
Bluehost 虛擬主機 4 折 60% OFF 優惠折扣
A2 Hosting Coupon
TechMoon 科技月球 © 2021.
Theme by StudioPress
DMCA.com Protection Status
  • 免責聲明