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

最新推荐文章于 2023-10-10 08:56:59 发布
最新推荐文章于 2023-10-10 08:56:59 发布
阅读量447 收藏 5
点赞数
分类专栏： JavaScript CSS 文章标签： css html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/estrusKing/article/details/122254939
版权

文章目录

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。在右侧网格中选择一个框，然后使用左边栏中的选项和设置来调整网格布局的不同部分。
在这里插入图片描述

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。此外，页内编辑器还提供代码补全提示功能
在这里插入图片描述

4.Untrusted

网址

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

5. Promisees

网址

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

在这里插入图片描述

6. JSchallenger

网址

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

在这里插入图片描述

7. Service Workies

网址

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

其他

1.Git分支学习

网址

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

2. Select Star SQL

网址

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

3.SQL 警察局

网址

简介：该网站让您通过解决犯罪游戏学习 SQL 语法
在这里插入图片描述

4. CodinGame

网址

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

在这里插入图片描述

5. 正则填字游戏

网址

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

在这里插入图片描述

6. RegexOne

网址

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

半生过往
关注
专栏目录
HTML+CSS网页设计期末课程大作——轮滑运动-人物介绍主题(10页)
12-24 1021
HTML+CSS网页设计期末课程大作——轮滑运动-人物介绍主题(10页) 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 获取更多源码 PC电脑端关注我们 ????作者主页-更多
20个学习CSS的绝佳网站——让你从入门到精通
小秋博客
09-30 1409
<br />CSS（层叠样式表）是一种简单的设计语言，能够将页面变漂亮这回事儿变的简单化。在HTML和XHTML中设定页面的样式，这是最常用的应用。但也可以应用于 XML类的文档，包括SVG和XUL。他负责管理网页的设计和外观。使用CSS，你可以控制文字的颜色、字体、段落间距、分栏的数目大小布局、背景图片颜色，以及其他很多种的效果。接下来才是要说的是学习并掌握CSS的20个绝佳站点。这里收集到的CSS站点能使你从初学者到高级人员。这些能协助你开发和改进网站。恩，随便看看吧。<br />Csstutorial
CSS相关的学习网站、JavaScript相关的学习网站、其它学习网站【转 技术胖学程序】
Xpy 的博客
12-29 600
一、CSS学习网站 1. Flex Box 冒险游戏 网址：Flex Box 冒险游戏 https://codingfantasy.com/games/flexboxadventure 简介：这是一个通过使用 flex box 相关知识来完成闯关的冒险游戏，一共24个关卡，更生动地带你体验 Flex 的真实应用场景 2. Flexbox 格子骑士 网址：Flexbox 格子骑士 https://knightsoftheflexboxtable.com/ 简介：这个游戏能帮助你学习不同层面的Fle
一个学习CSS的很好的网站
无烟会议室的专栏 产品|编程|软件工程|管理|游戏|电子书
02-10 2391
http://www.cssbasics.com/ CSS Chapters: Chapter 1 - Introduction to CSS Chapter 2 - CSS Syntax Chapter 3 - CSS Classes Chapter 4 - CSS IDs Chapter 5 - CSS Divisions
CSS 学习网站
编写博客，学习交流
07-28 790
CSS 参考书CSS 灵感UI 设计师的灵感源泉交互式在线 CSS 速记表学习 CSS 布局CSS 小花招web.dev 上的 CSS 教学专栏W3 How To 学习如何实现常见的页面组件450 多个纯 CSS 实现的 UI 设计 by Ξ ℂ𝕠𝕕𝕖𝕄𝕪𝕌𝕀。
HTML/CSS/JS学习资源：代码与源码压缩包
学习者应该利用这些资源来加深对前端开发技术的理解，并通过实践来巩固学到的知识。 6. HTML、CSS和JavaScript的综合应用：在实际开发过程中，学习者将学会如何将HTML的结构化特性、CSS的样式控制和JavaScript的...
教学辅助系统_学习参考源码.zip
12-27
【教学辅助系统_学习参考源码.zip】是一个包含教学辅助系统源码的压缩包，用于教育和学习...最后，尝试运行项目，观察其实际运行效果，甚至尝试添加新功能或优化现有功能，这样可以巩固你的学习成果并提升实践能力。
通过思维导图的方式来学习前端，将思维形象化，串联知识点，系统学习前端知识，提高学习效率，加深记忆.zip
03-03
在学习前端开发的过程中，思维导图是一种非常有效的学习工具，它可以帮助我们把抽象的概念和复杂的知识结构可视化，从而提升理解力和记忆力。本资源“通过思维导图的方式来学习前端”显然是一个利用Xmind软件创建的...
前端学习笔记，做一个简单的网站，模仿京东方网站.html，学习代码
最新发布
06-20
在前端开发的学习过程中，制作一个简单的网站是对理论知识和实践技能的综合...通过这个项目，我们可以从实践中学习和巩固前端开发的基础知识，提高问题解决能力和创新能力，为未来更复杂的Web应用开发打下坚实的基础。
JSExercise:HTML，CSS和Javascript练习
05-07
6. **项目实战**：可能包含小型的前端项目，让学习者将所学知识应用于实际场景，提升综合能力。 总之，“JSExercise:HTML，CSS和Javascript练习”是一个全面的前端学习资源，无论你是新手还是有一定经验的开发者，...
css学习网站
samblueRed的专栏
12-04 549
 www.w3schools.com 用CSS做出双色相间表格       http://www.csdn.net/develop/read_article.asp?id=22313         用CSS做出立体表格.     http://www.csdn.net/develop/read_article.asp?id=22202    
