网页css js 抓取助手(25个前端相关的学习网站和一些靠谱的小工具 )

　　网页css js 抓取助手(25个前端相关的学习网站和一些靠谱的小工具

)

　　我整理了25个前端相关的学习网站和一些靠谱的小工具，包括一些小游戏、教程、社区网站和博客，以及一些资源网站。我希望我能帮到你！

　　▍CSS相关

　　●1

　　CSSBattle-在线竞争CSS

　　竞技CSS在线，一款非常有趣的竞技类游戏，共12个关卡。您需要使用 HTML 和 CSS 将其给出的页面 100% 还原，然后最小化代码。您还可以查看全球排名并查看解决方案。计划。

　　

　　●2

　　学习 CSS 布局-学习 CSS 布局

　　在线CSS布局学习，将逐步引导初学者学习CSS基础知识，帮助初学者在实践中掌握CSS布局知识，提高初学者的CSS编写习惯和正确方法。

　　

　　●3

　　Flexbox Froggy-学习Flex布局的小游戏

　　一个学习 Flex 布局的引导游戏。使用flex layout让青蛙在荷叶上跳跃。就算完成了，游戏中也几乎收录

了所有常用的属性。学习起来很有趣，而且图像有利于记忆。谁不是Flex布局如果你熟悉，在这里多练习。

　　

　　●4

　　EnjoyCSS-在线CSS代码可视化工具

　　在线版CSS3代码生成工具，基于可视化操作，无需编码即可快速调整网页效果和图形样式。这就像在本地使用 PS 或 AI 软件。

　　

　　●5

　　CSS-Tricks-CSS 技巧

　　本站不断更新一些优秀的CSS技术教程和技巧，文章每天更新。

　　

　　●6

　　Neumorphism - 实现新的拟态效果

　　它可以轻松实现新的模拟效果，不仅可以修改颜色或填充颜色值，还可以修改大小、半径、距离、强度、模糊效果和形状等参数。同时，它提供了可以直接复制的CSS代码。

　　

　　●7

　　uiGradients-共享渐变色

　　提供渐变色效果的网站。有接近数百种渐变配色方案。可以根据自己的风格进行选择搭配，直接获取渐变配色方案对应的CSS代码。

　　

　　▍JS相关

　　●8

　　JavaScript 秘密花园

　　一直在更新的 JavaScript 语法文档。主要写了如何避免一些常见的错误，发现难以发现的bug。它将更深入地了解 JavaScript 的语言特性。

　　

　　●9

　　JSTips-JS技巧

　　每天一点Javascript知识。

　　

　　●10

　　JSweekly-科技周刊

　　专注于 Javascript 的技术周刊。

　　

　　●11

　　CDNJS-JavaScript 数据库

　　CDNJS为开发者提供最新的前端Web开发资源，免费，无限制。你可以在自己的网页上直接引用这些JS文件。进入CDNJS网站后，搜索你想要的资源库，点击项目后面的【复制脚本标签】，粘贴即可使用。目前，CDNJS在Web前端的CDN服务中排名第二（排名第一的是谷歌），性能优异。

　　

　　●12

　　开源 JS 库的美丽开放集合

　　采集

各类设计优秀的开源项目，从CMS内容管理系统到常用的小型Javascript库，适合网站开发用户。

　　

　　●13

　　JavaScript Fun- 代码库合集

　　汇集当下最流行的JavaScript代码库，展示流行度排名，开发者可以轻松找到最新的代码插件、工具和博客。

　　

　　▍社区和博客

　　●14

　　Stack Overflow-程序员问答

　　全球IT行业最受欢迎的技术问答网站之一，一个解决bug的社区，被称为“编程界的十万个为什么”。

　　

　　●15

　　掘金-优质技术社区

　　掘金技术社区是一个优质的技术分享社区。技术专家和极客们共同编辑、甄选优质干货。这些技术文章包括Android、iOS、前端和后端资源。

　　

　　●16

　　Codrops-网页设计开发博客

　　发布技术文章和网络教程，提供经验，陷阱少，资源丰富，很多优秀的技术都来自这里。

　　

　　▍在线IDE

　　●17

　　代码笔

　　一个网站前端设计开发平台，一个网站前端代码的工具，上面有各种效果案例特效（炫技），你可以根据他们的demo开发自己的前端设计.

　　

　　●18

　　代码沙盒

　　顾名思义，CodeSandBox 网站提供了一个在线开发环境的“沙箱”。React、Vue、Angular等主流框架都可以开箱即用，实时编译预览，非常方便。

　　

　　●19

　　JSBin

　　另一个轻量级的在线编辑器网站，界面简洁干净，如果你想暂时调试简单的HTML或JS代码，可以考虑去这里试一试。

　　

　　▍资源

　　● 20

　　ICONSVG-在线定制设计SVG图标素材

　　它是 SVG 图标素材的在线可定制设计。帮助前端设计师找到自己想要的图标素材。这些图标素材都是常用的图标。二次设计可以点官方资料，也可以自己设计好的。图标导出。

　　

　　●21

　　OpenMoji-free 表情符号库

　　提供Emoji源代码库，可免费下载使用。

　　

　　● 22

　　分享无图标矢量素材库

　　一个提供超过 120 个类别的超过 250,000 个 ICON 矢量图像材料的网站。所有材料均以 PNG 和 SVG 格式提供。材料有多种尺寸可供选择，包括512*512、256*256、 128*128、64*64、32*32、16* 16等，非常适合前端设计师采集

和储备。

　　

　　● 23

　　tableconvert-在线表格编辑器

　　一个强大的在线表单编辑器，支持Excel、Markdown、JSON、CSV、HTML等格式之间的转换。当您需要在不变形的情况下转换表格时，您不妨试试这个工具。

　　

　　● 24

　　Feathericons-极简图标集

　　一个免费和开源的简单而漂亮的 ICON 图标集合。主要设计用途是应用系统、媒体控制、位置、天气、箭头、标志等，可以在开发移动应用时使用。图标格式为 SVG。

　　

　　● 25

　　HTML5 + CSS 3 免费模板

　　提供了大量的HTML5模板，用户可以自行分享和修改模板。

　　

　　本文推荐网站汇总：

　　CSS之战：

　　学习 CSS 布局：

　　Flexbox 青蛙：

　　享受CSS：

　　CSS 技巧：

　　新拟态：

　　uiGradients：

　　JavaScript：

　　JS小贴士：

　　JS周刊：

　　CDNJS：

　　美丽开放：

　　JavaScript 乐趣：

　　堆栈溢出：

　　掘金：

　　共滴：

　　代码笔：

　　代码沙盒：

　　JS斌：

　　图标SVG：

　　开模：

　　分享图标：

　　表转换：

　　羽毛图标：

　　HTML5UP：

　　

如果你有写博客的好习惯

欢迎投稿

赞+在看,小生感恩❤️