但凡早知道这28个网站，都不至于学得那么不扎实

矫情吗；* 2022-09-11 09:16 212阅读 0赞

大家好，我是零一，经常有读者问我：自学怎么学，要学的知识那么多，根本记不住怎么办？

![276a3cf96afbe14d3efcb7e0343d7008.png][] 读者咨询

我一般刚开始回答的时候都是说要多做笔记总结，更重要的就是要上手敲代码实践，如果抛开任何场景在那学习知识，不光记不住，说不定对知识应用的掌握程度也不够

另外，学习也是需要靠兴趣的，希望你们在上手实践敲代码的过程中能感受到乐趣

所以，今天我给大家推荐28个辅助你学习巩固知识的网站，让你边玩边学边记！

本文大致的目录结构如下：

*  CSS相关的学习网站
 *   *  1 xxxx
     *  2 xxxx
     *  n xxxx
 *  JavaScript相关的学习网站
 *   *  1 xxxx
     *  2 xxxx
     *  n xxxx
 *  其它学习网站
 *   *  1 xxxx
     *  2 xxxx
     *  n xxxx

因为这些网站大多都是国外的大佬们做的，所以网页大多都是英文，为了更好地使用，给你们推荐两个翻译的方式：

*  使用Chrome浏览器自带的翻译功能，可以中英随意切换

![f6728c6a83e8d5d669ee7a1a911cfa9c.png][] chrome浏览器自带的翻译功能

*  下一个`"Google 翻译"`插件，遇到不懂的英文直接选中点击翻译即可

![e2fcb58e8c3f29621aba9b671e2ae789.png][] 插件划词翻译

好了，希望英文的存在不要成为你学习的障碍（更重要的还是要私底下多背单词，提升自己的英语水平，毕竟程序员免不了看英文文档）

## 一、CSS学习网站 ##

### 1. Flex Box 冒险游戏 ###

网址：Flex Box 冒险游戏\[1\]

简介：这是一个通过使用 `flex box` 相关知识来完成闯关的冒险游戏，一共24个关卡，更生动地带你体验 `Flex` 的真实应用场景

![2fa8cd1dcaad99ed234cbb68732f1686.png][] Flex Box 冒险游戏

### 2. Flexbox 格子骑士 ###

网址：Flexbox 格子骑士\[2\]

简介：这个游戏能帮助你学习不同层面的`Flex Box`规范，一共有18个关卡，并且你在该游戏中写CSS类时，不是用原生写的，而是用Tailwind，一举两得，技能学习Flex，又能学习Tailwind

![4fdeb20f2aac727eac522287f14a13bc.png][] Flexbox 格子骑士

### 3. Flex Box 青蛙???? ###

网址：Flex Box 青蛙\[3\]

简介：游戏中每个青蛙对应不同的关卡难度，每个难度对应着Flex相关的知识点

![1611ddf36a483f89547cd283b1f89137.png][] Flex Box 青蛙

### 4. Flex Box 打僵尸 ###

网址：Flex Box 打僵尸\[4\]

简介：这是个学习Flex语法的游戏，每一关会有一个打僵尸的情节，并给你输送一个 Flex 相关知识，你可以用该知识进行游戏的存活

![0408f31e870b2e9f55cf8da21c5e6f01.png][] Flex Box 打僵尸

### 5. Flex Box 保卫战 ###

网址：Flex Box 保卫战\[5\]

简介：这是一款塔防战略游戏，它教会你使用 Flexbox 语法来阻止敌人越过你的防线。

![1163eb8f22ad17849a4a2296b8b9175b.png][] Flex Box 保卫战

### 6. Flex语法操纵台 ###

网址：Flex语法操纵台\[6\]

简介：该网站给你提供了一个完整的Flex语法修改的操作区，让你随心所欲地尝试Flex语法

![c41cc6f70f35b88cafb73d29f9530475.png][] Flex语法操纵台

### 7. Grid 花园 ###

