早知道這 28 個(gè)網(wǎng)站就好了

大家好，我是魚皮，經(jīng)常有讀者問我：自學(xué)怎么學(xué)，要學(xué)的知識(shí)那么多，根本記不住怎么辦？

我一般剛開始回答的時(shí)候都是說要多做筆記總結(jié)，更重要的就是要上手敲代碼實(shí)踐，如果拋開任何場景在那學(xué)習(xí)知識(shí)，不光記不住，說不定對知識(shí)應(yīng)用的掌握程度也不夠

另外，學(xué)習(xí)也是需要靠興趣的，希望你們在上手實(shí)踐敲代碼的過程中能感受到樂趣

所以，今天我給大家推薦28個(gè)輔助你學(xué)習(xí)鞏固知識(shí)的網(wǎng)站，讓你邊玩邊學(xué)邊記！

本文大致的目錄結(jié)構(gòu)如下：

• CSS相關(guān)的學(xué)習(xí)網(wǎng)站
• 1 xxxx
• 2 xxxx
• n xxxx
• JavaScript相關(guān)的學(xué)習(xí)網(wǎng)站
• 1 xxxx
• 2 xxxx
• n xxxx
• 其它學(xué)習(xí)網(wǎng)站
• 1 xxxx
• 2 xxxx
• n xxxx

因?yàn)檫@些網(wǎng)站大多都是國外的大佬們做的，所以網(wǎng)頁大多都是英文，為了更好地使用，給你們推薦兩個(gè)翻譯的方式：

• 使用Chrome瀏覽器自帶的翻譯功能，可以中英隨意切換

• 下一個(gè)"Google 翻譯"插件，遇到不懂的英文直接選中點(diǎn)擊翻譯即可

好了，希望英文的存在不要成為你學(xué)習(xí)的障礙（更重要的還是要私底下多背單詞，提升自己的英語水平，畢竟程序員免不了看英文文檔）

一、CSS學(xué)習(xí)網(wǎng)站

1. Flex Box 冒險(xiǎn)游戲

網(wǎng)址：Flex Box 冒險(xiǎn)游戲^[1]

簡介：這是一個(gè)通過使用 flex box 相關(guān)知識(shí)來完成闖關(guān)的冒險(xiǎn)游戲，一共24個(gè)關(guān)卡，更生動(dòng)地帶你體驗(yàn) Flex 的真實(shí)應(yīng)用場景

2. Flexbox 格子騎士

網(wǎng)址：Flexbox 格子騎士^[2]

簡介：這個(gè)游戲能幫助你學(xué)習(xí)不同層面的Flex Box規(guī)范，一共有18個(gè)關(guān)卡，并且你在該游戲中寫CSS類時(shí)，不是用原生寫的，而是用Tailwind，一舉兩得，技能學(xué)習(xí)Flex，又能學(xué)習(xí)Tailwind

3. Flex Box 青蛙??

網(wǎng)址：Flex Box 青蛙^[3]

簡介：游戲中每個(gè)青蛙對應(yīng)不同的關(guān)卡難度，每個(gè)難度對應(yīng)著Flex相關(guān)的知識(shí)點(diǎn)

4. Flex Box 打僵尸

網(wǎng)址：Flex Box 打僵尸^[4]

簡介：這是個(gè)學(xué)習(xí)Flex語法的游戲，每一關(guān)會(huì)有一個(gè)打僵尸的情節(jié)，并給你輸送一個(gè) Flex 相關(guān)知識(shí)，你可以用該知識(shí)進(jìn)行游戲的存活

5. Flex Box 保衛(wèi)戰(zhàn)

網(wǎng)址：Flex Box 保衛(wèi)戰(zhàn)^[5]

簡介：這是一款塔防戰(zhàn)略游戲，它教會(huì)你使用 Flexbox 語法來阻止敵人越過你的防線。

6. Flex語法操縱臺(tái)

網(wǎng)址：Flex語法操縱臺(tái)^[6]