推荐20个让你学习并精通CSS的网站
weixin_33778778的博客
07-29 217
CSS的学习过程既可以说简单又可以说是复杂。CSS的语法比较简单，但CSS的应用中有一些概念(一可以说是原理)还是很难掌握的。今天暴风彬彬向你推荐20个出色的CSS技术类(英语)网站帮你更好的理解和掌握CSS，其中包括各种各样的网站，从博客到清单风格列表甚至网站，它们都侧重于研究同一个主题，那就是CSS。 1. A List Apart CSS Topics 　　A List Apart...
好玩的 CSS - 40 个有趣的 CSS 学习网站
程序员成长指北
10-18 1533
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群???? 基础学习cssreference.io/[1] CSS 参考书chokcoco.g...
CSS特殊学习网址
yqj234的专栏
10-10 234
css基本教程 内填充padding——前端编程新手必学_哔哩哔哩_bilibili css3基本语法 CSS flex布局（弹性布局/弹性盒子） Agence digitale créative à Paris et Montpellier | Sweet Punk CSS布局 CSS Layout — Phuoc Nguyen CSS中文特效 Coco ’s blog 特效网址 Coco ’s blog
JavaScript-Projects:现代HTML5，CSS3和JavaScript可以构建响应式和移动友好型项目
04-10
这些实例将帮助学习者实践和巩固HTML5、CSS3和JavaScript的综合运用。现场演示部分可能包含实际运行的项目，展示如何将这些技术整合到一起，形成一个完整的、响应式的、移动友好的网页应用。 其他资源可能包括教程...
CSS网站练习
John_boom的博客
09-08 2286
跟着做之前的博雅互动的网站阶段一<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head
CSS学习精品网站推荐
liliugen的专栏
11-18 368
目前网页标准已是大势所趋。正如原始的品网站点，下面的这些站点将一如既往地显示群聚的力量。 　　凝视世界顶尖WEB设计师的标准制作，感受标准的气氛，掀起学习标准的浪潮。 　　CSS设计师们，加油吧。 　　CSS ZenGarden: http://www.csszengarden.com/ 　　CSS禅意花园是最富盛名的CSS设计陈列馆，DaveShea在创办之初是为了让网页设计师通过CSS样式表...
css制作学习网页
qq_43537987的博客
02-15 610
效果展示 制作头部 html &lt;header&gt; &lt;nav&gt; &lt;!-- logo部分 --&gt; &lt;div class="logo"&gt; &lt;img src="images/logo_03.png" alt=""&gt; &lt;/div&gt; &lt;!-- 导航
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

半生过往

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值