网址：Grid 花园\[7\]

简介：这款游戏包括28个不同的关卡，致力于教会你 CSS Grid 布局

![c3c37d63a53eddd7be90ba477400d99d.png][] Grid 花园

### 8. CSS Grid 备忘清单 ###

网址：CSS Grid 备忘清单\[8\]

简介：这是一个可视化和交互式的备忘清单，能帮助你理解 CSS Grid。在右侧网格中选择一个框，然后使用左边栏中的选项和设置来调整网格布局的不同部分。

![37dc9bdbf288226a6ed2378c099378e5.png][] CSS Grid 备忘清单

### 9. Grid 攻击 ###

网址：Grid 攻击\[9\]

简介：该游戏包含80个关卡，带你体验类似真实场景下的网格布局情况

![013d094012022334abe33a52095286d7.png][] Grid 攻击

### 10. CSS 选择器备忘清单 ###

网址：CSS 选择器备忘清单\[10\]

简介：该网站是用来测试你对 CSS 选择器的理解。前面的几个相当简单，但是随着进入更高级的选择器(如使用较少的伪类) ，练习的难度会增加。

![0d763e73d740540da1bd38f92a4774ea.png][] CSS 选择器备忘清单

### 11. CSS 动画 ###

网址：CSS 动画\[11\]

简介：该网站是一个功能齐全的学习和测试不同 CSS 动画规范的平台。总共32个部分的课程，有很多预先建立的图形，在课程中用作动画的基础，非常有趣的带我们学习了 `keyframe` 动画

![01d624caff35957caedca71a3a7ed281.png][] CSS 动画

### 12. 混合滤镜 ###

网址：混合滤镜\[12\]

简介：它允许您使用 CSS 的`mix-blend-mode`、`background-blend-mode`和`filter`。你可以在图层中添加一个或多个你自己的图片，同时添加一个背景颜色，然后调整设置，看看不同的值效果如何

![8ffebc977c4b3f17b596be14856dbfb2.png][] 混合滤镜

### 13. CSS晚餐 ###

网址：CSS晚餐\[13\]

简介：这个网站对于 CSS 初学者或者那些不熟悉高级 CSS 选择器的人来说是很好的。它允许你随意使用 CSS 选择器，并且能看到dom和css的具体情况，这样你就可以看到图像和css代码之间的关系。

![39e191c6fa4f4b03ea3d87e667033ac8.png][] CSS晚餐

## 二、JavaScript学习网站 ##

### 1. TypeScript 练习 ###

网址：TypeScript 练习\[14\]

简介：这是一个在线的ts练习网站，可以练习使用ts的特性，适合入门以及进阶的同学

![20cd249da8e14e796271119e835fa632.png][] TypeScript 练习

### 2. 设计模式游戏 ###

网址：设计模式游戏\[15\]

简介：专门为懂js但从没学过JavaScript设计模式的同学设计的网站

![47d2fd8bc0758600a76fca1742a7da2c.png][] 设计模式游戏

### 3. React 教程 ###

网址：React 教程\[16\]

简介：现在有很多地方可以学习react，但此次推荐的这个网站也是一个很不错的选择，这个网站的独特的地方在于它是从一些 JavaScript 概念开始的，这些概念对于理解它们很重要，以便更有效地学习理解 React。此外，页内编辑器还提供代码补全提示功能

![5423581708fbbe527937baa69111e7fb.png][] React 教程

### 4. Untrusted ###

网址：Untrusted\[17\]

简介：这是一个 JavaScript 的冒险游戏，你必须引导一个名叫 Eval 博士的角色穿越不同的迷宫。您可以通过更改和重新执行当前挑战中使用的代码来完成任务，锻炼你js能力的时候到了

![24dca1bbcfbdd157fd48e188daa8dbf6.png][] Untrusted

### 5. Promisees ###

网址：Promisees\[18\]

简介：该网站帮你学习Promise相关知识。您可以使用这个小应用程序来可视化出promise是如何工作的，以及它们在真正的代码库中是如何使用的。