簡介：該網(wǎng)站給你提供了一個(gè)完整的Flex語法修改的操作區(qū)，讓你隨心所欲地嘗試Flex語法

7. Grid 花園

網(wǎng)址：Grid 花園^[7]

簡介：這款游戲包括28個(gè)不同的關(guān)卡，致力于教會(huì)你 CSS Grid 布局

8. CSS Grid 備忘清單

網(wǎng)址：CSS Grid 備忘清單^[8]

簡介：這是一個(gè)可視化和交互式的備忘清單，能幫助你理解 CSS Grid。在右側(cè)網(wǎng)格中選擇一個(gè)框，然后使用左邊欄中的選項(xiàng)和設(shè)置來調(diào)整網(wǎng)格布局的不同部分。

9. Grid 攻擊

網(wǎng)址：Grid 攻擊^[9]

簡介：該游戲包含80個(gè)關(guān)卡，帶你體驗(yàn)類似真實(shí)場景下的網(wǎng)格布局情況

10. CSS 選擇器備忘清單

網(wǎng)址：CSS 選擇器備忘清單^[10]

簡介：該網(wǎng)站是用來測試你對 CSS 選擇器的理解。前面的幾個(gè)相當(dāng)簡單，但是隨著進(jìn)入更高級的選擇器(如使用較少的偽類) ，練習(xí)的難度會(huì)增加。

11. CSS 動(dòng)畫

網(wǎng)址：CSS 動(dòng)畫^[11]

簡介：該網(wǎng)站是一個(gè)功能齊全的學(xué)習(xí)和測試不同 CSS 動(dòng)畫規(guī)范的平臺(tái)。總共32個(gè)部分的課程，有很多預(yù)先建立的圖形，在課程中用作動(dòng)畫的基礎(chǔ)，非常有趣的帶我們學(xué)習(xí)了 keyframe 動(dòng)畫

12. 混合濾鏡

網(wǎng)址：混合濾鏡^[12]

簡介：它允許您使用 CSS 的mix-blend-mode、background-blend-mode和filter。你可以在圖層中添加一個(gè)或多個(gè)你自己的圖片，同時(shí)添加一個(gè)背景顏色，然后調(diào)整設(shè)置，看看不同的值效果如何

13. CSS晚餐

網(wǎng)址：CSS晚餐^[13]

簡介：這個(gè)網(wǎng)站對于 CSS 初學(xué)者或者那些不熟悉高級 CSS 選擇器的人來說是很好的。它允許你隨意使用 CSS 選擇器，并且能看到dom和css的具體情況，這樣你就可以看到圖像和css代碼之間的關(guān)系。

二、JavaScript學(xué)習(xí)網(wǎng)站

1. TypeScript 練習(xí)

網(wǎng)址：TypeScript 練習(xí)^[14]

簡介：這是一個(gè)在線的ts練習(xí)網(wǎng)站，可以練習(xí)使用ts的特性，適合入門以及進(jìn)階的同學(xué)

2. 設(shè)計(jì)模式游戲

網(wǎng)址：設(shè)計(jì)模式游戲^[15]

簡介：專門為懂js但從沒學(xué)過JavaScript設(shè)計(jì)模式的同學(xué)設(shè)計(jì)的網(wǎng)站

3. React 教程

網(wǎng)址：React 教程^[16]

簡介：現(xiàn)在有很多地方可以學(xué)習(xí)react，但此次推薦的這個(gè)網(wǎng)站也是一個(gè)很不錯(cuò)的選擇，這個(gè)網(wǎng)站的獨(dú)特的地方在于它是從一些 JavaScript 概念開始的，這些概念對于理解它們很重要，以便更有效地學(xué)習(xí)理解 React。此外，頁內(nèi)編輯器還提供代碼補(bǔ)全提示功能

4. Untrusted

網(wǎng)址：Untrusted^[17]

