css js 辅助学习巩固知识可以边玩边学边记的网站

• 5. Promisees

• 6. JSchallenger

• 7. Service Workies

• 其他

• • 1.Git分支学习

• 2. Select Star SQL

• 3.SQL 警察局

• 4. CodinGame

• 5. 正则填字游戏

• 6. RegexOne

CSS相关的学习网站

========================================================================

1.Flex Box 冒险游戏

---

网址

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

2.Flexbox 格子骑士:

---

网址

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

3.Flex Box 青蛙:

---

网址

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

4.Flex Box 打僵尸:

---

网址

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

5. Flex Box 保卫战

---

网址

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

6. Flex语法操纵台

---

网址

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

7. Grid 花园

---

网址

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

8.CSS Grid 备忘清单

---

网址

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

![在这里插入图片描述](https://img-blog.csdnimg.cn/af

真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
详情关注公中号【编程进阶路】

3f02fac0294ce1abe13b6f56efda24.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y2K55Sf6L-H5b6A,size_20,color_FFFFFF,t_70,g_se,x_16)

9.Grid 攻击

---

网址

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

10.CSS 选择器备忘清单

---

网址

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

11. CSS 动画

---

网址

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

12. 混合滤镜

---

网址

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

13. CSS晚餐

---

网址

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

JavaScript学习网站

============================================================================

1. TypeScript 练习

---

网址

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

2. 设计模式游戏

---

网址

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

3.React 教程

---

网址

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

基础学习：

前端最基础的就是 HTML , CSS 和 JavaScript 。

网页设计：HTML和CSS基础知识的学习

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

[外链图片转存中…(img-ww5e9tPd-1720766239296)]

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

[外链图片转存中…(img-sPeYUr5L-1720766239297)]

动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。