![550e7e45e5c45796b9883ad24da20dbd.png][] Promisees

### 6. JSchallenger ###

网址：JSchallenger\[19\]

简介：这网站可以让你通过解决不同的编码难题来学习 JavaScript。同时这里有一个“最受欢迎”和“最失败”挑战的快速列表，更便于你筛选

![51bddff7a30d2da9e39398f7bfa131fb.png][] JSchallenger

### 7. Service Workies ###

网址：Service Workies\[20\]

简介：该网站用于学习开发渐进式 Web 应用程序(PWAs)的各种功能

![ff6f9508309c2f8214f6f702d3246ade.png][] Service Workies

## 三、其它 ##

### 1. Git分支学习 ###

网址：Git分支学习\[21\]

简介：在学习 Git 这样的命令行工具时，常常缺少可视化内容。该网站旨在通过使用 Git 仓库可视化工具、 沙箱 和一系列教育性教程和挑战，以可视化和交互式的方式对 Git 的不同特性进行遍历，从而解决这个问题。

![d7b1c375c57df951b9299b51d088959b.png][] Git分支学习

### 2. Select Star SQL ###

网址：Select Star SQL\[22\]

简介：这个网站可以让您学习 SQL 的概念。这是通过以下指令来完成的，这些指令针对一个真实的数据集运行 SQL 查询，通过5个章节来完成，每个章节大约需要30分钟来完成。

![e623a322106fafacd5881dbac6af0e07.png][] Select Star SQL

### 3. 正则 ###

网址：Select Star SQL\[23\]

简介：其类似于正则表达式的 JSFiddle，但是有一些额外的特性可以帮助我们学习构建正则表达式。它包括一个 正则表达式 编辑器、一个由社区编写的正则表达式库、一个语法的快速参考，甚至还有一个交互式测试。

![131c7f3839e38691be3c6376605cd153.png][] 正则

### 4. SQL 警察局 ###

网址：SQL警察局\[24\]

简介：该网站让您通过解决犯罪游戏学习 SQL 语法

![b17e83a4b3b5a959239014c185ceb0c1.png][] SQL 警察局

### 5. CodinGame ###

网址：CodinGame\[25\]

简介：这是一个功能齐全的学习平台，允许您学习25种以上的编程语言，同时解决有趣的挑战。

![8a382540a9377a2a251a2a7f9bff655a.png][] CodinGame

### 6. OpenVim ###

网址：CodinGame\[26\]

简介：该网站教你如何使用 Vim，这是一个在 Unix 用户中很流行的多平台文本编辑器

![0b71f3e82d3b1e5e72ae4607c434a1d6.png][] OpenVim

### 7. 正则填字游戏 ###

网址：正则填字游戏\[27\]

简介：该游戏基于填字游戏的挑战来帮助您学习正则表达式语法。每个关卡中，你必须输入一个字符串，该字符串与表达式相匹配

![189d0d47b1574980fa966f501e8ba461.png][] 正则填字游戏

### 8. RegexOne ###

网址：RegexOne\[28\]

简介：该网站使用约25个练习和问题来练习正则表达式语法。还包括5种不同编程语言的正则表达式指南

![3ffd31e537d52b77c91124799b5f6f63.png][] RegexOne

## 最后 ##

希望本文能帮助到大家，如有补充，欢迎留言~

我是零一，分享技术，不止前端，下期见~

### 参考资料 ###

\[1\]

Flex Box 冒险游戏: https://codingfantasy.com/games/flexboxadventure

\[2\]

Flexbox 格子骑士: https://knightsoftheflexboxtable.com/

\[3\]

Flex Box 青蛙: https://flexboxfroggy.com/

\[4\]

Flex Box 打僵尸: https://geddski.teachable.com/p/flexbox-zombies

\[5\]

Flex Box 保卫战: http://www.flexboxdefense.com/

\[6\]

