|
大家好，我是零一，經常有讀者問我：自學怎么學，要學的知識那么多，根本記不住怎么辦？ 
讀者咨詢我一般剛開始回答的時候都是說要多做筆記總結，更重要的就是要上手敲代碼實踐，如果拋開任何場景在那學習知識，不光記不住，說不定對知識應用的掌握程度也不夠 另外，學習也是需要靠興趣的，希望你們在上手實踐敲代碼的過程中能感受到樂趣 所以，今天我給大家推薦28個輔助你學習鞏固知識的網站，讓你邊玩邊學邊記！ 本文大致的目錄結構如下： CSS相關的學習網站 JavaScript相關的學習網站 其它學習網站
因為這些網站大多都是國外的大佬們做的，所以網頁大多都是英文，為了更好地使用，給你們推薦兩個翻譯的方式： 
chrome瀏覽器自帶的翻譯功能
插件劃詞翻譯好了，希望英文的存在不要成為你學習的障礙（更重要的還是要私底下多背單詞，提升自己的英語水平，畢竟程序員免不了看英文文檔） 一、CSS學習網站1. Flex Box 冒險游戲網址：Flex Box 冒險游戲[1] 簡介：這是一個通過使用 flex box 相關知識來完成闖關的冒險游戲，一共24個關卡，更生動地帶你體驗 Flex 的真實應用場景 
Flex Box 冒險游戲2. Flexbox 格子騎士網址：Flexbox 格子騎士[2] 簡介：這個游戲能幫助你學習不同層面的Flex Box規范，一共有18個關卡，并且你在該游戲中寫CSS類時，不是用原生寫的，而是用Tailwind，一舉兩得，技能學習Flex，又能學習Tailwind 
Flexbox 格子騎士3. Flex Box 青蛙????網址：Flex Box 青蛙[3] 簡介：游戲中每個青蛙對應不同的關卡難度，每個難度對應著Flex相關的知識點 
Flex Box 青蛙4. Flex Box 打僵尸網址：Flex Box 打僵尸[4] 簡介：這是個學習Flex語法的游戲，每一關會有一個打僵尸的情節，并給你輸送一個 Flex 相關知識，你可以用該知識進行游戲的存活 
Flex Box 打僵尸5. Flex Box 保衛戰網址：Flex Box 保衛戰[5] 簡介：這是一款塔防戰略游戲，它教會你使用 Flexbox 語法來阻止敵人越過你的防線。 
Flex Box 保衛戰6. Flex語法操縱臺網址：Flex語法操縱臺[6] 簡介：該網站給你提供了一個完整的Flex語法修改的操作區，讓你隨心所欲地嘗試Flex語法 
Flex語法操縱臺7. Grid 花園網址：Grid 花園[7] 簡介：這款游戲包括28個不同的關卡，致力于教會你 CSS Grid 布局 
Grid 花園8. CSS Grid 備忘清單網址：CSS Grid 備忘清單[8] 簡介：這是一個可視化和交互式的備忘清單，能幫助你理解 CSS Grid。在右側網格中選擇一個框，然后使用左邊欄中的選項和設置來調整網格布局的不同部分。 
CSS Grid 備忘清單9. Grid 攻擊網址：Grid 攻擊[9] 簡介：該游戲包含80個關卡，帶你體驗類似真實場景下的網格布局情況
Grid 攻擊10. CSS 選擇器備忘清單網址：CSS 選擇器備忘清單[10] 簡介：該網站是用來測試你對 CSS 選擇器的理解。前面的幾個相當簡單，但是隨著進入更高級的選擇器(如使用較少的偽類) ，練習的難度會增加。
CSS 選擇器備忘清單11. CSS 動畫網址：CSS 動畫[11] 簡介：該網站是一個功能齊全的學習和測試不同 CSS 動畫規范的平臺。總共32個部分的課程，有很多預先建立的圖形，在課程中用作動畫的基礎，非常有趣的帶我們學習了 keyframe 動畫
CSS 動畫12. 混合濾鏡網址：混合濾鏡[12] 簡介：它允許您使用 CSS 的mix-blend-mode、background-blend-mode和filter。你可以在圖層中添加一個或多個你自己的圖片，同時添加一個背景顏色，然后調整設置，看看不同的值效果如何
混合濾鏡13. CSS晚餐網址：CSS晚餐[13] 簡介：這個網站對于 CSS 初學者或者那些不熟悉高級 CSS 選擇器的人來說是很好的。它允許你隨意使用 CSS 選擇器，并且能看到dom和css的具體情況，這樣你就可以看到圖像和css代碼之間的關系。
CSS晚餐二、JavaScript學習網站1. TypeScript 練習網址：TypeScript 練習[14] 簡介：這是一個在線的ts練習網站，可以練習使用ts的特性，適合入門以及進階的同學
TypeScript 練習2. 設計模式游戲網址：設計模式游戲[15] 簡介：專門為懂js但從沒學過JavaScript設計模式的同學設計的網站
設計模式游戲3. React 教程網址：React 教程[16] 簡介：現在有很多地方可以學習react，但此次推薦的這個網站也是一個很不錯的選擇，這個網站的獨特的地方在于它是從一些 JavaScript 概念開始的，這些概念對于理解它們很重要，以便更有效地學習理解 React。此外，頁內編輯器還提供代碼補全提示功能
React 教程4. Untrusted網址：Untrusted[17] 簡介：這是一個 JavaScript 的冒險游戲，你必須引導一個名叫 Eval 博士的角色穿越不同的迷宮。您可以通過更改和重新執行當前挑戰中使用的代碼來完成任務，鍛煉你js能力的時候到了
Untrusted5. Promisees網址：Promisees[18] 簡介：該網站幫你學習Promise相關知識。您可以使用這個小應用程序來可視化出promise是如何工作的，以及它們在真正的代碼庫中是如何使用的。
Promisees6. JSchallenger網址：JSchallenger[19] 簡介：這網站可以讓你通過解決不同的編碼難題來學習 JavaScript。同時這里有一個“最受歡迎”和“最失敗”挑戰的快速列表，更便于你篩選
JSchallenger7. Service Workies網址：Service Workies[20] 簡介：該網站用于學習開發漸進式 Web 應用程序(PWAs)的各種功能
Service Workies三、其它1. Git分支學習網址：Git分支學習[21] 簡介：在學習 Git 這樣的命令行工具時，常常缺少可視化內容。該網站旨在通過使用 Git 倉庫可視化工具、 沙箱 和一系列教育性教程和挑戰，以可視化和交互式的方式對 Git 的不同特性進行遍歷，從而解決這個問題。
Git分支學習2. Select Star SQL網址：Select Star SQL[22] 簡介：這個網站可以讓您學習 SQL 的概念。這是通過以下指令來完成的，這些指令針對一個真實的數據集運行 SQL 查詢，通過5個章節來完成，每個章節大約需要30分鐘來完成。
Select Star SQL3. 正則網址：Select Star SQL[23] 簡介：其類似于正則表達式的 JSFiddle，但是有一些額外的特性可以幫助我們學習構建正則表達式。它包括一個 正則表達式 編輯器、一個由社區編寫的正則表達式庫、一個語法的快速參考，甚至還有一個交互式測試。
正則4. SQL 警察局網址：SQL警察局[24] 簡介：該網站讓您通過解決犯罪游戲學習 SQL 語法
SQL 警察局5. CodinGame網址：CodinGame[25] 簡介：這是一個功能齊全的學習平臺，允許您學習25種以上的編程語言，同時解決有趣的挑戰。
CodinGame6. OpenVim網址：CodinGame[26] 簡介：該網站教你如何使用 Vim，這是一個在 Unix 用戶中很流行的多平臺文本編輯器
OpenVim7. 正則填字游戲網址：正則填字游戲[27] 簡介：該游戲基于填字游戲的挑戰來幫助您學習正則表達式語法。每個關卡中，你必須輸入一個字符串，該字符串與表達式相匹配
正則填字游戲8. RegexOne網址：RegexOne[28] 簡介：該網站使用約25個練習和問題來練習正則表達式語法。還包括5種不同編程語言的正則表達式指南
RegexOne最后希望本文能幫助到大家，如有補充，歡迎留言~ 我是零一，分享技術，不止前端，下期見~ 參考資料[1] Flex Box 冒險游戲: https:///games/flexboxadventure [2]Flexbox 格子騎士: https:/// [3]Flex Box 青蛙: https:/// [4]Flex Box 打僵尸: https://geddski./p/flexbox-zombies [5]Flex Box 保衛戰: http://www./ [6]Flex語法操縱臺: https:///flexyboxes/ [7]Grid 花園: https:/// [8]CSS Grid 備忘清單: https://alialaa./css-grid-cheat-sheet/ [9]Grid 攻擊: https:///games/css-grid-attack [10]CSS 選擇器備忘清單: https:///css-selectors-cheatsheet/ [11]CSS 動畫: https:/// [12]混合濾鏡: https://ilyashubin./FilterBlend/ [13]CSS晚餐: https://flukeout./ [14]TypeScript 練習: https://typescript-exercises./ [15]設計模式游戲: https:/// [16]React 教程: https://react-tutorial.app/ [17]Untrusted: https://alexnisnevich./untrusted/ [18]Promisees: https://bevacqua./promisees/ [19]JSchallenger: https://www./ [20]Service Workies: https:/// [21]Git分支學習: https://learngitbranching./ [22]Select Star SQL: https:/// [23]Select Star SQL: https:/// [24]SQL警察局: https:/// [25]CodinGame: https://www./ [26]CodinGame: https://www./ [27]正則填字游戲: https:/// [28]RegexOne: https:/// 往期推薦 微軟悄悄發布了 Web 版的 VsCode 攤牌了，我是這么寫文章的... 熱議：CSS為什么這么難學？一定是你的方法不對 往期推薦
Vite 太快了，煩死了，是時候該小睡一會了。
如何實現比 setTimeout 快 80 倍的定時器？
萬字長文！總結Vue 性能優化方式及原理
90 行代碼的 webpack，你確定不學嗎？
如果你覺得這篇內容對你挺有啟發，我想邀請你幫我三個小忙：
點個「在看」，讓更多的人也能看到這篇內容（喜歡不點在看，都是耍流氓 -_-） 歡迎加我微信「huab119」拉你進技術群，長期交流學習... 關注公眾號「前端勸退師」，持續為你推送精選好文，也可以加我為好友，隨時聊騷。
點個在看支持我吧，轉發就更好了 如果覺得這篇文章還不錯，來個【轉發、收藏、在看】三連吧，讓更多的人也看到~
|