簡介：這是一個(gè) JavaScript 的冒險(xiǎn)游戲，你必須引導(dǎo)一個(gè)名叫 Eval 博士的角色穿越不同的迷宮。您可以通過更改和重新執(zhí)行當(dāng)前挑戰(zhàn)中使用的代碼來完成任務(wù)，鍛煉你js能力的時(shí)候到了

5. Promisees

網(wǎng)址：Promisees^[18]

簡介：該網(wǎng)站幫你學(xué)習(xí)Promise相關(guān)知識(shí)。您可以使用這個(gè)小應(yīng)用程序來可視化出promise是如何工作的，以及它們在真正的代碼庫中是如何使用的。

6. JSchallenger

網(wǎng)址：JSchallenger^[19]

簡介：這網(wǎng)站可以讓你通過解決不同的編碼難題來學(xué)習(xí) JavaScript。同時(shí)這里有一個(gè)“最受歡迎”和“最失敗”挑戰(zhàn)的快速列表，更便于你篩選

7. Service Workies

網(wǎng)址：Service Workies^[20]

簡介：該網(wǎng)站用于學(xué)習(xí)開發(fā)漸進(jìn)式 Web 應(yīng)用程序(PWAs)的各種功能

三、其它

1. Git分支學(xué)習(xí)

網(wǎng)址：Git分支學(xué)習(xí)^[21]

簡介：在學(xué)習(xí) Git 這樣的命令行工具時(shí)，常常缺少可視化內(nèi)容。該網(wǎng)站旨在通過使用 Git 倉庫可視化工具、 沙箱 和一系列教育性教程和挑戰(zhàn)，以可視化和交互式的方式對 Git 的不同特性進(jìn)行遍歷，從而解決這個(gè)問題。

2. Select Star SQL

網(wǎng)址：Select Star SQL^[22]

簡介：這個(gè)網(wǎng)站可以讓您學(xué)習(xí) SQL 的概念。這是通過以下指令來完成的，這些指令針對一個(gè)真實(shí)的數(shù)據(jù)集運(yùn)行 SQL 查詢，通過5個(gè)章節(jié)來完成，每個(gè)章節(jié)大約需要30分鐘來完成。

3. 正則

網(wǎng)址：Select Star SQL^[23]

簡介：其類似于正則表達(dá)式的 JSFiddle，但是有一些額外的特性可以幫助我們學(xué)習(xí)構(gòu)建正則表達(dá)式。它包括一個(gè) 正則表達(dá)式 編輯器、一個(gè)由社區(qū)編寫的正則表達(dá)式庫、一個(gè)語法的快速參考，甚至還有一個(gè)交互式測試。

4. SQL 警察局

網(wǎng)址：SQL警察局^[24]

簡介：該網(wǎng)站讓您通過解決犯罪游戲?qū)W習(xí) SQL 語法

5. CodinGame

網(wǎng)址：CodinGame^[25]

簡介：這是一個(gè)功能齊全的學(xué)習(xí)平臺(tái)，允許您學(xué)習(xí)25種以上的編程語言，同時(shí)解決有趣的挑戰(zhàn)。

6. OpenVim

網(wǎng)址：CodinGame^[26]

簡介：該網(wǎng)站教你如何使用 Vim，這是一個(gè)在 Unix 用戶中很流行的多平臺(tái)文本編輯器

7. 正則填字游戲

網(wǎng)址：正則填字游戲^[27]

簡介：該游戲基于填字游戲的挑戰(zhàn)來幫助您學(xué)習(xí)正則表達(dá)式語法。每個(gè)關(guān)卡中，你必須輸入一個(gè)字符串，該字符串與表達(dá)式相匹配

8. RegexOne

網(wǎng)址：RegexOne^[28]

簡介：該網(wǎng)站使用約25個(gè)練習(xí)和問題來練習(xí)正則表達(dá)式語法。還包括5種不同編程語言的正則表達(dá)式指南

最后

希望本文能幫助到大家，如有補(bǔ)充，歡迎留言~

參考資料