Flex语法操纵台: https://the-echoplex.net/flexyboxes/

\[7\]

Grid 花园: https://cssgridgarden.com/

\[8\]

CSS Grid 备忘清单: https://alialaa.github.io/css-grid-cheat-sheet/

\[9\]

Grid 攻击: https://codingfantasy.com/games/css-grid-attack

\[10\]

CSS 选择器备忘清单: https://frontend30.com/css-selectors-cheatsheet/

\[11\]

CSS 动画: https://css-animations.io/

\[12\]

混合滤镜: https://ilyashubin.github.io/FilterBlend/

\[13\]

CSS晚餐: https://flukeout.github.io/

\[14\]

TypeScript 练习: https://typescript-exercises.github.io/

\[15\]

设计模式游戏: https://designpatternsgame.com/

\[16\]

React 教程: https://react-tutorial.app/

\[17\]

Untrusted: https://alexnisnevich.github.io/untrusted/

\[18\]

Promisees: https://bevacqua.github.io/promisees/

\[19\]

JSchallenger: https://www.jschallenger.com/

\[20\]

Service Workies: https://serviceworkies.com/

\[21\]

Git分支学习: https://learngitbranching.js.org/

\[22\]

Select Star SQL: https://selectstarsql.com/

\[23\]

Select Star SQL: https://selectstarsql.com/

\[24\]

SQL警察局: https://sqlpd.com/

\[25\]

CodinGame: https://www.codingame.com/

\[26\]

CodinGame: https://www.codingame.com/

\[27\]

正则填字游戏: https://regexcrossword.com/

\[28\]

RegexOne: https://regexone.com/

往期推荐

[微软悄悄发布了 Web 版的 VsCode][Web _ VsCode]

[摊牌了，我是这么写文章的...][...]

[热议：CSS为什么这么难学？一定是你的方法不对][CSS]

往期推荐

[![9396453bc63de4d0d9097b917e36d80a.png][]][9396453bc63de4d0d9097b917e36d80a.png 1]

[Vite 太快了，烦死了，是时候该小睡一会了。][9396453bc63de4d0d9097b917e36d80a.png 1]

[![d063795c6b77e48c67b2df07537e3985.png][]][d063795c6b77e48c67b2df07537e3985.png 1]

[如何实现比 setTimeout 快 80 倍的定时器？][d063795c6b77e48c67b2df07537e3985.png 1]

[![4c29660444ebc5b13b38d70ffeaa9793.png][]][4c29660444ebc5b13b38d70ffeaa9793.png 1]

[万字长文！总结Vue 性能优化方式及原理][4c29660444ebc5b13b38d70ffeaa9793.png 1]

[![fa5903d1cc264c652110e33ba843d1c7.png][]][fa5903d1cc264c652110e33ba843d1c7.png 1]

[90 行代码的 webpack，你确定不学吗？][fa5903d1cc264c652110e33ba843d1c7.png 1]

如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：

1.  点个「**在看**」，让更多的人也能看到这篇内容（喜欢不点在看，都是耍流氓 -\_-）
2.  欢迎加我微信「huab119」拉你进技术群，长期交流学习...
    
    关注公众号「**前端劝退师**」，持续为你推送精选好文，也可以加我为好友，随时聊骚。
3.

![9fc51a96d7d76a589a84ba2fb96046d0.png][]

点个在看支持我吧，转发就更好了

如果觉得这篇文章还不错，来个【转发、收藏、在看】三连吧，让更多的人也看到~

![3b2d37fb8aaae30e187955aebf94c6ed.png][]

[276a3cf96afbe14d3efcb7e0343d7008.png]: /images/20220828/2021504c76dc40fe8c9f729899640b6a.png
[f6728c6a83e8d5d669ee7a1a911cfa9c.png]: /images/20220828/f049c6c6268a4a2ea161113dc1dad640.png
[e2fcb58e8c3f29621aba9b671e2ae789.png]: /images/20220828/fee8452096dc49c8a7d27ad09b2e0a3a.png
[2fa8cd1dcaad99ed234cbb68732f1686.png]: /images/20220828/38924283c3ec40e7939435636ed97e51.png
[4fdeb20f2aac727eac522287f14a13bc.png]: /images/20220828/35e91b1435604ff0a9de4b4b8be3c531.png
[1611ddf36a483f89547cd283b1f89137.png]: /images/20220828/317a7d52acee4de296de22aa36552446.png
[0408f31e870b2e9f55cf8da21c5e6f01.png]: /images/20220828/6bdd60d9e5b644e092b53eb54a15dcea.png
[1163eb8f22ad17849a4a2296b8b9175b.png]: /images/20220828/a8025235de9c4f24ad5a3ef723e55af4.png
[c41cc6f70f35b88cafb73d29f9530475.png]: /images/20220828/a769ae79cda14aa0b55918d8ca3899a9.png
[c3c37d63a53eddd7be90ba477400d99d.png]: /images/20220828/d5170a90547e4d929fe898b1b77068bc.png
[37dc9bdbf288226a6ed2378c099378e5.png]: /images/20220828/6c5b92765afd42c7ad6c7316917a9215.png
[013d094012022334abe33a52095286d7.png]: /images/20220828/1e48b49ecffa4bfa92a69ec56994af30.png
[0d763e73d740540da1bd38f92a4774ea.png]: /images/20220828/018493a3e7ec4d3bb08280c2fcf878a4.png
[01d624caff35957caedca71a3a7ed281.png]: /images/20220828/21e16ed23f964aac914099c7846ff8ac.png
[8ffebc977c4b3f17b596be14856dbfb2.png]: /images/20220828/e2be9f47466f46258b0f58294245d564.png
[39e191c6fa4f4b03ea3d87e667033ac8.png]: /images/20220828/6a2bbf81b6fc45e2bec9a91a0b0119a3.png
[20cd249da8e14e796271119e835fa632.png]: /images/20220828/5a1e3f15a0f14597b77876092e464f43.png
[47d2fd8bc0758600a76fca1742a7da2c.png]: /images/20220828/58b8596a7b454c288d0b54161b7802e7.png
[5423581708fbbe527937baa69111e7fb.png]: /images/20220828/a1c8ae33a1044e0688297c4eca14a5a0.png
[24dca1bbcfbdd157fd48e188daa8dbf6.png]: /images/20220828/8d1ef8c236104a9483eefebdebc5caea.png
[550e7e45e5c45796b9883ad24da20dbd.png]: /images/20220828/ebf58dfc6dbc4686863263e7210abc89.png
[51bddff7a30d2da9e39398f7bfa131fb.png]: /images/20220828/06461424e92b421eb4463c05f30a91f1.png
[ff6f9508309c2f8214f6f702d3246ade.png]: /images/20220828/cc98b0cee2d64122a3ab05006b3ff700.png
[d7b1c375c57df951b9299b51d088959b.png]: /images/20220828/db872f61d2164631bda0b48a8fe4f70b.png
[e623a322106fafacd5881dbac6af0e07.png]: /images/20220828/421daf141cc94223afed738b2f77f6c8.png
[131c7f3839e38691be3c6376605cd153.png]: /images/20220828/d18bb118075148adae64a67e06eaa124.png
[b17e83a4b3b5a959239014c185ceb0c1.png]: /images/20220828/b2a10a328c4347248243f019f5c05bf9.png
[8a382540a9377a2a251a2a7f9bff655a.png]: /images/20220828/3b4e4edf77744322b83b7a1cd2098303.png
[0b71f3e82d3b1e5e72ae4607c434a1d6.png]: /images/20220828/3f8d2852efd549f8a6a1c43b377bda1e.png
[189d0d47b1574980fa966f501e8ba461.png]: /images/20220828/66ad6814421742ba8db8c1a020fe8573.png
[3ffd31e537d52b77c91124799b5f6f63.png]: /images/20220828/8518c8cf8060464cb2426d1fcf92db01.png
[Web _ VsCode]: http://mp.weixin.qq.com/s?__biz=MzkxMjI3MTA1Mg%3D%3D&chksm=c10de9f8f67a60ee1f55d4242d3f36a1f21f65d4dd65e1bad201305541dabac0c5a0e9fe6484&idx=1&mid=2247506523&scene=21&sn=421e3f5f48e532c9e0aa0e7ddc38ca84#wechat_redirect
[...]: http://mp.weixin.qq.com/s?__biz=MzkxMjI3MTA1Mg%3D%3D&chksm=c10de9eaf67a60fc08879d16b06283b7354ad581537eaa219e0cbcb6864f99746290d1486080&idx=1&mid=2247506505&scene=21&sn=e23260afd39b8e4bc15b24235cdd262c#wechat_redirect
[CSS]: http://mp.weixin.qq.com/s?__biz=MzkxMjI3MTA1Mg%3D%3D&chksm=c10de40af67a6d1c5834b8846d104b0eb52c85dd2cfb144298990e94fc15134f61e03d623d7f&idx=1&mid=2247505833&scene=21&sn=30e29599de118e92f2b2d10988a3f373#wechat_redirect
[9396453bc63de4d0d9097b917e36d80a.png]: /images/20220828/8ca1207f37f14fdc99c702786b7e98bb.png
[9396453bc63de4d0d9097b917e36d80a.png 1]: http://mp.weixin.qq.com/s?__biz=MzI1NDU3NzM5Mg%3D%3D&chksm=e9c24fb1deb5c6a70410889666afec7da71e77e5ab4b17b7677a22a554fdc9ee2f3d97006322&idx=1&mid=2247487534&scene=21&sn=947df5483ab7508f8d2f9abd8c2f11a8#wechat_redirect
[d063795c6b77e48c67b2df07537e3985.png]: /images/20220828/884353e3fec24aa5a51296081874cf5c.png
[d063795c6b77e48c67b2df07537e3985.png 1]: http://mp.weixin.qq.com/s?__biz=MzI1NDU3NzM5Mg%3D%3D&chksm=e9c25151deb5d847686e17e267e9659124dd4250f9df681564ce87a55190625bfd49adc02661&idx=1&mid=2247487182&scene=21&sn=ae83a65d4e6a9ee8b3b98a4cbe20c96b#wechat_redirect
[4c29660444ebc5b13b38d70ffeaa9793.png]: /images/20220828/234a5a413cd04321bde1f5b2e7217421.png
[4c29660444ebc5b13b38d70ffeaa9793.png 1]: http://mp.weixin.qq.com/s?__biz=MzI1NDU3NzM5Mg%3D%3D&chksm=e9c251e2deb5d8f455c581ddaf84a503c912d4bc2def725105fdf7442af6df6c6af0dee01b7b&idx=1&mid=2247487101&scene=21&sn=92c60dd47cf94731829bf006cd2b5e36#wechat_redirect
[fa5903d1cc264c652110e33ba843d1c7.png]: /images/20220828/094e19b794c443cf8fd5fbc964e84c5d.png
[fa5903d1cc264c652110e33ba843d1c7.png 1]: http://mp.weixin.qq.com/s?__biz=MzI1NDU3NzM5Mg%3D%3D&chksm=e9c24f0adeb5c61c4c64564fa3ef07fae165e0ba9c115c5846db1a94cd97f5f101e764c9b604&idx=1&mid=2247487637&scene=21&sn=bb353093eee2f07cfcfc7e4ad460ce7f#wechat_redirect
[9fc51a96d7d76a589a84ba2fb96046d0.png]: /images/20220828/ea166709323a4a3eaec7e3dd3ce22953.png
[3b2d37fb8aaae30e187955aebf94c6ed.png]: /images/20220828/f9414b1edacc4bdcba98b482526386a6.png